My favored SCSS setup with Bootstrap 4
TL;DR — what you’ll learn here
- How I integrate Bootstrap 4 and structure my SCSS in small to medium projects.
You can find this setup as an example on github: https://github.com/programmiri/brunch-setup-bootstrap4
Edit August 2018: You can find this setup within a custom Gatsby starter in this repository of mine.
Please note that I used this repo also as an example for my last article about Setting up Brunch with Bootstrap 4, so that’s the only reason it’s based on Brunch.
First things first
I already worked with Bootstrap a few times in private projects (e.g. hundetrainer-barcamp.de) and I really, really like it! It’s comprehensible and easy to get started with, even for a beginner. It’s been love at the first site!
My requirements and how I use Bootstrap
I‘m using a specific setup and structure for my Bootstrap and SCSS in general. I want to:
- use only selected components of Bootstrap instead of having the whole Bootstrap CSS in production
- customize Bootstrap easily without touching the Bootstrap core files or overwriting styles over and over again
- getting a neat and clean CSS in the end :)
My folder and file structure
How my setup looks in the end and how I like to work with it:
There shouldn’t be SCSS files directly in this directory other than the
_variables.scss. I prefer to use the variables which are provided by Bootstrap. Only in cases there’s nothing to be used from the Bootstrap core, I declare a custom variable in
Directory in “scss”: Bootstrap
Bootstrap can be used very modular. I don’t import the complete Bootstrap CSS. Instead I use
import in the
_config.scss to only get the components I want to use. In the end my CSS files only contains what I really need and use. Neat and clean - that’s how I like it!
!default on each variable, which makes customizing very easy. It’s the opposite of the notorious
!important is like “Oh, there’s a rule for this? I don’t care, use this!”, a variable with
!default will only get defined by SASS if it isn’t already set.
Take the variable
$enable-rounded: true !default; as example: It’s set in Bootstrap and rounds all the corners. And if I don’t want rounded corners? Simple: I write
$enable-rounded: false; in the pre_default file. So when SASS is compiling the Bootstrap variables,
$enable-rounded is already set and won’t be touched. I didn’t have to overwrite anything! Neat, huh?
Directory in SCSS: bootstrap_ext
I customize and extend styles in Bootstrap in separate files, which are stored in a special folder. The file is named like the Bootstrap component I’m changing or extending.
Suppose I want to change the border width for all buttons and add a class for dark buttons: I create a file
_button.scss — that’s the name of the respective Bootstrap component — in the “bootstrap_ext” directory and adapt the style like this:
With this structure it’s easy to keep a clear overview where a style comes from and what Bootstrap component it extends or is based on.
From here it’s up to you how to create your structure. In a pet project I’m working on, I’m using this structure:
- All vendor files are stored here.
- “components” contains custom SCSS components for this project, like “_calendar.scss”.
- In “views” I place styles which are not reusable and specific for a single view. I prefer to work in components, so there shouldn’t be much in here.
That’s it! My basic SCSS setup with Bootstrap 4. :)
Things I learned
- I still love Bootstrap very much!
- I like my styles neat and clean
- I’m getting a hang on component based SCSS (and I just learned that’s a legit term)