Brunch with Bootstrap 4 in my favored SCSS setup *)
*) for small to medium projects
First things first
This repository is an example for my Brunch.io setup with Bootstrap 4. I used the Modern JS skeleton as boilerplate to start. I‘m using a specific setup and structure for my Bootstrap and SCSS in this repo. It's my currently favored setup for small to medium projects.
This repository serves as an example for my two articles I wrote:
Note: installation is based on OS X, for other systems please see the respective documentations.
- Install (if you don't have them):
yarn start— watches the project with continuous rebuild. This will also launch HTTP server with pushState.
yarn run build— builds minified project for production
Please note the options for the sass plugin in brunch-config.js
Without the option
precision: 8 the compiling doesn't work. You'll just get the warning "sass-brunch is taking too long to compile" over and over again.
├── app/ │ ├── assets/ │ ├── js/ │ ├── scss/ │ ├── bootstrap/ │ ├── _config.scss │ ├── _pre_defaults.scss │ ├── bootstrap_ext/ │ ├── _button.scss │ ├── _variables.scss │ ├── index.scss │ ├── index.js
Everything here gets copied exactly as it is to public. Put .html files here.
Bootstrap 4 comes with custom jQuery plugins which comes in handy. They're impoted in index.js.
There shouldn't be any 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
Bootstrap can be used very modular. I don’t import the complete Bootstrap CSS. Instead I use import in the
_config.scssto only get the components I want to use.
!default on each variable, which makes customizing very easy. It's the oposite of the notorious
!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. So if I want to change a Bootstrap variable, I do so in the
You can find an example in this repo!
Directory 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.
You can find an example this repo: the file
index.scss All scss components come together here via import. I don't declare any styles here!
From here it’s up to you how to create your structure :)