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

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!

https://twitter.com/mirjam_diala/status/591253430464811008

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

  • 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)
Show your support

Clapping shows how much you appreciated Mirjam B.’s story.