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?
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.
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.
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.
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.).
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.
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.
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.
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).
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?
You don't have to edit the CSS at all. You don't even have to open the file, ever, to use Bootstrap. Just link it in the head of your document like any stylesheet and use the class names from the documentation.
Want something on your page to be 3 columns wide? <div class="span3">...</div>
Want to make it 4 columns wide instead? <div class="span4">...</div>
You sirs, are both awesome. I think I need to do more research into all of this and find a good how-to guide because if I didn't know how to do the above, I probably shouldn't be doing it until I know more. I've been down that path before and it leads only to frustration when I realize I know no idea what I'm doing :)
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.
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.
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.
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.
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.
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.
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!
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.
Sass, too, supports Less’s mixin model. Sass can include any block as a mixin with the @extend directive (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...). Basically, if a block is going to be used in the HTML as well as elsewhere, you write it normally and then include it with @extend. If a block is only going to be included in other styles, you write it with @mixin and then include it with @include. I think Sass’s approach is better because it’s more flexible – if a style isn’t going to be referenced in the HTML, it doesn’t clutter up the CSS because it is hidden with @mixin. And if you like Less’s approach better you can just use @extend everywhere.
The main reason I prefer Sass is the indent-based and semicolon-less Sass syntax (as opposed to the SCSS syntax). I find that that syntax’s advantages greatly outweigh its few weaknesses.
Much appreciated - it's nice to hear and see others using it.
There's a few commits to catch up with on the 2.0-wip branch, hopefully I'll get some updates done and pushed today.
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.
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.
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?
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?
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.
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 ...
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.
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.
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.
That said: no idea what's in Bootstrap 2. Someone got a concise summary?