I started using Bootstrap and I am extremely frustrated! And I aslo use rails, so my philosophy is to organize web entities as much as possible.
I am going to talk about the Bootstrap grid.
Bootstrap enables us to use their classes to place our divs in the grid. In my site, I have sidebars and multiply nested grid objects. I use indentation a lot (haml – but I also indent plain-ol HTML) and the Bootstrap way. Here is an example:
<div class="row">
<div class="span5">
<div class="row">
<div class="span2">
<p>
hohohohohohoho
</p>
</div>
<div class="span3"> ....
Here, I have 4 classes just for positioning.
In other words my views are not clean any more… They are filled with bootstrap classes which are actually used only for styling. And if I decide to change the grid system, then I will have to change all my views! (nightmare). This takes us back to the inline styling era…
As this is a forum where we ask questions, that’s my question:
Can I have the benefits of bootstrap grid (or 960.gs grid) without uglifying my views?
In other words, can I somehow embed all this style into my css without significantly changing my html?
something like:
side-bar{
color:red;
span:span_5;
}
Use SASS[1] or LESS[2] (or stylus, or any other CSS-preprocessor)
[1] – http://sass-lang.com/
[2] – http://lesscss.org/
It will allow you this exactly. There are many tutorials online about how to stars with preprocessors, and this will help you immensely. You can read introduction to preprocessors (LESS in this case) here: http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
And additionally, in my opinion, total separation of css/html is a myth. You rarely do such thing as ‘change the grid system’, and you rarely redesign by changing just CSS, you always have to change the HTML as well.