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.
Unless you're targeting developers or Silicon Valley who cares? Most people couldn't tell you the difference between a Bootstrap site or a non-bootstrap site, even if they could its unlikely they would actually care. As a dev who admittedly sucks at CSS I'll take better looking and clone-like (and cross-browser) over ugly and unique any day.
Also, check out oss/bootstrap/docs/download.html#variables a new feature in the docs that makes customizing really easy even for someone who doesn't know CSS!
It just looks like you chimed in to show the negative side, but didn't even check out the new code.
Thank you to anyone who worked on the project, 2.0 is awesome. Responsive design is nailed down, adding and removing components is even easier than before and the docs are awesome. Good stuff here.
If you look at iPhone or Mac or Windows application they looks the same as other application on particular platform and no one annoyed. Each application use same keyboard shortcuts and controls and frequently share same colors.
There is even UI recommendations for most of the platforms. You could use owner-drawn controls for sure but it usually they are used only if default controls are unsuitable for some task or in games.
In all fairness, what this proves is that there is a fairly large market for such packaged customization themes which are built thoughtfully and work on all resolutions.
I proposed names like @primaryColor, @primaryColorLight, @secondaryColor, etc, but the tickets were closed. Yes, it's a lot of work, but it must be done. If you can define your four colors and have Bootstrap look entirely different, it goes a long way to instant customization.
Any discussion on it will hopefully be at the HN thread I just submitted (http://news.ycombinator.com/item?id=3538053).
Instead, if they did a (or a few) authoritative themes with compass css with such good documentation as bootstrap and their theme works at all resolutions, I'm sure people will use that one too.
Some would say that it isn't a bad thing to have more of that on the web.
Some of our customers seem to have some difficulties finding information on pricing here, for instance: http://www.liberwriter.com/
If that navigation link were at the top in a small black band, it might as well be on Mars.
The point about pricing in particular is that there is a huge button in the middle of the page, and people are still not clicking it. My instincts are that a black bar at the top of the screen would be nearly invisible to these people, many of whom are more advanced in their years than the average HN user.
As for the "view plans and prices, get started" I believe a smaller button that is better positioned with a hover effect would get significantly better results. Even a simple change such as changing that text to something a little shorter like "Get Started Now", "View Plans" or " View Prices" will get you better results.
Ultimately I believe you would see significant improvements using bootstrap across your site. Some examples of what others have done with bootstrap can be found here http://builtwithbootstrap.com
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.
Notice, also, that the rfc talks specifically about classifying the alternate meaning, appropriately, with the class attribute.
Edit: I wonder what motivated it. "i" for images and no one uses it to italicize text anymore?
How to use
With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
Now that it includes mobile flexibility, it's even better. I'll look at putting it toward my latest weekend hack:
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?
I converted my Bootstrap 2 theme into a dark one: http://i.imgur.com/qm1iA.png
I call it... Darkstrap.
I've been using Foundation for a new project and am really digging the responsive layout features.
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.
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.
webpop looks awesome by the way.
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.
Now that Bootstrap has responsive design, there's no contest.
I went back and checked; it was actually the lack of any wrapping container that was bothering me; <label><input><label><input> etc.
(Unless you're very careful with the styling it gets to be a pain in the bum to include non-standard chunks of markup underneath some elements, particularly if you want to arrange the label on the left and everything else on the right.)
Or, you know, read about them.
This would imply a fluid grid, which it lacks.
In any case, fixed width layouts which adapt to screen sizes are also considered a form of responsive design.
I'm glad they got rid of it. It made the buttons feel "squishy" and unresponsive.
(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)
At least, it gives me something to hack on this weekend :D
You're worried that it's missing some features? Skeleton has no features. It's a grid, some typography, and some defaults. On the other hand, Bootstrap is a complete front-end package. They're very different. Look at Bootstrap's js bundle alone.
Skeleton is nice when you just want some sensible defaults with your responsive grid.
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.
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.
Is there a tutorial somewhere, or someone developing something?
Is there a reason for this?
The phone will pick out the smallest one. Try turning the iPad into the portrait orientation.
I have a personal project that uses Bootstrap but it pains me to use it on my mobile device.
The js templating (loading JSON data into the view) that I do is a necessary part but I'd be willing to hardcode.
or you could go with a collapsible column grid along the lines of http://fluidbaselinegrid.com/ where by you have the one code base for mobile and desktop browsers.
How is it compared to jquerymobile?
git clone https://github.com/twitter/bootstrap.git
git checkout v1.4.0
One slight problem (Chrome, Mac OSX Lion): http://i.imgur.com/SOrUZ.png
A couple of refreshes (does Chrome have Shift + R for forcing reload without cache?) should sort it out.
I would be a little bit sad if every new web app I visited overused Bootstrap and stuck to that now increasingly popular design.
Anyone that's already done it - how easy is it to upgrade from 1.4?
I wonder if we can look forward to mustache being implemented in in 2.1?