My favored SCSS setup with Bootstrap 4

This article is originally from Aug 25, 2017. I'm moving my content from medium to dev.to

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 an article of mine 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:

├── app/
│   ├── assets/
│   ├──  js/
│   ├──  scss/
│        └── bootstrap/
│            └── _config.scss
│            └── _pre_defaults.scss
│        ├──  bootstrap_ext/
│            └── _button.scss
│        ├──  _variables.scss
│   ├──  index.scss
│   ├──  index.js/
│   ├── file22.ext
│   ├──  file23.ext

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!

// READ MORE
// https://github.com/twbs/bootstrap
// https://get.getbootstrap.com

@import "pre_default";

// Core variables and mixins
// state in March 2018

// *** Core with grid
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";

// *** Standards
// @import "tables";
// @import "forms";
@import "buttons";

// *** Components
// @import "transitions";
// @import "dropdown";
// @import "button-group";
// @import "input-group";
// @import "custom-forms";
@import "nav";
@import "navbar";
// @import "card";
// @import "breadcrumb";
// @import "pagination";
// @import "badge";
// @import "jumbotron";
// @import "alert";
// @import "progress";
// @import "media";
// @import "list-group";
// @import "close";

// *** Components w/ JavaScript
// @import "modal";
// @import "tooltip";
// @import "popover";
// @import "carousel";

// *** Utility classes
@import "utilities/align";
@import "utilities/background";
@import "utilities/borders";
// @import "utilities/clearfix";
@import "utilities/display";
// @import "utilities/embed";
@import "utilities/flex";
// @import "utilities/float";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

// *** Print classes
@import "print";


// *** READ MORE
// https://github.com/twbs/bootstrap
// Based on Bootstrap v4.0.0

@import "pre_default";

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?

// Example for the use of pre_default

$enable-rounded: true;

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:

// Example for overwriting and extending bootstrap components

.btn {
  $button-border-width: 2px;

  border-width: $button-border-width;

  &.btn-dark {
    background-color: $black;
    border-color: $black;
    color: $white;

    &:hover {
      background-color: $white;
      color: $black;
    }
  }
}

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. As example, in a pet project I worked on, I used this structure:

├── css/
│   ├── bootstrap/
│   ├── bootstrap_ext/
│   ├── components/
│   ├── vendor/
│   ├── views/
│   ├── _variables.scss
│   ├── app.scss

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. :)