My favored SCSS setup with Bootstrap 4

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

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)

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Evolution of Android Architecture Patterns [ MV * (C, P, VM, I) | JetPack] — U Want To Learn

Announcing Flutter 2

Python Programming: A Beginner’s Guide

Demo Day Spring 2018 Event Recap

Codewars Challenge — A Walkthrough

What happens when you type holbertonschool.com in your browser and press Enter

10 Tips to clean up your development mac

Supercharge Your Stylesheets with CSS Variables

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
Mirjam Aulbach

Mirjam Aulbach

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

More from Medium

Implementing Link Previews with Cloudflare Pages & Functions

Introduction to KoaJS

Javascript Private Properties, setting and getting errors!

Play To Learn Story

My thoughts on Sublime vs. Visual Studio Code for Javascript/NodeJS projects