Best practices to import Bootstrap theme

Design
1

Hello there

This is my first project with Ember.js and I’m following this tutorial as starting point to my project. I was asking myself what are the best practices to import a bootstrap theme.

I am currently using Bootstrap-Sass “3.3.6” and a bootstrap theme I installed it through bower. If I get it right I must import this file in my ember-cli-build.js file with app.import command like this:

app.import('bower_components/theme-name/build/css/custom.min.css')

And then I have the css inside my vendor.js, as expected.

So my question is: is this the best practice or I should add the file to my style.scss through an @import statement?

What is the recommended way?

1 Like
2

If you use sass, and you would like to use Bootstrap variables to customize your settings, just save _variable.scss in your style folder, import it before bootstrap and change the variables in this custom _variables.scss.

You can see here an example: tutorial-builder/app/styles at master · zoltan-nz/tutorial-builder · GitHub

I think, this is quite easy and convenient way to manage Bootstrap, additionally Ember CLI can compile and minify your css quickly. :slight_smile:

1 Like
3

Depending on the customization I have a few approaches.

The first minimal theming would involve the above variable override, creating a local variable file declaring your custom variable values and importing that file before the Bootstrap modules.

The next step would be to create override files named for the Bootstrap modules “_[bs-module]-over.scss”. Here you would import the Bootstrap modules in you “app.scss”, then import your new override files. These css rules would be further down the cascade and overwrite the Bootstrap class ruleset.

The final and largest theming example is for fully adopting the Bootstrap library as your own. I would create a sub-directory in my local “styles” directory called “bootstrap-custom”. In this directory, I would have a copy of the “bootstrap.scss” file from “bower_components/bootstrap” (or node_modules). This custom Bootstrap file has all the bootstrap module import statements. From here you can import from the bower/npm packages as the stock modules or create local copies of the modules or mixins and import accordingly. If you are going this route, definitely create a local copy of “_variables.scss”. This allows you keep control all the modules being added to your site, create the correct style without override styles, and to learn about Bootstrap and their cascade structure.