Twitter's Bootstrap 2 ready for testing and feedback

[+] tptacek|14 years ago|reply

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?

[+] aaronbrethorst|14 years ago|reply

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(!)

[+] esmevane|14 years ago|reply

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.

[+] ibejoeb|14 years ago|reply

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.

[+] hmigneron|14 years ago|reply

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

[+] esmevane|14 years ago|reply

Fantastic, guys. Great job.

Question: I notice that the button styles are still static (as are a lot of the color styles). Are there any plans to implement project-wide color changing based on the primary color variable?

I ask because I've hacked this out manually in a project at my day job, and another in my own free time. [Edit]: + I'd be more than happy to contribute this.

(Probably should crosspost this to Github.)

[+] scorpion032|14 years ago|reply

`@primaryButtonColor`, a less variable is by default set to `@blue`: http://markdotto.com/bs2/docs/less.html#Conponents .

You can always change and recompile.

[+] sheraz|14 years ago|reply

I've been using the new twitter bootstrap with backbonejs for some prototypes and have progressed much faster than I anticipated.

The learning curve on this one was not bad at all -- the examples are great!

[+] ibejoeb|14 years ago|reply

Yeah, it's a fantastic combo. I recently opted to do subsequent dev on Knockout.js, though. LOC for markup, styling, and javascript under this regime is fantastically small and really quick to develop.

Don't mean to hijack, but I'm curious if anyone has gone the other way, i.e., choose backbone over knockout. My main concern is DOM overload/GC issues. Backbone is also considerably smaller, but that's not as important in my context.

[+] dkhenry|14 years ago|reply

Bootstrap and backbone are great together. I wish there was more concrete tutorials on getting the two to play nice, but all I could find was bits and pieces about both. Even with that I have managed to knock out a few prototypes fairly easily.

[+] chefsurfing|14 years ago|reply

I've been using Twitter Bootstrap on a two projects for months. It has a huge upside, even for designers who write their own CSS. Version 2 seems to be filling in some gaps ( like responsive design and navigation lists/tabs ) and "filling out" with many nice-to-haves ( like progress bars ). I'm really looking forward to using version 2. Thank you Mark and Twitter team for the great work!

[+] mrchess|14 years ago|reply

Does anyone know why LESS was picked over SASS for Bootstrap?

[+] latchkey|14 years ago|reply

While Less and Sass are really similar products that do pretty much the same thing; I switched my site from initially using Sass (scss) to now using Less for three reasons:

a) Bootstrap uses less and I'm using bootstrap.

b) It was trivial to go from sass to less. Mostly just renaming files to have the right suffix.

c) I'm sure someone can argue differently, but I really think that the mixin syntax for Less is significantly better than Sass. I don't use mixins all the time, but this is really important if you want re-usable code. With Less, you don't have to declare @mixin and then @include it. Instead, any less block becomes a potential mixin.

That said, Sass has a compressor/minimizer and Less doesn't really have one. I had to integrate clean-css into my builds. It would be nice if Less had this by default.

[+] joshfinnie|14 years ago|reply

I don't know why, but if you are looking for SASS there is a fork:

https://github.com/jlong/sass-twitter-bootstrap

[+] RexM|14 years ago|reply

As a developer who just doesn't seem to "get" CSS, I love bootstrap. I can understand how it all works and it's so simple to use and quick to get things up and looking nice.

Thanks so much to the twitter team.

[+] medius|14 years ago|reply

Markup and CSS are the ones that generally slow me down the most. I really like where Bootstrap is going. It's a great boon for developers in my opinion, not to mention quick prototyping of designs for everyone.

[+] tnorthcutt|14 years ago|reply

When you find a bug or have feedback, open a new issue on GitHub. Tag it as 2.0-wip right away so we know to prioritize it.

It seems non-admins cannot tag/label an issue, FYI.

[+] mrgreenfur|14 years ago|reply

Bootstrap is incredible. Incredible generosity! Thank you twitter!

[+] masonhensley|14 years ago|reply

Link to Bootstrap 2 repo:

https://github.com/twitter/bootstrap/tree/2.0-wip

[+] neovive|14 years ago|reply

Great job and many thanks for this excellent framework!

I've been waiting for this release for an upcoming project. I assume the use of HTML5 specific tags is optional. I noticed that the page used for the docs uses "<ul class="nav">" instead of "<nav>", but does utilize the "<footer>" tag. Is there a specific advantage to not using the "<nav> tag?

[+] yeswecan|14 years ago|reply

If you are using <ul> and <li> elements for your links it's one fewer tag in your HTML:

    <ul class="nav">
        <li></li>
    </ul>

vs

    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>

The only 'danger' is that if someone is specifically looking at your page specifically for <nav> tags to locate your navigation they won't find it.

[+] JustinMowka|14 years ago|reply

I have used Zorb's Foundation for all of my projects, just because of the responsive layout.

Should I bother "porting" them to Bootstrap or is there no real advantage?

I still am reluctant to move to Bootstrap, but due to its popularity I think it will get more updates and will attract more people willing to improve it ...

[+] envex|14 years ago|reply

Zurb.

http://foundation.zurb.com/

[+] Dachande663|14 years ago|reply

Does anyone know if there are more detailed upgrade docs available? The ones provided in the repo (http://markdotto.com/bs2/docs/upgrading.html) mainly cover features and I don't fancy finding all the various classes that have changed since 1.4.

[+] nsxwolf|14 years ago|reply

I recently used Bootstrap to skin the initial version of my paste bin project, and it produced a very nice result with no effort, especially for someone who is not a front-end guy.

http://paste.ly/

Looking forward to digging into Bootstrap 2.

[+] zmillman|14 years ago|reply

You should give your submit inputs the 'btn' class for better styling. The default style for submits makes them look disabled.

(you can also add the 'primary' class to provide a splash of color and highlight the recommended action)

[+] maukdaddy|14 years ago|reply

Make sure to randomize the paste codes. Otherwise it's too easy to just increment and see what everyone else has done:

http://paste.ly/pastes/25

[+] joshmanders|14 years ago|reply

I am really liking how this bootstrap is going. I may give it a try in a project or 2.

[+] cpolk|14 years ago|reply

I'm really liking some of the new js additions and looking forward to trying it out.

[+] jeffclark|14 years ago|reply

Awesome. Can't upvote this more.

Used Bootstrap while building my new (launched today!) project. It sped up overall development more than I could have imagined.

Really excited for the responsive upgrades.

[+] ricksta|14 years ago|reply

I used Bootstrap 2 for my weekend Hackathon project. The best feature I find is the media query. Also dividing the grid from 16 to 12 makes dividing the page up into 3 columns possible.

85 comments