7 ms·

The new Bootstrap 3 grid system

52 points by trumbitta2 13y ago

egypturnash 13y ago
Bootstrap 3: Because deep in your heart of hearts, you still miss using tables for layout.
- trumbitta2 13y ago
  This is true, in a way. Tables were great in that they were a solid grid system, and a responsive one ( if you didn't try too hard to make them break your layout ). But tables are for displaying tabular data, and they have some unwanted fat (th elements and the like) in regard to using them for a layout. Now we are at grid systems. So much better! But what we really want is native CSS support for complex layouts ( maybe in a couple of years... )
  - rraval 13y ago
    What you really want is CSS template layout: http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/
    - trumbitta2 13y ago
      Exactly. Now it's browser vendors turn :)
    - baby 13y ago
      What is that sorcery! Why are we not using this instead of grid systems?
  - baby 13y ago
    > Now we are at grid systems. So much better! I'm sure I'm not the only one who sees tables as a logical approach to layout, and sees css grids as weird hacks.
pzxc 13y ago
The thing I hate most about bootstrap 3 is changing the class names of the grid. "span3" and "offset1" were much better than "col-lg-3" and "col-offset-1". Seriously... there are several places in the docs (and I often do this myself) where a non-grid-related element uses a "span2" or whatever to float itself left and size itself equal to a 2-width column. Example: the input field for a search box. When input-medium/small/mini/large/xlarge doesn't cut it, or just because you want something to fit in a column. So now we're gonna have "col-lg-2" etc plastered throughout our html? I don't see that as an improvement. The elements that get used the most should have simple names... that's what made bootstrap great as it was a common-sense standard for lots of common html/css techniques. "hide" for display:none, "muted" for color:#999, etc.
- vec 13y ago
  I'm guessing that it's stealing the small and large grids from Zurb Foundation.
  - liquidise 13y ago
    My thoughts exactly. Foundation has always had a superior responsive grid layout, if for no other reason than it is embed-able within itself. To say nothing of their push and pull column classes.
- bjoe_lewis 13y ago
  +1. span12 and span6 makes much more sense as a class name, than a col-lg-3 or a col-sm-6. If they are stealing from the foundation, and if differentiating large and small grid was the cause for changing identifiers, then I'm against it. Other than that, I'm liking it already.
- mikegirouard 13y ago
  First thing I thought was that this was the reason why I abandoned YUI grids. That and the subdividing boxes thing. I've gotten great mileage with unsemantic[0], and purely by an accidental google, I stumbled across semantic[1]. The latter is particularly interesting to me, but our firm has been burned by CSS preprocessors in the past and making a case for LESS is going to require a sell. [0]: http://unsemantic.com/ http://unsemantic.com/ [1]: http://semantic.gs/ http://semantic.gs/
cletus 13y ago
My one desire for Bootstrap is to have more than 12 columns. That's too coarse-grained IMHO. Why not 24? I know you can do this yourself but in my experience it results in weird bugs. I also agree that span3 and offset2 are/were better names. Still, Bootstrap is awesome, even in spite of the ASI BS it's authors maintain.
- excid3 13y ago
  You can do that without much trouble, start by setting @gridColumns to 24 instead of 12.
- baby 13y ago
  The point of the 12 columns is it can be divided by 3, 2, 4 and 6. What would be the point of 24 columns grid? If you need to display 24 items in a row, then you shouldn't have to mess with the foundations. Use CSS or tables.
  - dm2 13y ago
    I've found the need for a "half" column several times. I like the idea of a 24 column grid.
    - baby 13y ago
      Good point!
MWil 13y ago
I'll tell you what I really like about this. If you have a setup where information in the right column is providing clarifying information about what is on the left (NOT vice versa)... Based on the responsive design of the grid, if you resize the window smaller, it puts the "context" directly underneath and you can offset based on color. That's at least based on a 2 column system. I haven't tested it on multiple sets yet but it works for what I need it for.
thesorrow 13y ago
The only grid system that get things right is susy (http://susy.oddbird.net http://susy.oddbird.net)
- rcsorensen 13y ago
  Could you clarify what Susy gets right that Bootstrap, Zurb, and 960 don't?
kaoD 13y ago
I always wondered: why use a grid system when it's essentially a table, which is already implemented in browsers and fits the purpose of grids perfectly? Is it just because it's not semantically correct? Neither is a grid system. Is it better for responsive designs?
- mgkimsal 13y ago
  Grids would generally be worse - no semantic info like 'thead' or 'axis' in grids/divs. That said, I'm a bootstrap span fan and don't like this extended naming from the article - reminds me of YUI grids from several years ago. But hey, "they're' not tables - tables are evil!", right? RANT: I worked with some people ... sheesh - almost a decade ago that proclaimed "tables are depreciated" (I'm pretty sure they meant 'deprecated') and spent days having a team of people convert tablular data from Excel spreadsheets in to bloated DIV-hell for IE5 and NS4 browsers. That's been my worst experience with table-haters, but it stuck with me.
  - andybak 13y ago
    Could you not just send them a link to the specs? (and a dictionary)
    - mgkimsal 13y ago
      I didn't last too long there, and thankfully I wasn't on that team directly. Yeah, pointing out things like 'facts' with 'evidence' doesn't make you a 'team player' very often. Yes, there's the issue that I'm the new guy, but really... there are some things that are objectively true. HTML tables have never been 'deprecated', have their place, and are perfectly fine. DIV-based layouts are fine too, but knowing when to each is key, and displaying hundreds of pages of spreadsheet-style data with inlined styles for each div is... just insane. They had to do inlined styles on each div because some version of IE didn't handle the formatting they wanted properly - some alignment issue - when I pointed out that table cells already supported that formatting... I think that's when I was no longer required to be involved in that project.
- 13y ago
colinsidoti 13y ago
He casually nested two "col-lg-6" within a "col-lg-9" Isn't that a bit of big change? In the past, I don't think we could get two equal size cols filling up a 9.
- colinsidoti 13y ago
  Ahhh...fluid vs not fluid: http://twitter.github.io/bootstrap/scaffolding.html http://twitter.github.io/bootstrap/scaffolding.html
- trumbitta2 13y ago
  Actually that's about the biggest change: Bootstrap 3 is Mobile First and the grid is fluid-only. Pros: you can nest the hell out of your layout without putting your brain on fire. Cons: didn't find one, so far.
conradfr 13y ago
Gutter-free grid ? Can be good as I always found gutters too wide in grid systems.
- pdog 13y ago
  They're already configurable variables in LESS: just change @gridGutterWidth etc.
krakensden 13y ago
Nice to see screenshots from X11, every once in a while.
baby 13y ago
I'm reading through this and I see bootstrap has became like Foundation a lot : * You have mandatory #container div * you can nest rows by default (previously you had to use fluid-row) * they got rid of "span" and use the more natural "col". * offsets * push & pulls Foundation still have more : "ending cols" for number of cols not reaching 12 and centered "cols". I'm liking it. I would have gone for Foundation 4 but I'm wondering if I should try this new Bootstrap for my next project.

52 points by trumbitta2 13y ago

egypturnash 13y ago

Bootstrap 3: Because deep in your heart of hearts, you still miss using tables for layout.

trumbitta2 13y ago
This is true, in a way. Tables were great in that they were a solid grid system, and a responsive one ( if you didn't try too hard to make them break your layout ). But tables are for displaying tabular data, and they have some unwanted fat (th elements and the like) in regard to using them for a layout. Now we are at grid systems. So much better! But what we really want is native CSS support for complex layouts ( maybe in a couple of years... )
- rraval 13y ago
  What you really want is CSS template layout: http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/
  - trumbitta2 13y ago
    Exactly. Now it's browser vendors turn :)
  - baby 13y ago
    What is that sorcery! Why are we not using this instead of grid systems?
- baby 13y ago
  > Now we are at grid systems. So much better! I'm sure I'm not the only one who sees tables as a logical approach to layout, and sees css grids as weird hacks.

pzxc 13y ago

The thing I hate most about bootstrap 3 is changing the class names of the grid. "span3" and "offset1" were much better than "col-lg-3" and "col-offset-1". Seriously... there are several places in the docs (and I often do this myself) where a non-grid-related element uses a "span2" or whatever to float itself left and size itself equal to a 2-width column. Example: the input field for a search box. When input-medium/small/mini/large/xlarge doesn't cut it, or just because you want something to fit in a column. So now we're gonna have "col-lg-2" etc plastered throughout our html? I don't see that as an improvement. The elements that get used the most should have simple names... that's what made bootstrap great as it was a common-sense standard for lots of common html/css techniques. "hide" for display:none, "muted" for color:#999, etc.

vec 13y ago
I'm guessing that it's stealing the small and large grids from Zurb Foundation.
- liquidise 13y ago
  My thoughts exactly. Foundation has always had a superior responsive grid layout, if for no other reason than it is embed-able within itself. To say nothing of their push and pull column classes.
bjoe_lewis 13y ago
+1. span12 and span6 makes much more sense as a class name, than a col-lg-3 or a col-sm-6. If they are stealing from the foundation, and if differentiating large and small grid was the cause for changing identifiers, then I'm against it. Other than that, I'm liking it already.
mikegirouard 13y ago
First thing I thought was that this was the reason why I abandoned YUI grids. That and the subdividing boxes thing. I've gotten great mileage with unsemantic[0], and purely by an accidental google, I stumbled across semantic[1]. The latter is particularly interesting to me, but our firm has been burned by CSS preprocessors in the past and making a case for LESS is going to require a sell. [0]: http://unsemantic.com/ http://unsemantic.com/ [1]: http://semantic.gs/ http://semantic.gs/

cletus 13y ago

My one desire for Bootstrap is to have more than 12 columns. That's too coarse-grained IMHO. Why not 24? I know you can do this yourself but in my experience it results in weird bugs. I also agree that span3 and offset2 are/were better names. Still, Bootstrap is awesome, even in spite of the ASI BS it's authors maintain.

excid3 13y ago
You can do that without much trouble, start by setting @gridColumns to 24 instead of 12.
baby 13y ago
The point of the 12 columns is it can be divided by 3, 2, 4 and 6. What would be the point of 24 columns grid? If you need to display 24 items in a row, then you shouldn't have to mess with the foundations. Use CSS or tables.
- dm2 13y ago
  I've found the need for a "half" column several times. I like the idea of a 24 column grid.
  - baby 13y ago
    Good point!

MWil 13y ago

I'll tell you what I really like about this. If you have a setup where information in the right column is providing clarifying information about what is on the left (NOT vice versa)... Based on the responsive design of the grid, if you resize the window smaller, it puts the "context" directly underneath and you can offset based on color. That's at least based on a 2 column system. I haven't tested it on multiple sets yet but it works for what I need it for.

thesorrow 13y ago

The only grid system that get things right is susy (http://susy.oddbird.net http://susy.oddbird.net)

rcsorensen 13y ago
Could you clarify what Susy gets right that Bootstrap, Zurb, and 960 don't?

kaoD 13y ago

I always wondered: why use a grid system when it's essentially a table, which is already implemented in browsers and fits the purpose of grids perfectly? Is it just because it's not semantically correct? Neither is a grid system. Is it better for responsive designs?

mgkimsal 13y ago
Grids would generally be worse - no semantic info like 'thead' or 'axis' in grids/divs. That said, I'm a bootstrap span fan and don't like this extended naming from the article - reminds me of YUI grids from several years ago. But hey, "they're' not tables - tables are evil!", right? RANT: I worked with some people ... sheesh - almost a decade ago that proclaimed "tables are depreciated" (I'm pretty sure they meant 'deprecated') and spent days having a team of people convert tablular data from Excel spreadsheets in to bloated DIV-hell for IE5 and NS4 browsers. That's been my worst experience with table-haters, but it stuck with me.
- andybak 13y ago
  Could you not just send them a link to the specs? (and a dictionary)
  - mgkimsal 13y ago
    I didn't last too long there, and thankfully I wasn't on that team directly. Yeah, pointing out things like 'facts' with 'evidence' doesn't make you a 'team player' very often. Yes, there's the issue that I'm the new guy, but really... there are some things that are objectively true. HTML tables have never been 'deprecated', have their place, and are perfectly fine. DIV-based layouts are fine too, but knowing when to each is key, and displaying hundreds of pages of spreadsheet-style data with inlined styles for each div is... just insane. They had to do inlined styles on each div because some version of IE didn't handle the formatting they wanted properly - some alignment issue - when I pointed out that table cells already supported that formatting... I think that's when I was no longer required to be involved in that project.
13y ago

colinsidoti 13y ago

He casually nested two "col-lg-6" within a "col-lg-9" Isn't that a bit of big change? In the past, I don't think we could get two equal size cols filling up a 9.

colinsidoti 13y ago
Ahhh...fluid vs not fluid: http://twitter.github.io/bootstrap/scaffolding.html http://twitter.github.io/bootstrap/scaffolding.html
trumbitta2 13y ago
Actually that's about the biggest change: Bootstrap 3 is Mobile First and the grid is fluid-only. Pros: you can nest the hell out of your layout without putting your brain on fire. Cons: didn't find one, so far.

conradfr 13y ago

Gutter-free grid ? Can be good as I always found gutters too wide in grid systems.

pdog 13y ago
They're already configurable variables in LESS: just change @gridGutterWidth etc.

krakensden 13y ago

Nice to see screenshots from X11, every once in a while.

baby 13y ago

I'm reading through this and I see bootstrap has became like Foundation a lot : * You have mandatory #container div * you can nest rows by default (previously you had to use fluid-row) * they got rid of "span" and use the more natural "col". * offsets * push & pulls Foundation still have more : "ending cols" for number of cols not reaching 12 and centered "cols". I'm liking it. I would have gone for Foundation 4 but I'm wondering if I should try this new Bootstrap for my next project.