

Twitter's Bootstrap 2 ready for testing and feedback - iamhenry
http://www.markdotto.com/2012/01/24/bootstrap-2-ready-for-testing-and-feedback/

======
tptacek
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?

~~~
ibejoeb
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.

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

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

~~~
ThomPete
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,

~~~
tstegart
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?

~~~
ThomPete
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...](http://www.amazon.com/Systems-Graphic-Systeme-Visuele-
Gestaltung/dp/3721201450)

~~~
tptacek
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.

~~~
tstegart
Can you recommend a different book that would be more useful to someone trying
to edit Twitter Bootstrap from a beginner's perspective?

~~~
tptacek
You don't need a book. You just need to build a hello-world application with
the Bootstrap CSS/JS code, using one of the layouts they provide as a starting
point. Then just use the page of Bootstrap demos as an a la carte menu as you
find yourself needing UI features.

The Grid Systems book that was recommended earlier is a better bet if you're a
typographer or graphic designer, and particularly if you're thinking about
designing novel grid systems. But you're not doing that. The Bootstrap grid is
trivial and does not require any background in design to use.

~~~
ThomPete
That doesn't mean one can't educate oneself on what it is though no?

I mean I am a designer but still taught myself programming and is generally
interested in technology.

Understanding design better will make you a better programmer IMHO.

~~~
tptacek
All I can offer here is my opinion. I have the book. I like it, because I geek
out a little on typography and graphic design (I am horrible at both). I
wouldn't put the book on my "buy immediately" list of practical design books
for developers.

_Elements of Typography_ (which also has some coverage of grids, along with
meter systems), yes. _Elements_ is a buy-immediately book (and a joy to read).

------
esmevane
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
`@primaryButtonColor`, a less variable is by default set to `@blue`:
<http://markdotto.com/bs2/docs/less.html#Conponents> .

You can always change and recompile.

~~~
esmevane
Sorry, I could have been more clear.

What I mean is, almost all of the colors are hard coded, unlike
primaryButtonColor. You can easily adjust that one, but the others are
trickier.

The newest version of variables.less in the 2.0 wip branch seems to have these
colors bubbled up to easier access, already, now that I look at it. But still,
the buttons aren't all exposed - just the primary button. That's what I was
suggesting.

------
sheraz
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!

~~~
dkhenry
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.

~~~
nivertech
Any twitter bootstrap tutorials you can recommend, beside just using inspect
element in Chrome console?

~~~
phillmv
Frankly, that's about it, really. It's really straightforward imho.

------
chefsurfing
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
Does anyone know why LESS was picked over SASS for Bootstrap?

~~~
latchkey
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.

~~~
jmoiron
<http://markdotto.com/bs2/docs/less.html>

Odd, it says that lessc can take --compress, but using the most recent version
of less in npm says that there's no such flag.

Maybe it's on the way, or the bootstrap authors know something we don't.

~~~
latchkey
Ah, that got me looking more closely. There is an option to use yui-compress
and it seems with the 1.2.1 version. I use the shortened -x argument.

<https://github.com/cloudhead/less.js/pull/504/files>

------
RexM
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
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
_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
Bootstrap is incredible. Incredible generosity! Thank you twitter!

------
masonhensley
Link to Bootstrap 2 repo:

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

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

~~~
neovive
I can definitely see the semantic advantage of the <nav> tag, especially for
robots and screen readers. Is there a way to programmatically treat the <nav>
tag like a <ul> wihtout using an extra tag?

------
JustinMowka
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
Zurb.

<http://foundation.zurb.com/>

------
Dachande663
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
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
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)

~~~
nsxwolf
Thanks for the tip! That looks a lot better now.

~~~
ashot
is this:

<http://paste.ly/pastes>

intentional?

~~~
nsxwolf
That route is just left in as a placeholder until there's a better way to view
and search the public pastes. One that's not currently jiving with the
template.

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

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

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

------
gizzlon
Seems to be growing pretty fast: lib/ went from 76KB to 172KB ?

Seems like a very big increase.. Should we be worried?

(edit: Looks great though ;)

~~~
duncans
It's modular - only use what you need.

~~~
gizzlon
that's true, for the JS modules..

------
johnx123-up
Supply download link (nowhere it's linked)

~~~
lubos
I ended up pulling the whole 2.0-wip branch from github

~~~
johnx123-up
Yes, just figured it out
<https://github.com/twitter/bootstrap/zipball/2.0-wip>

------
dhydrated
the new tabs doesn't work properly. Cant switch between tabs.

------
plf
Thank you!

------
overworkedasian
how i felt when i read that bootstrap2 is coming out very soon:
[http://i257.photobucket.com/albums/hh209/qxm_photos/Ghosts/r...](http://i257.photobucket.com/albums/hh209/qxm_photos/Ghosts/randymarshafterwebbrowsre2.jpg)

~~~
lubos
you are from reddit, right?

