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

Image for post
Image for post
https://twitter.com/mirjam_diala/status/591253430464811008

My requirements and how I use Bootstrap

  • 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

Image for post
Image for post

Directory “scss”

Directory in “scss”: Bootstrap

Image for post
Image for post

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?

Image for post
Image for post

Directory in SCSS: bootstrap_ext

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:

Image for post
Image for post

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:

Image for post
Image for post

Directory “vendor”

Directory “components”

Directory “views”

Tada.

Things I learned

  • 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)

Written by

Frontend Developer with a special love for JavaScript and Unit Testing. Passionated about communities.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store