Bootstrap 3 Grid Introduction | Hacker News Reader

Bootstrap 3 Grid Introduction

helloerik.com

42 pointsshaunxcode8 comments

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/

Is it possible to combine Framelessgrid with Bootstrap3? Skipping the grid system of bootstrap and using this or would that be a world of pain?

I can't see any reason there would be a collision between the two, framelessgrid is very lightweight.

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.

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

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)

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.

Reply on news.ycombinator.com