This 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
Why the Bootstrap 3 Grid Works (2013)
41–50 of 91 posts
Re: Why the Bootstrap 3 Grid Works (2013)
#42Nice 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.
Re: Why the Bootstrap 3 Grid Works (2013)
#43I 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...
Example:
...
...
What's the rationale for using inline-block instead of float?Re: Why the Bootstrap 3 Grid Works (2013)
#44My problem with the Bootstrap grid is the strange choice of breakpoints, especially on the smaller screensize end. It's way too complicated to alter the given breakpoints or add custom ones with Bootstrap. I'd rather use something like Susy for grids. Not so much more effort to set up, but much less limitations. Are you really all ok with Bootstrap's breakpoints?
@media (min-widht: @eriks-custom-width); {}
That syntax is off but you get the gist.
Re: Why the Bootstrap 3 Grid Works (2013)
#45Is the Bootstrap 3 grid better than the one from PureCSS? I'm building a thing where I use PureCSS only for the grid so I'm wondering if I should replace it with Bootstrap.
I personally dislike them because CSS classes should specify what an element is rather than what it will look like. e.x. if HN were to change from tables to CSS they would use .topbar { background: #ff6600; } instead of .orange { background: #ff6600; } That said, I made a CSS framework [0] that does things differently so I am somewhat biased.
Re: Why the Bootstrap 3 Grid Works (2013)
#46What to do if you need columns' sizes to be e.g. 7.5 and 4.5 ?
Re: Why the Bootstrap 3 Grid Works (2013)
#47Bootstrap's grid really is nice. I really prefer Bootstraps grid over something like Bourboun's Neat grid system[0] where I have to pollute my CSS with include statements. I've also been looking into http://purecss.io/ since it's grid is similar but the CSS package is lighter. [0] - http://neat.bourbon.io/
Re: Why the Bootstrap 3 Grid Works (2013)
#48The 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 w…
Re: Why the Bootstrap 3 Grid Works (2013)
#49The 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 w…
Re: Why the Bootstrap 3 Grid Works (2013)
#50The 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 w…
My focus wasn't on the bootstrap CSS customizer though, I try to recommend people use their own Less to keep things under control.