

Bootstrap 3 Grid Introduction - shaunxcode
http://www.helloerik.com/bootstrap-3-grid-introduction

======
ollysb
This just feels wrong, it's the unsemantic approach of bootstrap 2 but going
even further in the wrong direction. Semantic classes with media queries
easily allow for any variations in layout. Multiple grid classes on a single
element just smells bad. I much prefer the approach that frameless[1] takes.
Use column widths as a unit of measurement (e.g. .sidebar{ @import width(6) }
// 6 columns wide ) and then modifying the size of the grid container to get
the various layouts. Specifying the width of elements in the CSS (ok, I admit
we're talking SCSS/less but who isn't using one of those?) seems far closer to
the spirit of CSS.

[1] [http://framelessgrid.com/](http://framelessgrid.com/)

~~~
taifun
You can use the approach outlined further down in the article in the section
"Mixin" where it's explained how you can use the included Bootstrap mixins to
create semantic classes.

~~~
ollysb
Thanks, I'll have to have a play and see how the two approaches compare then.

~~~
eflowers
I would like to hear it. Post in my comments thread on the page and tell me
what you think and find out, I could add a revision and expand on the mixin
and semantic naming part to help address some of the pros/cons.

(im the author if that wasn't clear)

------
johnpolacek
People might flip out at first about putting all those classes in there, but
it works great for tricky layouts. Extra Strength Responsive Grids uses
basically the same approach. [http://dfcb.github.io/extra-strength-responsive-
grids/](http://dfcb.github.io/extra-strength-responsive-grids/)

Once you get used to it, the grid classes makes it easy to look at the markup,
see whats going on and move things around any way you choose.

