I’ve devised a way of loading JUST the needed CSS and/or JS files from Bootstrap, for each individual and discrete component, thanks to StealJS being awesome.
In the past I’ve felt salty about including an entire CSS framework for an app that only uses bits and pieces of the framework for its UI/UX. You could build custom versions of Bootstrap, but keeping that up-to-date was tedious because you had to keep track of what parts you used or didn’t use in your project. A custom build is cumbersome, and yet another thing to maintain, defeating the purpose of using a third party library.
The ideal solution is obviously to let your components specify the exact parts of Bootstrap’s JS and/or CSS they depend upon, and then just include those parts for that specific component, and that’s what I’ve done in the guide below. One other goal was to be able to edit the compile-time variables provided by Bootstrap to allow specifying custom colors or grid dimensions, which is also accomplished!
Thanks to StealJS, using Bootstrap suddenly becomes much more declarative, and you’re no longer sending down the pipeline cruft or unused bulk that your app doesn’t want or need!