2

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;
}
Adrian Heine
  • 4,051
  • 2
  • 30
  • 43
iceiceice
  • 119
  • 3
  • 11
  • 1
    personally i dont find bootstrap grids to be that ugly. I agree with you that 960 gives you much better control over what you need in styling, but afaik it used the same method as bootstrap. What you neglect to see is that those frameworks are made for cross-device (!!!) usage. – toxicate20 Nov 14 '12 at 16:46
  • yes, but css/html separation does not exist anymore. What if I need to change the grid system for example... – iceiceice Nov 14 '12 at 16:51
  • When you need to change the gridsystem then there is no point for you to use such a system in the first place. If you need to resize the grids for your needs you can do that, but afterwards you need to stick to them or if you really want create custom grids for your pages by adding new pixel values to it. – toxicate20 Nov 14 '12 at 16:54
  • That makes sense, but, in any case, I would really like to see if there is a way to put the grid information inside the css files. I updated my post to show this. – iceiceice Nov 14 '12 at 16:56

1 Answers1

1

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.

Adam Kiss
  • 11,811
  • 9
  • 48
  • 81
  • Thanks Adam. I knew about the preprocessors, the problem is that bootstrap is made in LESS and not SASS. There are some SASS implementations, but they are not officially distributed by the Bootstrap. I guess you are right about html/css separation at this point. – iceiceice Nov 14 '12 at 18:41
  • @iceiceice FYI – you can have Zurb Foundation, which is *very* close to Bootstrap in terms of size/elements, but it's built on sass – http://foundation.zurb.com/ – Adam Kiss Nov 14 '12 at 22:47
  • thanks, I hadn't realized it was in sass, I'll check it out ! – iceiceice Nov 15 '12 at 01:23
  • FYI: There is a solid Sassy version of Bootstrap under active development and with feature parity: https://github.com/thomas-mcdonald/bootstrap-sass – Undistraction Jun 03 '13 at 07:52