Live data from Hacker News

Why the Bootstrap 3 Grid Works (2013)

helloerik.com

41–50 of 91 posts

Re: Why the Bootstrap 3 Grid Works (2013)

#41

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

Thanks for pointing that out. I will go back and add that in.

Re: Why the Bootstrap 3 Grid Works (2013)

#42
post #4

Nice 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.

Some of it is with the actual "left: 20px" or whatever, using the position rule.

Re: Why the Bootstrap 3 Grid Works (2013)

#43

I 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...

Sorry, but the need to put "" everywhere is a dealbreaker for me.

Example:

  
      ...
  
      ...
  
What's the rationale for using inline-block instead of float?

Re: Why the Bootstrap 3 Grid Works (2013)

#44
post #13

My 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?

It is super easy to overwrite breakpoints in the variables, or just make your own. Especially if you use Less to define your grids and not HTML, you can just reference whatever you want, like:

@media (min-widht: @eriks-custom-width); {}

That syntax is off but you get the gist.

Re: Why the Bootstrap 3 Grid Works (2013)

#45
post #12

Is 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.

The Bootstrap 3 grid comes with a lot of what I like to call 'premade classes' - like .col-md-1 or .col-xs-1 . These are used to control the grid alignment at different sizes. Some people like them, some hate them.

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.

[0] https://github.com/owenversteeg/min

Re: Why the Bootstrap 3 Grid Works (2013)

#46
post #18

What to do if you need columns' sizes to be e.g. 7.5 and 4.5 ?

The less mixin version of making the columns can be any value as it does some math to take it to a percent. So a 6 is a 50%, so if you want a 7.5, it will just change that to a % and then your 4.5 will fit right in. You can do this with almost every Less value bootstrap looks for. Really slick.

Re: Why the Bootstrap 3 Grid Works (2013)

#47

Bootstrap'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/

If you like Pure you might like my framework Min. It's way smaller than Pure and v2 (released in a couple of days from now) will have full compatibility with Bootstrap. https://github.com/owenversteeg/min

Re: Why the Bootstrap 3 Grid Works (2013)

#48
post #40

The 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…

Min is an extremely small CSS framework (995 bytes) that has compatibility with Bootstrap but unlike Bootstrap isn't prescriptive in how you do things. It's easy to port sites to Min, and when you do the loading times will shock you. https://github.com/owenversteeg/min (Disclosure: I'm the author)

Re: Why the Bootstrap 3 Grid Works (2013)

#49
post #40

The 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…

I've been really happy with PureCSS[0], and it seems to be gaining quite a bit of traction lately (over 8000 stars on GitHub). PureCSS is very small and modular. If I didn't like PureCSS so much, I would probably roll my own grids using Bourbon Neat or Susy.

0 - http://purecss.io/

Re: Why the Bootstrap 3 Grid Works (2013)

#50
post #40

The 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…

With Less, you can pare bootstrap down to just the bare minimum of what you need, all the way down to just using the grid an nothing else. When you compile your Less, it's super slim.

My focus wasn't on the bootstrap CSS customizer though, I try to recommend people use their own Less to keep things under control.

Post reply on HN