Skip to content

Instantly share code, notes, and snippets.

@explainer
Created October 21, 2017 17:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save explainer/4d3f122b5f7e93897c7e7ccf1dd5513d to your computer and use it in GitHub Desktop.
Save explainer/4d3f122b5f7e93897c7e7ccf1dd5513d to your computer and use it in GitHub Desktop.
Bootstrap migration from CDN to asset pipeline
I have used a CDN version of Bootstrap as my only stylesheet source for my first Hyperloop app.
I did that to get the page layout and navbar setup I wanted without having to dive deep into components head-first.
This choice gave me a complete nav-bar with assorted buttons and text, and a nice layout of two tables arranged side-by-side.
Just what I wanted.
My trade-off with this choice is the fact that the only way to change colors of my buttons,
for example, is to look through the Bootstrap button documentation and pick peculiar Bootstrap
class names that produced a color close to what I wanted.
I also got some unwanted little asterisk-like icons stuck on some of the buttons,
which I would rather not have.
Now, I am thinking about dropping the CDN versions of Bootstrap for internal versions,
loaded via Bootstrap-rails, and Sass, loaded via Sass-rails.
I am doing this in order to get much better control over CSS classes.
I want to create a set of styling classes that map consistently onto the naming conventions
used in my hyperloop components, and have the colors and properties that I want exactly.
I no longer wish to accept the Bootstrap CDN defaults.
Is there any big down-side to this decision?
I am thinking that the asset pipeline overhead might be substantial, and would increase my load times unfavorably.
The idea of having style class names that match consistently with my component names
is very appealing to me (ValveButton component is styled by a ValveButton scss class, for example),
and I want to be able to fine-tune my color options.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment