Hacker News new | ask | show | jobs
by tptacek 5259 days ago
Have been using and loving Bootstrap for the past few weeks. Can't recommend it highly enough. I thought Themeforest templates were a great secret weapon, but the thoughtfulness that went into the actual markup in Bootstrap makes working with it fast and painless.

That said: no idea what's in Bootstrap 2. Someone got a concise summary?

4 comments

The docs offer more details: http://markdotto.com/bs2/docs/index.html

Here's my quick (and probably incomplete) list:

- new 12 column grid

- responsive layout

- tons of new JS plugins

- stacked forms are now the default

- lots of new 'controls', like split buttons, new tabs, toolbars, highly styled radio buttons and check boxes.

- icons(!)

I wonder if this puts it 'ahead' of Zurb Foundation?

I have this sneaking suspicion that even if Zurb does a 'good' job, unless it's way better, they're never going to get the publicity these guys do, and thus won't have quite the same feedback loop.

The Zurb guys talked about Foundation vs. Bootstrap on The Changelog podcast: http://thechangelog.com/post/13873612141/episode-0-7-0-found...
Anyone listen to it and have a summary?
Good question, I don't know the answer. Honestly, I've looked at Zurb Foundation a couple times, didn't see anything that looked like an order of magnitude of 'betterness' over Bootstrap, and decided to keep using Bootstrap because of that feedback loop.
The one important thing Bootstrap was missing was the responsive layout.
Let's see:

Button groups. Toolbars. Icons sprites. Progress bars. Checkboxes and radios as buttons. More appropriate terminology (Tooltips instead of Twispies). Some retouches on styling and class naming. An overall increase of functionality for most of the existing stuff.

It's definitely a worthwhile upgrade, and it seems to be all added functionality, not a lot of semantic changes.

The big one, for me at least, is the move from a 16-column grid to a 12-column grid. I didn't look into the technical differences, just those that would impact development with it.

I just converted a ton of stuff (like last week), so it's pretty fresh in my mind. I feel like I should have checked the wip branch first, but this has really become my favorite kit. I've been about 95% YUI and the remainder OOCSS, and Bootstrap is the fastest concept-to-reality I've used.

I'm not too worried about upgrading if there are some compelling reasons to do so.

I found the dox from Aaron's comment (thanks, everyone!). Bootstrap 2 looks amazing.

What's the win going from 16 to 12 columns?

>What's the win going from 16 to 12 columns?

Was wondering that too. First thing that comes to mind is that 12 columnn is more flexible for responsive layouts, which is another big addition in v2.

For example, since 12 is divisible by 3, it's easier to create a responsive site with 3 vertical sections that collapse into a single vertical section on mobile devices. (Like the Less Framework's mobile layout: http://lessframework.com/. Not the best example, I know I've seen a better one, but can't find it atm, but that gives the general idea.).

Don't know for sure if that's the reason, though.

A 12-column grid lets you easily mix 3-colum and 4-column layouts. A 16-column grid does not.

[edit] Essentially it's more expressive. Another commenter correctly mentioned that it could have the same advantages above for a responsive design. 12-columns allow for greater freedom of expression at all display sizes.

You get better divider flexibility with the columns.

You basically can divide it in half (6 columns each), in thirds (four columns each) in fourth (three columns each), in 6th (two columns each and in all 12 plus of course spanning the entirety.

16 gives you only 1, half,

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?
You use grids to group and align your content.

Basically you need look at your design in order to determine what would make most sense.

A very popular choice is to divide it into three equal sizes and then have one of them be the right or left column, while the two others combine to form the other column.

So you end up with two columns one for content and one for navigation (typical blog look)

Grids can obviously also be much more complicated as those used in photoshop, 3dmax, word or windows/osx.

If you want to get really into grids I can recommend probably the best book written about them.

Josef Muller Brockman Grid Systems

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.
Your whole web app becomes a giant nesting table, using divs, classes, and CSS instead of HTML table markup. The math on cell sizes is already done for you, and you're not stuck with wonky table markup and styling.
You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.
So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?
Wondering the same. Sorry, didn't mean to imply it's a win. For me, I'm going to have to adjust a ton of layout. It's probably not all that bad if you've got a decent template structure, though.

It's a headache, but as I was saying, it's so much quicker to work with than many of the others that I might just dedicate some time to do the work and get on board.

You can also change the number of columns using LESS.
You've always been able to easily modify the grid size just by changing the less stylesheet.
It's imperial vs. base 2. Always knew there was a reason a foot has 12 inches, and a circle has 360 degrees...
I don't really get why they would get rid of the 16-column instead of only adding the 12 and mix them with something like <div class="row12"></div>.

I have use for both.

Because then you'd end up writing stuff like span6-12 or span1-16. Confused why you'd need 16 also. Any even division you can do in a 16 col grid you can also do in 12.
Not quite a concise summary, but looking at the documentation, the biggest changes I noticed were :

- Responsive design using media queries

- CSS Progress bars

- A few new javascript plugins (Carousel, Typehead)

- Icons

The documentation is online here in case you missed the link the article : http://markdotto.com/bs2/docs/index.html

Maybe someone has a better summary

Typehead is really responsive too. Especially for how fuzzy its matching is.