Excellent tutorial on the fundamentals of bootstrap 3. I wish I had read this earlier. Get bootstrap should also explain the basics in greater details so that new programmers can avoid making mistakes.
Why the Bootstrap 3 Grid Works (2013)
31–40 of 91 posts
Re: Why the Bootstrap 3 Grid Works (2013)
#32I came up with this (in relation to Bootstrap) in 2011: http://csswizardry.com/2011/08/building-better-grid-systems/ This then became the basis for CSS Wizardry Grids: http://csswizardry.com/2013/02/introducing-csswizardry-grids...
We're using CSS Wizardry Grids in a new project at Precision Nutrition. It's been pretty great so far, though the use of comments is quite something to wrap your head around with respect to grid items.
Re: Why the Bootstrap 3 Grid Works (2013)
#33What to do if you need columns' sizes to be e.g. 7.5 and 4.5 ?
If you're using LESS then it's extremely efficient at that:
.make-sm-column(7.5) and .make-sm-column(4.5).
Done.
Re: Why the Bootstrap 3 Grid Works (2013)
#34I can't help but feel bad for people who worry about this kind of thing.
Indeed. I mean I love grids, but only as a tool in architecture and design. Why some people see the need to transfer them programatically onto their CSS---when regular CSS with media queries will do just fine---is beyond me.
So flexibility, extendability, community contributions, and consistency are beyond you? Maybe keep that little tidbit a secret from your boss/clients.
Re: Why the Bootstrap 3 Grid Works (2013)
#35What if you wanted the gutter between columns to be the same width as the padding to the edge of the screen? E.g. in the "Columns" screenshot, gutter = 30px, but screen edge padding = 15px. How would I achieve the same value for both? (I'm not a Bootstrap user.)
[deleted]
Re: Why the Bootstrap 3 Grid Works (2013)
#36Nice and helpful diagrams, although IMHO explanation would be much clearer if he used the common CSS terminology, like floats instead of things like "positioned left/right". If I haven't already know how pull-* classes work internally I'm not sure if I'd able to follow through.
Except that positioned left/right is the correct way to say it in CSS-speak.
Re: Why the Bootstrap 3 Grid Works (2013)
#37What if you wanted the gutter between columns to be the same width as the padding to the edge of the screen? E.g. in the "Columns" screenshot, gutter = 30px, but screen edge padding = 15px. How would I achieve the same value for both? (I'm not a Bootstrap user.)
[deleted]
Re: Why the Bootstrap 3 Grid Works (2013)
#38This is a great post. It's worth noting though that they added .container-fluid back into Bootstrap 3 after this post was created. Here's a quick example of how that works: http://codepen.io/ncerminara/pen/omChv
Re: Why the Bootstrap 3 Grid Works (2013)
#39What is the preferred method for a row that needs to span the entire width of the container? As in, without the 15px margin on the column? Just set the margins to 0px?
I would add a negative margin to the content, or create another layer of container with negative margin after .container > .row > .column
Re: Why the Bootstrap 3 Grid Works (2013)
#40The biggest problem I've had with bootstrap is that it is so large. There is so much overhead. My company is working on a project and it would have taken a ton of work to port to bootstrap.
For lightweight grids that support dynamically sized containers, masonry was great. But there a ton of issues with keeping the content centered when the container changes size.
We dealt with this by using inline-blocked elements with tex-align: center, then appending invisible elements to maintain an apparent left-oriented grid: https://github.com/hangify/Central