Selective Bootstrap importing

[julitrows]

This would be a two-prong feature (js and css), to allow for a more lightweight bootstrap usage in the app, depending on what we need.

So, if user chooses to install bootstrap...

1. Create _bootstrap-custom.scss inside project css folder with content from this file
2. On that file, comment out everything from line 25 to 52 (all that is not CORE or Responsive utilities).
3. In application.scss @import 'bootstrap-custom'; instead of just 'bootstrap' right below the 'bootstrap-sprockets' import.
4. In application.js instead of //= require bootstrap or //= require bootstrap-sprockets, add one line // require bootstrap/x for each one of the files in this folder. Note that those lines lack the = after // so they're comments. Add the = for those files that correspond to files in the bootstrap-custom.css file created above that are not commented.

So when the dev needs to use something new from bootstrap, just needs to uncomment the corresponding line(s) on CSS and/or JS if needed.

[nicalpi]

It sounds like a good idea, but this is going further from the original get something up and running quick.

Maybe we could, instead, leave a comment / alert stating

"Hey, we've imported the whole bootstrap. Please review xxx.js and xxx.scss and ensure you are only loading what you need"

?

[julitrows]

Yes, having it import everything (but using the custom css file and the import lines in js) and leaving the note would be nice enough, so devs can remove what they don't use when they want.

The main point of the feature is having the whole list of importable/imported things at hand from the start.

[nicalpi]

Ha ok, I didn't get that. Good idea then!