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:

Directory “scss”

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 _variables.scss

Directory in “scss”: Bootstrap

config.scss

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!

pre_default.scss

Bootstrap uses !default on each variable, which makes customizing very easy. It’s the opposite of the notorious !important : While !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:

Directory “vendor”

All vendor files are stored here.

Directory “components”

“components” contains custom SCSS components for this project, like “_calendar.scss”.

Directory “views”

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.

Tada.

That’s it! My basic SCSS setup with Bootstrap 4. :)

Things I learned