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.
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.
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.
Can you elaborate on how the "full mixin" approach in Bootstrap 3 isn't as sufficient? From what I can tell, you can leave markup completely out of your HTML, and even go so far as to use pseudo classes to designate where you want the grid created. Honest question.
Unless you just want a grid and no other part of the Bootstrap styles. I think if you only include the Bootstrap grid in your compiled CSS, it's pretty lightweight. Not as much as this, but you don't need to include everything else.
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/
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.
8 comments
[ 2.7 ms ] story [ 33.6 ms ] thread[1] http://framelessgrid.com/
(im the author if that wasn't clear)
Unless you just want a grid and no other part of the Bootstrap styles. I think if you only include the Bootstrap grid in your compiled CSS, it's pretty lightweight. Not as much as this, but you don't need to include everything else.
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.