Bootstrap 2.0, From Twitter(twitter.github.com)
twitter.github.com
Bootstrap 2.0, From Twitter
http://twitter.github.com/bootstrap/?v=2.0
162 comments
"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.
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.
I agree with you 100% here Jamie. Any non-developer I have shown the bootstap styling to just says it looks very professional, even if it is the 'vanilla bootstrap site'. Admittedly, I do agree that it some customizing should be done since it is very simple, but I wouldn't say changing the button colors is world-changing.
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.
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.
I'm trying bootstrap in my latest project, but have to say was surprised the first time I viewed it with IE. Even with IE9 the navbar and buttons look poor. Any advise?
Bootstrap looks better then 95% of sites in internets. Actually I hope that more and more sites will use bootstrap.
I've tired of different look and feel. There are zillions of autocompletes and everyone behaves differently (different animations, keyboard shortcuts and so on).
Even buttons works differently on different sites.
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.
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.
Bootstrap is not overused; just under customized.
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.
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 have filed a bug that was closed about this very thing. Bootstrap is very hard to customize because the variable color names are inane. Rather than define a palette of X many colors and then use that everywhere, bootstrap defines variables as @gray, @pink, @white, etc. If you want a light-on-dark layout, you need to redefine @gray as white, which makes no sense.
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.
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.
That's a shame - this is my main complaint about bootstrap. If you do plunge ahead and do a bunch of color customization, it also makes upgrading to new versions a pain.
I didn't even notice the LESS variables and built a dark theme in about 20 minutes by cascading over Bootstrap vanilla. Upgrading isn't an issue as long as you make customizations in a separate file that you simply include after bootstrap.css.
http://danneu.com/darkstrap/darkstrap.html
http://danneu.com/darkstrap/darkstrap.html
Actually, to give credit where it's due, I just downloaded the 2.0 release and it seems like things are much better. Still not at the point I'm describing, but at least the end classes aren't littered with @gray declarations.
Speaking of this, I built a tool using jQuery and Twitter Bootstrap itself that lets you customize the button's hue, saturation, lightness, and "puffiness". You can see it here: http://charliepark.org/bootstrap_buttons/.
Any discussion on it will hopefully be at the HN thread I just submitted (http://news.ycombinator.com/item?id=3538053).
Any discussion on it will hopefully be at the HN thread I just submitted (http://news.ycombinator.com/item?id=3538053).
This has already been proved by themeforest.net years ago with their admin templates
True. Clearly their time is divided into doing so many of those themes.
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.
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.
Themeforest is a marketplace. They make money no matter which one you buy.
You're advising people who lack design skills to change the colors? How about just advising them to focus on the content and functionality of the site they're building. If they do that, you won't have to tell them to remove the black bar. They'll remove it if it doesn't help the site.
Everyone survived eons of staring at old Windows application UIs, and this is prettier to look at! Believe it or not, a lot of business users expected their apps to have that boring look or else they might not consider it a full-fledged Windows program. The old Winamp design around the turn of the millenium looked alien in Windows--it looked awesome, but no business users would've considered it to be professional. When you go into a company to knock out some internal apps for them, creating something that gets work done is going to come first, and Bootstrap makes it possible for your app to look decent even when you don't have a designer around.
Once upon a time, smart, thoughtful people thought it was a good thing for different applications to make use of a common set of well thought out UI elements because it allowed users to leverage knowledge across many applications.
Some would say that it isn't a bad thing to have more of that on the web.
Some would say that it isn't a bad thing to have more of that on the web.
Lazy question: is it easy to remove that black bar? I think it's a terrible bit of navigation for "average user" kinds of people, who will easily miss it.
It's used on Twitter, Google and Facebook (er, Blue Bar). I think the "average user" can get it.
There are plenty of 'average Joe' kind of people who don't use stuff like Twitter or Facebook much.
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.
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.
Are you sure people wouldn't have an easier time finding the nav links on your site if they were in a bar? They look a lot like body text to me now, which might be the issue. Have you done any testing?
I think a bar might work and that testing would be the best way to see.
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.
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.
Currently you have no real user feedback on any of your buttons other than cursor change. When a user hovers over a button I would suggest defining a hover state for the button.
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
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
This would be an easy A/B test. If you do it, I'd love to hear what you found.
I agree with this completely - it's too branded and shackles you in development. I am working right now on a solution that gives you the ability to quickly prototype with nice looking styles, but is much more flexible and modular and gets out of your way when you need it. It's going to be a pretty huge project (and will borrow some pieces from bootstrap), but will post when it's done
I need this by the end of the week. :)
It's a framework - use it as such
You should A/B whether users give a damn.
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.
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.
yeah, like using <i> for icons http://www.w3.org/TR/html4/present/graphics.html#edef-I
At first, I thought that was a poor choice, too. However, <i> has come to mean that something is to be interpreted under a different voice or mood. You are providing augmented meaning. To further color a bit of text with an icon, I think, is in the spirit of the rfc.
Notice, also, that the rfc talks specifically about classifying the alternate meaning, appropriately, with the class attribute.
http://dev.w3.org/html5/spec/Overview.html#the-i-element
Notice, also, that the rfc talks specifically about classifying the alternate meaning, appropriately, with the class attribute.
http://dev.w3.org/html5/spec/Overview.html#the-i-element
Thanks for pointing that out. That seems like an odd design decision.
Edit: I wonder what motivated it. "i" for images and no one uses it to italicize text anymore?
Edit: I wonder what motivated it. "i" for images and no one uses it to italicize text anymore?
We've used <i> for icons before. Main reason we started doing it, I seem to recall, was that we needed some sort of element there to make the spritesheeting work easily, and a lone empty <i> is (a) short, (b) extremely devoid of meaning which might be added to it by browsers/readers, and (c) easy to remember when writing markup as i-for-icon.
yeah my best guess is that "i" for "icon", it's a good use, from the w3c "their use is discouraged in favor of style sheets." so I guess it doesn't really hurt no one, but the purists, or am I wrong?
`i` is for "italic", and that quote means that you should be using `font-style` instead of an HTML element to make your text italic.
Bootstrap is kind of aimed for HTML5, and "Font Style Elements" form HTML 4.01 got a new life in this spec (including previously deprecated S and U), with redefined semantics. Using I for icon is still wrong even by new definition.
http://www.whatwg.org/specs/web-apps/current-work/multipage/...
http://www.whatwg.org/specs/web-apps/current-work/multipage/...
[deleted]
They don't use <i> anymore. They use class icon.
It looks like they still do. From http://twitter.github.com/bootstrap/base-css.html#icons
<excerpt> 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:
<excerpt> 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:
<i class="icon-search"></i>
yeah, it's only their recommendation it doesn't really matter what tag as long as you have the class here is the selector
[class^="icon-"]
[class^="icon-"]
you dont have to use their icons you know.
My solution to this is to use @extend from Sass/SCSS as a way to bake that into more semantic structure.
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.
I suspect it's not possible to port it to "semantic markup"
Possibly - I won't know until I've played with the code a bit. But it seems to me that Susy has brought a simple but extremely powerful idea to implementing front-end code - instead of using a presentational element and layout-related class names like "row" etc. you can use a semantically-appropriate HTML element and @include your markup via a mixin. The actual CSS implementation can be the same - it's just that it is possible to separate the semantic HTML from the presentational structure (nested selectors with included of mixins as allowed by LESS/SASS) and the CSS implementation in the generated CSS.
I'm afraid I don't quite understand what semantic HTML means. Different people seem to have different ideas about the definition of semantic HTML. Could you point me to some internet resource that explains this stuff?
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.
Yeah I was blown away when another dev converted our foundation site to Bootstrap, and I saw the width-detection & automatic "mobile-ification"
Another great release from the chaps at Twitter. For those of us who are design-challenged, it's a great help for MVPs.
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
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
The coolest new feature? Bootstrap 2.0 is completely responsive. This is what it looks like on different screen sizes: http://areyouresponsive.com/twitter.github.com%2Fbootstrap%2...
It may be my slow data connection, but it seems as though AreYouResponsive is not, in fact, responsive.
Here we go, recursion:
http://areyouresponsive.com/areyouresponsive.com/areyourespo...
http://areyouresponsive.com/areyouresponsive.com/areyourespo...
Neither of the examples fit in its frame.
This is awesome! Major improvements since 1.4.
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?
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?
Why would you think you can't? Once your app conforms to Bootstrap's markup, you already have a markup/class hierarchy that makes custom styling easy. There's a blog out there that shows Bootstrap sites in the wild and they're customized.
I converted my Bootstrap 2 theme into a dark one: http://i.imgur.com/qm1iA.png
I call it... Darkstrap.
I converted my Bootstrap 2 theme into a dark one: http://i.imgur.com/qm1iA.png
I call it... Darkstrap.
Can someone compare and contrast Boostrap 2.0 with ZURB Foundation?
I've been using Foundation for a new project and am really digging the responsive layout features.
I've been using Foundation for a new project and am really digging the responsive layout features.
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.
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.
Thanks! That's the impression that I got from reading a similar thread about Bootstrap 1. I opted for Foundation because I want to get something reasonable together for prototyping, but also apply a full design later.
webpop looks awesome by the way.
webpop looks awesome by the way.
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 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.
Now that Bootstrap has responsive design, there's no contest.
I haven't had an experience to experiment with Bootstrap but does it handle nested grids well in fluid (Responsive) layouts? That's one of the things I liked about Foundation is that it handles nested grids well.
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.
I use Foundation and haven't had to use any <br/> with forms, nor have I even thought about it.
Ah, this is my error, sorry.
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.)
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.)
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.
They both look to accomplish many of the same tasks and probably overlap a lot, and probably differ quite a bit.
Or, you know, read about them.
Or, you know, read about them.
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.
Having using Blueprint extensively, it's great if you're trying to get a basic grid going and not much more. It's super lightweight but doesn't offer the features of Bootstrap.
One day I plan on comparing all these half-decent frameworks and writing a post about it.. one day.. Here are some others I've found (Note: This is not a full listing, others are old/abandoned so I've omitted them):
http://csswizardry.com/inuitcss/ http://framelessgrid.com/ http://goldengridsystem.com/ http://foundation.zurb.com/ http://goldilocksapproach.com/ http://www.columnal.com/ http://www.getskeleton.com/ http://thatcoolguy.github.com/gridless-boilerplate/ http://semantic.gs/
http://csswizardry.com/inuitcss/ http://framelessgrid.com/ http://goldengridsystem.com/ http://foundation.zurb.com/ http://goldilocksapproach.com/ http://www.columnal.com/ http://www.getskeleton.com/ http://thatcoolguy.github.com/gridless-boilerplate/ http://semantic.gs/
I'm not sure I would describe Compass as a CSS framework. Compass and Bootstrap are not the same thing. Compass is a CSS Authoring Framework, and it can be used with boostrap (although it's not yet at bootstrap verison 2):
https://github.com/vwall/compass-twitter-bootstrap
https://github.com/vwall/compass-twitter-bootstrap
> With Bootstrap 2, we've gone fully responsive.
This would imply a fluid grid, which it lacks.
http://www.zeldman.com/2011/07/06/responsive-design-i-dont-t...
This would imply a fluid grid, which it lacks.
http://www.zeldman.com/2011/07/06/responsive-design-i-dont-t...
It has an optional fluid grid:
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.
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.
Oh! Awesome.
(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.
I'm curious about this as well. I was checking out the 2.0-wip earlier today and all of the button animations remained intact.
Yeah, I saw it just a day or two ago as well and it was still there. I wonder if they're removing effects that aren't compatible across all browsers?
The relevant issue/rationale is here: https://github.com/twitter/bootstrap/issues/1229
I'm glad they got rid of it. It made the buttons feel "squishy" and unresponsive.
I'm glad they got rid of it. It made the buttons feel "squishy" and unresponsive.
Ah thanks for the Issue link. I was digging around last night for an official answer but couldn't find one. Thanks!
The custom module building I was surprised to find, even though I've been using the 2.0-wip branch for a few weeks:
http://twitter.github.com/bootstrap/download.html
(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)
http://twitter.github.com/bootstrap/download.html
(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)
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
At least, it gives me something to hack on this weekend :D
They are different. In months past I have been mashing up components of bootstrap with skeleton (as well as 2 excellent others, golden grid system and frameless by @jonikorpi) in order to have sensible css defaults that work responsively. GGS made some things possible without modification that were very tough to implement in skeleton (like the footer at the bottom of goldengridsystem.com)
I use Skeleton on my blog.
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.
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.
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 guess someone needs to make Bootpolish - a re-skinner for bootstrap elements.. The responsive grid and well layed out less templates are really what I see as the heart, so I'm guessing this would be well received!
My only fear is that widespread use of these kind of pre-designed frameworks might create a homogenized web.
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.
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.
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.
Look at Wordpress. We haven't got a homogenized web yet (aside from facebook)
That's fine. It just makes creativity that much more valuable.
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.
Here is the SASS & SCSS version of Twitter Bootstrap 2.0 https://github.com/Brajeshwar/bootstrap-sass-scss-compass
Thank you! I was looking for this, but it's kind of hard to through the insane list of forks.
Bootstrap 2.0 + WordPress = #win ? Anyone knows if there is any theme out there w/ Bootstrap?
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.
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 use bootstrap as the base for all my new projects for clients. You guys are fantastic! Thanks for open sourcing such a great project!
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.
From what I see they still have tablesorter as a plugin. Example: Zebra-striped w/ TableSorter.js
Maybe add or use http://listjs.com/ ?
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.
That explains a lot. It also breaks if any of the columns get too narrow. Rather than dropping the effort to further narrow it, it crushes the text of the label upwards so you are left with a set of vertically extended labels where there is ample space.
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.
Pardon my ignorance, but could someone give me a rundown of what bootstrap is, and how it works?
Pre-made css for design-handicapped people like me and web design framework for designers.
A massive boon for us has been the ability to rapidly prototype UI concepts for clients. People definitely prefer interacting with tangible objects over flat wireframes. The more complex the UI paradigm you're trying to represent, the more likely you should be using the bootstrap.
That.. hmm.. still doesn't really help me. How do you use it to prototype?
Is there a tutorial somewhere, or someone developing something?
Is there a tutorial somewhere, or someone developing something?
For me, the Bootstrap-101 videos got me from "wtf do I do with this thing" to "oh, I get it now". The pacing was a bit slow for me, but overall I got a lot from the videos.
http://webdesign.tutsplus.com/tutorials/complete-websites/tw...
http://webdesign.tutsplus.com/tutorials/complete-websites/tw...
On the topic of the responsive design module - when I view my project on an iPhone/iPad it shows the full screen version of the site, rather than the mobile version. However, it shows the mobile version on a samsung phone.
Is there a reason for this?
Is there a reason for this?
Yes, it is based on media queries on the available screen real estate with differences as <480, 768, 980 and 1200px.
The phone will pick out the smallest one. Try turning the iPad into the portrait orientation.
The phone will pick out the smallest one. Try turning the iPad into the portrait orientation.
Anyone know if they have a CDN like they did for 1.4? I was using it on a test site with this link - http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css and it works fine but didn't see if they have a hosted 2.0 version yet.
In your opinion, what is the mobile equivalent of Bootstrap or what combination of JS/CSS packages can function as a bootstrap-type jumpstart?
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.
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.
Mobile was a consideration with this version, and it has a nice responsive layout.
Depending on what you're after, there's either the native app lookalike : http://www.chocolatechip-ui.com/
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.
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.
Depending on what you're after, there's either the native app lookalike : http://www.chocolatechip-ui.com
How is it compared to jquerymobile?
How is it compared to jquerymobile?
Yeah, two of the top mentioned features in the link is that Bootstrap 2 is built to be responsive and work on mobile devices.
I've incorporated Bootstrap 1.4 to use its styling (fonts, buttons, etc) but I'd like to get into the responsive features of 2.0. How exactly does the grid layout work, how should I layout my content? Which columns should I use and how would they adapt to changes in device max width? Thanks in advance!
It's pretty much as easy as wrapping the content in .container, .row, and .spanN tags. The responsive part should take care of itself by collapsing horizontal elements into vertical arrangements, and adjusting widths to keep them within the viewport.
There are some edge cases for various components (such as the Bootstrap navbar) that require some special markup and Javascript to collapse intelligently.
There are some edge cases for various components (such as the Bootstrap navbar) that require some special markup and Javascript to collapse intelligently.
I'm a big fan of the js widgets- jquery-ui is starting to look a bit old-fashioned and the design on the bootstrap widgets looks very clean. If you end up doing anything very complicated you'll end up fighting the css more than it helps you but I like that I can pick and choose modules.
Glad to see that Bootstrap 2.0 is out. Been following along on the 2.0-wip for the last couple days and very impressed with the new Responsive Design.
One slight problem (Chrome, Mac OSX Lion): http://i.imgur.com/SOrUZ.png
One slight problem (Chrome, Mac OSX Lion): http://i.imgur.com/SOrUZ.png
Your browser is probably loading in the CSS and/or image assets from it's cache of what Bootstrap v1.4 looked like, thus looking mangled when it runs the 2.0 HTML structure.
A couple of refreshes (does Chrome have Shift + R for forcing reload without cache?) should sort it out.
A couple of refreshes (does Chrome have Shift + R for forcing reload without cache?) should sort it out.
Chrome, annoyingly, has never implemented hard reload.
While I think Bootstrap is fantastic and helpful, my only worry is overreliance and under customisation, thus a decrease in creativity.
I would be a little bit sad if every new web app I visited overused Bootstrap and stuck to that now increasingly popular design.
I would be a little bit sad if every new web app I visited overused Bootstrap and stuck to that now increasingly popular design.
I was using 1.4 in my site and will update tonight. God bless you guys :D
Is it just me that's getting a really slow generation time with this? Previous versions took around 1.2 seconds, while v2 is taking upwards of 4.5 seconds.
Even if you won't use it for your project, the less source is a great source for best practices regarding browser quirks and rare rendering bugs.
[deleted]
It would be great if they could work with jquery-ui because the tools that bootstrap provided also fit jquery-ui.
Designing a new project with this... it's literally saving me about 3-6 weeks worth of work. Thanks @Twitter.
Nice! I'll need to upgrade to this ASAP.
Anyone that's already done it - how easy is it to upgrade from 1.4?
Anyone that's already done it - how easy is it to upgrade from 1.4?
[deleted]
they seem to have removed the few sample layouts they had before which you could copy/paste to start a full page. or am i missing that somewhere on the site?
ummm... yeah - why didn't I see that before?
Thanks!
Thanks!
is it just me that can't find them, or is the documentation on form fields not included on v2 docs? I know they were there on previous docs.
ah, thank you. don't know how i missed that.
Nice, but still missing DatePicker...
this is like a non-designer's wet dream, i'm soaked.
Been using Bootstrapwip2 for a few days on http://sharemegithub.com
I wonder if we can look forward to mustache being implemented in in 2.1?
I wonder if we can look forward to mustache being implemented in in 2.1?
I hope that's not why it's down.
This appears to be the correct link: http://shareme.github.com/
This is awesome. Thank you Twitter.
Bootstrap rocks!!
Very nice indeed. I will consider Bootstrap for my next project. Very simple to implement.
This looks amazing! Can't wait to add this to some of my already-in-the-works projects. Was hoping you'd release this before I had to launch ;)
That Kippt site... on Bootstrap... c'mon!!!!
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.