I am working on a Rails project that is just starting. We want to use twitter bootstrap as a base for our styles, at the beginning we would simply use bootstrap's class names directly on the HTML code, just like is shown in bootstrap's documentation, but after reading the following posts:
Lessons learned in maintainable css
Please stop embedding Bootstrap classes in your HTML
it became clear why that's not the proper why to use bootstrap, so after some more readings:
Decouple Your CSS From HTML
smacss
among other, it seemed that using sass @extend was the proper way to avoid using bootstrap's class names, so instead of doing this:
<button type="submit" class="btn">Search</button>
we would do this:
<button type="submit" class="button">Search</button>
and our sass code would look like this:
.button {
@extend ".btn";
}
The problem with that approach, besides the bunch of extra selectors that will be added each time we extend a bootstrap class just to use a different name, is that in cases where bootstrap uses selectors like this:
.form-search .input-append .btn, .form-search .form-input-append .btn {
border-radius: 0 14px 14px 0;
}
the button won't get the right style because sass will not apply that same rule to our custom class name, I mean, sass is not doing this:
.form-search .input-append .btn, .form-search .input-append .button,
.form-search .form-input-append .btn, .form-search .form-input-append .button {
border-radius: 0 14px 14px 0;
}
So I wonder, is this the right way to avoid embedding bootstrap's class names into HTML, if so, how should I handle this problem (it happens frequently)? if not, what would be a better way to use custom class names but still get the styles from bootstrap.
I really appreciate your thoughts on this. Please keep in mind that I am just learning about overall web design (css, sass, less, html, js, etc.).
Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.
"Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "Variables", "Mixins" and "Nested rules" are the primary reasons why Sass is favored.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Bootstrap 5 now comes with a new look and feel and better customization. It has greater flexibility and allows you to customize your themes, and thus not all websites where you work with Bootstrap look the same. The v4 page was extended with content and code snippets, these to build on top of the Sass files.
When you rename .btn to .button, you also should rename .form-search to .form-searchnew etc? In that case your sass code in the example above should be something like:
.form-searchnew .input-appendnew .button {
extend(.form-search .input-append .btn);
}
Which make sense (i don't know sass) and results in the css you expect.
I think bootstrap is not about css only. Bootstrap is about css, html(structure) and javascript. Even when you separate css from html i would not easy to migrate to an other framework. Beside the css you will have to change the html structure and javascript call too.
Example migrate from Twitter's Bootstrap 2 to 3 (see: Updating Bootstrap to version 3 - what do I have to do?). I also wondered if you could migrate by extending the old classes to the new css (see: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/). After reading the migration guide, i think you couldn't.
Other solutions. Angular JS decouples Twitter's Bootstrap from javascript. Also in this case migrations does not seem to be painless see: Angular Dialog directives with Bootstrap 3
Maybe also read this post: http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to. It refers to Bourdon and Neat.
Example from their website:
<!-- HTML markup for the section right below this code block -->
<section>
<aside>What is it about?</aside>
<article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>
// Enter Neat
section {
@include outer-container;
aside { @include span-columns(3); }
article { @include span-columns(9); }
}
// And the result is...
As they say: "it relies entirely on Sass mixins and does not pollute your HTML" which seems the way you're looking for.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With