Modifying Bootstrap in Sage

To customize Bootstrap Sass to include as little as possible modularly, you can delete lines 19-36 and add the individual Sass CSS and jQuery JS partial files listed by mZoo.

For the JS, there’s no minimum and you can add and subtract any partial.

For the Scss, I believe the bare minimum needs to be the following:

"./assets/stylesheets/bootstrap/_variables.scss",
"./assets/stylesheets/bootstrap/_normalize.scss",
"./assets/stylesheets/bootstrap/_mixins.scss",

Normalize is an excellent addition to any new project. If you include any other Bootstrap partials, they are often if not usually referencing either _variables.scss or _mixins.scss. The rest of the Bootstrap partials should only be used as needed to keep file sizes lower.

Sometimes, when you reference one file it’ll include something from another file. I ran into this example when I included _navbar.scss and was forced to include _forms.scss because of a mixin that was located in the forms partial. I’m hoping this isn’t common.

Another suggestion made to me about modularizing the Bootstrap styles files was to completely take out line 19 from bower.json referencing the main _bootstrap.scss partial and duplicate this file into your assets/styles local directory. From there, you can reference it in main.scss. My main problem with this method is that you have to either modify every line in _bootstrap.scss to point back to the bower_components partials or you should set loadPath option to back to bower_components/bootstrap-sass-official/assets/stylesheets, however I haven’t figured out where in gulpfile.js to do this! Anyone know?

I know that Gulp Ruby Sass has this option but it’s not the one loaded in Sage.

3 Likes