[No smell] How to create CSS that doesn't smell like bootstrap using Bootstrap4

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

This may be a bit old news, but version 4 of Twitter Bootstrap (hereinafter referred to as Bootstrap) has been released (at the time of writing this article, version 4.1 has already been released).
I think it's often used to quickly create a good-looking site, especially for the management screen, but what you're most concerned about is what is commonly called the bootstrap odor.

Bootstrap has been compatible with precompilation using sass since version 4, so I would like to literally try deodorizing (modifying) it to see how far I can get rid of the Bootstrap odor.

 

Why would you do that?

Bootstrap may look somewhat similar, but I personally think it has a very good design, and I think that's why it's so popular.
On the other hand, I think the most common reason why people are not selected is because they are too similar.
I'm sure there's also talk about the structure of the finished HTML, but I think that's almost religious, so I won't go into it here.

In other words, if you can manage to create Bootstrap's distinctive layout and color scheme, you can use Bootstrap as a base and enjoy the benefits of useful components such as grid systems, forms, and responsive layouts, while also being flexible in terms of design. It will be.

 

Advance preparation

Prepare the Bootstrap source code and the sass compilation environment.

 

Download Bootstrap source

Bootstrap code is published on github.

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

Clone the repository by running the following command in a suitable directory.

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

 

The sauce preparation is now complete.

 

compilation environment

As mentioned above, Bootstrap4 compiles with sass, so a preprocessor like webpack or compass is required.
Anything that can compile a scss file to css is fine.

In my case, I copy and paste a gulp task using node-sass, which I have been using for a long time.
If you just want to compile it for now, run the following command in an environment where Node.js is running and a sass compilation environment will be created.

npm install node-sass -g

 

The above command allows you to use node-sass as a command, so all you have to do is modify it and compile it with the node-sass command.

# Compile command example node-sass test.scss test.css # Automatic compilation node-sass test-scss test.css -w

 

The node-sass command has a watch option, so it has the ability to automatically compile files whenever they are modified. I highly recommend it.

 

I'll try compiling it first.

If you try to compile Bootstrap in a git cloned state, you will get a plain version of Bootstrap (which can be obtained 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 be completed soon, but it was quite easy to do, so I'm not surprised.
Now comes the real deal.

 

Try modifying Bootstrap

Now let's modify Boostrap!
The scss file that is the entry point when compiling Bootstrap itself was a file called ./scss/bootstrap.scss.

When modifying, if you modify the scss file on the bootstrap side, when you git pull Bootstrap itself due to version upgrades, data may disappear or git pull may not be possible, which is troublesome.
In this case, you can easily update the version of bootstrap by creating a separate scss file for modification and importing bootstrap.scss into it.

Install an scss file that will be the entry point for modification as shown below.

@import "/path/to/bootstrap.scss"; // Add styles for modification below

 

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

In Bootstrap 4, color schemes and various numerical values ​​are defined as variables, so if you overwrite the variables and compile, you can modify it in many ways.
the variable definitions are all defined in one file

Speaking of Bootstrap's distinctive color, I think it's blue (#007bff), but just changing this can drastically change the impression.
There may be many parts that can be distinguished by this color.
This color is defined in a variable called $blue, and is also specified as the main color of the theme $primary, so sites using genuine Bootstrap are easily affected by this.

If you want to change the color scheme, you can enjoy changing the theme of your site by adjusting the following six variables first.

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

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

In addition, you can specify margins and padding, change the size of rounded corners, etc. globally, or adjust them for each component.

 

summary

How do you create CSS using Bootstrap4 that doesn't feel like Bootstrap?
It's easy to compile, and the settings are generally just a matter of adjusting the values, making your usual Bootstrap look completely different.

Appmill operated by our company also uses Bootstrap-based CSS to create layouts.
If you are curious about how it is made, please take a look.

 

Useful links

• official documentation
• Color scheme sample book | Color scheme pattern selected by key color - Color sample and HTML color code

 
That's it.