I am going to chime in being negative against the wave of positive feedback here.
Twitter has done well releasing this and when I first saw it ages ago it looked neat and fairly professional.
However, like a pop song which has been completely overplayed on the radio it has become tired and frankly a bit annoying. It has its uses offline to quickly get a demo up and running but it shouldn't be used on a live site. At least not in its entirety.
If you have to use this for your project due to convenience or lack of design skills then do everyone a favor and mix it up a little bit. Change the colors on the buttons. Avoid the black bar running along the top of your website. Just don't look 100% like a vanilla bootstrap site.
Yes, Bootstrap is great. Honestly, I love using it. But where are all the people that I used to see screeching about semantic markup? Because this takes things in exactly the opposite direction.
98% of bootstrap's documentation is about usage of the generated bootstrap CSS, which requires all kinds of presentational markup.
There's a solution for that: use the LESS source. Mixin the various bootstrap classes into the styles you write for your clean, semantic markup. It's a nicer way to work, and it permits removal of almost all the presentational "bootstrap" classes from your markup. With some thoughtfully-structured markup, you can even do away with wrapper divs in many instances.
This isn't without some sharp edges—you have to grasp what the various moving pieces of bootstrap do, and what different mixins you must apply to achieve the desired effect, but it's a cleaner/more powerful approach IMO.
To be clear, I'm glad about the CSS-only approach too because it enables non-designers to get over the suck threshold quickly. Using the LESS is more work at first but it pays dividends in the long run.
Although - the implementations used in Bootstrap could be translated to a more semantic approach by using SASS or LESS mixins instead of classes. This is the approach used by the Susy grid system included with Compass. I see Bootstrap as a open-sourced library of tested cross-browser solutions to a reasonable set of challenges in modern front-end coding. As such I'm hoping it is possible to port a lot of it to a "semantic markup" way of doing things.
Last week 2.0 introduced me to the world of responsive design. Converted our current project to it. Higher ups are pleased and it saved me from creating a second "mobile" site. I am a fan.
Even though the main use case for Bootstrap seems to be for rapid prototyping, any thoughts on using it for a production app (but perhaps custom-themed), instead of rolling a custom design altogether? It seems Bootstrap has matured to the level that it can be used as for most projects with little customizations if any. A lot of what I read in the comments imply that Bootstrap is great at prototyping an app and once that phase is over, you throw it all out and start developing a custom design based on what has been prototyped. Why can't one just stick with Bootstrap and customize it as needed?
Bootstrap and Zurb are actually quite different, in my opinion.
Both are based on solid resets and (now) great, nestable, responsive grids.
Bootstrap is great for when you're not a designer and you need to get something out there that looks passable. It includes a lot of fully styled elements and have very nice typography and forms out of the box. I found Bootstrap a lifesaver to get something up at http://www.eventsourcehq.com quickly.
Foundation is great to use as the foundation of a website when you have design skills or are working with a designer. Using the grids and the defaults gives you a lot less to think about when getting the rough outline of a website done, but you won't have to start overriding or deleting a bunch of included styles once you want to apply your own. We've used Foundation as the base for our example project template for http://www.webpop.com and plan on making more foundation based templates.
In short:
Bootstrap when you want something styled out of the box.
Foundation when you just want to quickly get the structure and layout going and then apply your own styles.
Zurb and Bootstrap look very similar in many ways. However, bootstrap seems to be growing at a really fast pace and appears to have more elements and javascript plugins than Zurb Foundation.
I think when picking a framework it's important to look at the direction it is taking. In this case Bootstrap is very actively being used in the development community and backed by some really great developers at Twitter.
I did a side-by-side of a simple design when trying to choose one. Bootstrap just has better defaults with things like padding, sizing, and margins. It just looked better.
Now that Bootstrap has responsive design, there's no contest.
Foundation uses <br />s with its form fields (eg. <input><br />, etc), which just makes it annoying to style if you want to style anything ever so slightly out of the box Zurb puts you in.
While Bootstrap probably lets you bootstrap (hoho) faster, I still would choose (very subjectively) choose foundation. For one, you would wanna distinguish yourself from all those bootstrap-themed MVPs out there.
Some other useful css frameworks include http://blueprintcss.org/ and http://compass-style.org/, if you are interested. That being said, I have used all three for different projects and have enjoyed working with bootstrap the most.
(from the linked site) I find the notion that a phrase as general as 'responsive web design' could be considered 'coined' in 2010, and could be considered to have such a narrow meaning (i.e. you can't be 'responsive' without a fluid grid). A search on the phrase from Jan 2000 until Jan 2009 returns more than 16 million results.
Love the new stuff - any reason why you removed the animation effects of button presses? I always thought that was one of the coolest pieces of bootstrap
Are you talking about the transitions? If so, they're still included. I think it's just grayed on the plug-ins list because it's required for all the other plug-ins. If you download the full repository (http://twitter.github.com/bootstrap/download.html), bootstrap-transition.js is included.
Has anyone compared this to the Skeleton responsive grid? I like that the styling on skeleton is more minimalist, but worry that I'm missing on some features from Bootstrap.
Seeing that the designer/developer of Skeleton (@dhg on twitter) is a designer at Twitter now, I'm sure there will be plenty of mash-ups between Bootstrap and Skeleton.
At least, it gives me something to hack on this weekend :D
Bootstrap is great for tools, apps where the functionality is more important than everything, which is great and I use it. But for regular client websites where design is crucial (and I'm sure it wasn't meant totally for this) is almost never usable in my case. Clients want very customized functionality and looks almost all the cases. So I end up using only a few things. But I'm sure this wasn't its original purpose.
I had similar concerns when I first started noticing bootstrap used on random websites I encountered. However, I think bootstrap will probably help increase the lower bound quality of sites while designers pushing the envelope will continue to do so, without or without bootstrap as a starting point.
I hope it WILL create a more homogenized web. Seriously, how many different kinds of push buttons do we need. The design creativity can better be applied elsewhere.
It kind of happened with Wordpress and Drupal default themes but the web is too big to go really that way and technology evolves very quickly, so today it's Twooter Bootstrap but tomorrow it will be NewFadCorp Boostrap.
I found two, but they are not worth mentioning. They just copy the graphic elements instead of using the CSS library.
For a WP framework that uses a good CSS library, see xtreme-one (it uses YAML). This match (general CSS lib + wordpress theme) is great, I agree.
I had bookmarked this thread and had decided to give bootstrap a try. My other option was jquery (including jquery UI). I am mainly a programmer and not a natural designer.
After about a day or so of trying out to move my existing UI (of a fairly successful app) to bootstrap, I found it a bit limiting in some ways. The commonest one being to try and change the color of the nav bar.
Also the 'brand' style in Nav bar should support logos too. Perhaps provide a css code for it.
Also in general there is just one way(albiet good) you can do for all things, which I also did not like.
In a comparative way, jquery UI themes, give me a better default option over there. And I can choose a theme from several themes.
Another thing is that many of the bootstrap's components example 'TypeAhead' are again jquery plugins, for which you get competing options in the Jquery UI.
I also think, that creators of bootstrap are hurrying up with version numbers. 2.0 is a very aggressive call. In the light of, just a few months back, we just heard of bootstrap on HN. Opensource versioning has to more trustworthy than corporate versioning (a recent good example is node.js they are .6xxx . Jquery itself is still 1.7.xxx)
The above are my brief thoughts after playing with it for a day or so. Hope it helps somebody.
I wonder why they have removed sortable tables. Not a hard thing to re-add if you need it, but why the hassle? I used them a lot as a designer as it is one of the most appreciated things for my clients from the desktop-application world who expect it as a given and disappointed when it's not available.
In the Google Group, Mark Otto mentioned that he didn't want to have it as a dependency (it was the only 3rd party plugin) and raised a concern with it having its own themes.
I'm very happy to see this new version. I have followed the 2.0-wip branch since the very beginning. At my company we use Bootstrap for a lot of different project as a barebone WordPress template with few additions in order to handle the semantic classes (and id) generated by WordPress.
[+] [-] VonLipwig|14 years ago|reply
Twitter has done well releasing this and when I first saw it ages ago it looked neat and fairly professional.
However, like a pop song which has been completely overplayed on the radio it has become tired and frankly a bit annoying. It has its uses offline to quickly get a demo up and running but it shouldn't be used on a live site. At least not in its entirety.
If you have to use this for your project due to convenience or lack of design skills then do everyone a favor and mix it up a little bit. Change the colors on the buttons. Avoid the black bar running along the top of your website. Just don't look 100% like a vanilla bootstrap site.
[+] [-] sopooneo|14 years ago|reply
[+] [-] idan|14 years ago|reply
There's a solution for that: use the LESS source. Mixin the various bootstrap classes into the styles you write for your clean, semantic markup. It's a nicer way to work, and it permits removal of almost all the presentational "bootstrap" classes from your markup. With some thoughtfully-structured markup, you can even do away with wrapper divs in many instances.
This isn't without some sharp edges—you have to grasp what the various moving pieces of bootstrap do, and what different mixins you must apply to achieve the desired effect, but it's a cleaner/more powerful approach IMO.
To be clear, I'm glad about the CSS-only approach too because it enables non-designers to get over the suck threshold quickly. Using the LESS is more work at first but it pays dividends in the long run.
[+] [-] mrpollo|14 years ago|reply
[+] [-] dfischer|14 years ago|reply
[+] [-] domgblackwell|14 years ago|reply
[+] [-] timmaah|14 years ago|reply
[+] [-] mattdeboard|14 years ago|reply
[+] [-] marketmonkey|14 years ago|reply
Now that it includes mobile flexibility, it's even better. I'll look at putting it toward my latest weekend hack: http://www.livelystocks.com
[+] [-] conroy|14 years ago|reply
[+] [-] nickbarnwell|14 years ago|reply
[+] [-] rplnt|14 years ago|reply
[+] [-] dkharrat|14 years ago|reply
Even though the main use case for Bootstrap seems to be for rapid prototyping, any thoughts on using it for a production app (but perhaps custom-themed), instead of rolling a custom design altogether? It seems Bootstrap has matured to the level that it can be used as for most projects with little customizations if any. A lot of what I read in the comments imply that Bootstrap is great at prototyping an app and once that phase is over, you throw it all out and start developing a custom design based on what has been prototyped. Why can't one just stick with Bootstrap and customize it as needed?
[+] [-] slewis|14 years ago|reply
I've been using Foundation for a new project and am really digging the responsive layout features.
[+] [-] bobfunk|14 years ago|reply
Both are based on solid resets and (now) great, nestable, responsive grids.
Bootstrap is great for when you're not a designer and you need to get something out there that looks passable. It includes a lot of fully styled elements and have very nice typography and forms out of the box. I found Bootstrap a lifesaver to get something up at http://www.eventsourcehq.com quickly.
Foundation is great to use as the foundation of a website when you have design skills or are working with a designer. Using the grids and the defaults gives you a lot less to think about when getting the rough outline of a website done, but you won't have to start overriding or deleting a bunch of included styles once you want to apply your own. We've used Foundation as the base for our example project template for http://www.webpop.com and plan on making more foundation based templates.
In short:
Bootstrap when you want something styled out of the box. Foundation when you just want to quickly get the structure and layout going and then apply your own styles.
[+] [-] alexwolfe|14 years ago|reply
I think when picking a framework it's important to look at the direction it is taking. In this case Bootstrap is very actively being used in the development community and backed by some really great developers at Twitter.
[+] [-] danneu|14 years ago|reply
Now that Bootstrap has responsive design, there's no contest.
[+] [-] damncabbage|14 years ago|reply
[+] [-] nchuhoai|14 years ago|reply
[+] [-] efields|14 years ago|reply
Or, you know, read about them.
[+] [-] pg_bot|14 years ago|reply
[+] [-] schpet|14 years ago|reply
This would imply a fluid grid, which it lacks.
http://www.zeldman.com/2011/07/06/responsive-design-i-dont-t...
[+] [-] huxley|14 years ago|reply
http://twitter.github.com/bootstrap/examples/fluid.html
In any case, fixed width layouts which adapt to screen sizes are also considered a form of responsive design.
[+] [-] josephcooney|14 years ago|reply
[+] [-] ericmsimons|14 years ago|reply
[+] [-] nhebb|14 years ago|reply
[+] [-] Griever|14 years ago|reply
[+] [-] sunchild|14 years ago|reply
http://twitter.github.com/bootstrap/download.html
(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)
[+] [-] pdk|14 years ago|reply
[+] [-] c_t_montgomery|14 years ago|reply
At least, it gives me something to hack on this weekend :D
[+] [-] pacomerh|14 years ago|reply
[+] [-] jv22222|14 years ago|reply
I understand that you can re-skin but I'm thinking many folks will go with the pre-built look/feel.
Even so, this is awesome for getting stuff out quickly. Great job.
[+] [-] ssong|14 years ago|reply
[+] [-] perfunctory|14 years ago|reply
[+] [-] whatusername|14 years ago|reply
[+] [-] rhizome|14 years ago|reply
[+] [-] conradfr|14 years ago|reply
[+] [-] Brajeshwar|14 years ago|reply
[+] [-] ch0wn|14 years ago|reply
[+] [-] jonaslejon|14 years ago|reply
[+] [-] urlwolf|14 years ago|reply
[+] [-] rehack|14 years ago|reply
After about a day or so of trying out to move my existing UI (of a fairly successful app) to bootstrap, I found it a bit limiting in some ways. The commonest one being to try and change the color of the nav bar.
Also the 'brand' style in Nav bar should support logos too. Perhaps provide a css code for it.
Also in general there is just one way(albiet good) you can do for all things, which I also did not like.
In a comparative way, jquery UI themes, give me a better default option over there. And I can choose a theme from several themes.
Another thing is that many of the bootstrap's components example 'TypeAhead' are again jquery plugins, for which you get competing options in the Jquery UI.
I also think, that creators of bootstrap are hurrying up with version numbers. 2.0 is a very aggressive call. In the light of, just a few months back, we just heard of bootstrap on HN. Opensource versioning has to more trustworthy than corporate versioning (a recent good example is node.js they are .6xxx . Jquery itself is still 1.7.xxx)
The above are my brief thoughts after playing with it for a day or so. Hope it helps somebody.
[+] [-] grantjgordon|14 years ago|reply
[+] [-] rolleiflex|14 years ago|reply
[+] [-] amalag|14 years ago|reply
[+] [-] jonaslejon|14 years ago|reply
[+] [-] huxley|14 years ago|reply
[+] [-] program|14 years ago|reply
[+] [-] ImprovedSilence|14 years ago|reply
[+] [-] olh|14 years ago|reply