[Smell-free] How to create CSS that doesn't smell like Bootstrap using Bootstrap 4

Hello,
I'm Mandai, the Wild Team member of the development team.

This may be a bit old news, but version 4 of Twitter Bootstrap (hereafter referred to as Bootstrap) has been released (4.1 is already out at the time of writing this article). It's
often used to quickly create good-looking websites, especially admin panels, but there's something about it that bothers me: the Bootstrap smell.

Bootstrap version 4 supports precompilation using Sass, so I would like to literally deodorize (modify) it to see how much of the Bootstrap smell I can remove

 

Why would you do that?

Although Bootstrap tends to look similar, I personally think that its design is quite excellent, and I believe that the reason it is so widely used is because it is highly rated.
Conversely, I think that the main reason it is not selected is because it ends up looking similar.
There may be some discussion about the structure of the finished HTML, but I think that is almost religious, so I won't go into that here.

In other words, if you can somehow master Bootstrap's distinctive layout and color scheme, you can use Bootstrap as a base and take advantage of convenient components such as the grid system, forms, and responsive layout, while still being able to be flexible in terms of design

 

Advance preparation

Prepare the complete Bootstrap source code and a Sass compilation environment

 

Download Bootstrap source

The Bootstrap code is available on github

twbs/bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

In a suitable directory, run the following command to clone the repository

git clone https://github.com/twbs/bootstrap.git

 

This completes the preparation of the sauce

 

Compilation environment

As mentioned above, Bootstrap 4 compiles with Sass, so you will need a preprocessor like webpack or compass.
Anything that can compile scss files to css will do.

In my case, I copy and paste a gulp task using node-sass, which I've been using for a long time.
If you just want to compile, you can create a sass compilation environment by running the following command in an environment where Node.js is running.

npm install node-sass -g

 

The above command will allow you to use node-sass as a command, so all you have to do is make the necessary modifications and then compile it with the node-sass command

# Example of compilation command node-sass test.scss test.css # Automatic compilation node-sass test-scss test.css -w

 

The node-sass command has a watch option, which means it will automatically compile whenever a file is modified. I highly recommend it

 

First try compiling

If you compile Bootstrap after git cloning it, you will get the bare version of Bootstrap (which you can get by downloading it from a CDN, etc.)

# Immediately after git clone node-sass ./bootstrap/scss/bootstrap.scss /path/to/bootstrap.css

 

The compilation should finish quickly, but it's actually pretty easy, so it's a bit anticlimactic.
Now the real work begins.

 

Modifying Bootstrap

Now let's modify Bootstrap!
The scss file that serves as the entry point when compiling Bootstrap itself is the file ./scss/bootstrap.scss.

When modifying, if you make changes to the scss file on the bootstrap side, when you perform a git pull of Bootstrap itself for a version upgrade, the data will be lost, or you will be unable to perform a git pull, which can be troublesome.
In such cases, if you create a separate scss file for the modification and import bootstrap.scss into it, you can easily upgrade the bootstrap side.

For modification, set up an entry point scss file like the one below

@import "/path/to/bootstrap.scss"; // Add the following modified styles

 

First, I would like to try changing the color scheme, which is the least difficult and most effective modification

In Bootstrap 4, color schemes and various numerical values ​​are defined by variables, so you can make many modifications by overwriting the variables and compiling.
The variable definitions are also consolidated into one file

When I think of Bootstrap's distinctive color, I think of blue (#007bff), but even just changing this can completely change the impression.
There may be many parts that distinguish it by this color.
This color is defined by the variable $blue, and is also specified as the main color of the theme $primary, so sites that use genuine Bootstrap are susceptible to this effect.

If you want to change the color scheme, start by adjusting the following six variables to see how your site's theme changes

• $primary
• $secondary
• $success
• $info
• $warning
• $danger

In addition, font-related settings are also found in _variables.scss, so you can adjust basic settings such as font specification and font size, as well as line-height and line spacing

You can also specify margins, padding, and corner rounding sizes globally or on a per-component basis

 

summary

How about creating CSS using Bootstrap 4 that doesn't have a Bootstrap feel?
Compiling is easy, and setting it up is simple, mostly just by adjusting values. With just this little step, your usual Bootstrap will look completely different.

Our company's web monitoring service, Appmill , also uses Bootstrap-based CSS for its layout.
If you're interested in how it's done, please take a look.

 

Useful Links

• Official documentation
• Color Scheme Swatch Book | Color Scheme Patterns by Key Color - Color Swatches and HTML Color Codes

 
That's all