This article was originally published on blog.shhdharmen.me
Bootstrap provides contextual classes, let's see how we can add more classes in the same manner.
This is the series about customizing Bootstrap with it's scss variables
, mixins
and functions
. In previous article, we learned how to create responsive size classes.
Background
Bootstrap already provides contextual color classes, like bg-primary
, text-danger
, etc.
Let's see how we can add classes directly related with color name, like bg-blue
, text-yellow
, etc.
This is going to be very simple in short.
Start quickly with my github repo: bootstrap-theme-kit. Just follow the initial guide and continue below.
shhdharmen / bootstrap-theme-kit
Quickly generate and showcase your bootstrap theme.
bootstrap-theme-kit
Quickly β‘ Generate and Showcase π― your bootstrap theme π¨. Get Started or See sample theme.
π Getting Started
βοΈ Minimum Requirements
node -v
// v10.17.0
git --version
// git version 2.x
β¬οΈ Steps to Follow
- First, fork this repo.
- Open terminal and:
git clone <forked-repo-url>
cd bootstrap-theme-kit
npm i
npm run init
npm start
- Browser will open at 3000 port.
- Start editing your scss/html files and browser will reload.
π Features
- Of course, Bootstrap
- π Default and π Dark themes
- Gulp
- SCSS
-
SCSS-7-in-1
- Pro tip: Quickly generate SCSS 7-in-1 architecture anywhere using npx scss-7-in-1
- Live reload with Browsersync
- Linting and Formatting
-
Commitzen Friendly
-
Pro tip: After staging your files, use
npm run commit
to make commit messages commitzen friendly.
-
Pro tip: After staging your files, use
- Changelog and Version Management with Semantic Release
- β¦
We already have file called _colors.scss in utilities folder. Let's use that.
Add below code in it:
// src\styles\utilities\_colors.scss
$colors: () !default;
@each $color in map-keys($colors) {
.text-#{$color} {
color: $color !important;
}
.bg-#{$color} {
background-color: $color !important;
}
}
Now, we need to make some change in src\styles\main.scss, so that we can use Bootstrap's $colors
list in utilities_colors.scss.
As we are using @use
rule, it's easier to achieve such thing. Let's make some changes in src\styles\main.scss:
// src\styles\main.scss
...
// 5. Utilities
@use "utilities" with (
$colors: vendors.$colors
);
...
A quick description of what's happening over here:
- We created _colors.scss a configurable module
- Then, we loaded member, in this case
$colors
, of Bootstrap usingvendors.$colors
- And we configured _colors.scss using
with ( <variable>: <value>, <variable>: <value> )
pattern
That's it!!! Now you can use all the color classes for items defined in $colors
list. Let me know your thoughts and feedback in the comment section.
Credits
Let's get started image: Photo by David Iskander on Unsplash
Man sitting on mountain: Photo by Ian Stauffer on Unsplash
Top comments (0)