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

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

This might be slightly old news, but Twitter Bootstrap (hereinafter referred to as Bootstrap) version 4 has been released (although version 4.1 is already out at the time of writing). It
's often used, especially when creating a quick and visually appealing website, such as an administration panel, but what's really bothersome is that so-called "Bootstrap smell," isn't it?

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?

While Bootstrap may make many designs look similar, I personally think its design capabilities are quite excellent, and I believe its widespread use is a result of that appreciation.
Conversely, the main reason it's often overlooked is probably because it looks too similar to other options.
There's also the matter of the structure of the resulting HTML, but I consider that almost a matter of personal preference, so I won't touch on 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 earlier, Bootstrap 4 compiles with Sass, so a preprocessor like webpack or compass is required.
Any tool that can compile SCSS files into CSS will work.

In my case, I'm using a gulp task that uses node-sass, which I've been using for a long time.
If you just want to compile, you can run the following command in a Node.js environment to create a Sass compilation environment.

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

 

I think the compilation will finish soon, but it was surprisingly 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 Bootstrap, if you change the SCSS file on the Bootstrap side, you might encounter problems such as data being lost or being unable to perform a `git pull` when Bootstrap is updated.
In such cases, creating a separate SCSS file for modifications and importing bootstrap.scss into it makes updating Bootstrap much easier.

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 using variables, so you can make quite a lot of modifications by overriding the variables and recompiling.
the variable definitionsa single fileare all consolidated into

One of the most distinctive colors in Bootstrap is blue (#007bff), and simply changing this color can drastically alter the overall impression.
Many people probably distinguish their sites by this color.
This color is defined by the variable $blue and is also specified as the main theme color $primary, meaning that sites using the original Bootstrap are particularly susceptible to this change.

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 that typical Bootstrap feel?
Compiling is easy, and setting it up is mostly just adjusting values, and with just this much work, your usual Bootstrap will look like something completely different.

Our web monitoring service, "Appmill," also uses Bootstrap-based CSS for its layout.
If you're curious about 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