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.
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.
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.
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.
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.
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):
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):
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.
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.
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.
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.
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 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.)
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.
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.
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!
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.
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.
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?
(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.
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.
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.
162 comments
[ 4.0 ms ] story [ 115 ms ] thread- 12 Column grid
- Responsive design (adjusts to different screen sizes, like Skeleton)
- New forms, buttons, dropdowns
- More opinionated! More Less preprocessing!
I'm fired up; this will be present on my dev branch tonight.
Another great feature is the ability to choose only what you need, à la Modernizr. It's on the download page (http://twitter.github.com/bootstrap/download.html)
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
http://areyouresponsive.com/areyouresponsive.com/areyourespo...
I'm glad they got rid of it. It made the buttons feel "squishy" and unresponsive.
Is there a tutorial somewhere, or someone developing something?
http://webdesign.tutsplus.com/tutorials/complete-websites/tw...
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.
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/
https://github.com/vwall/compass-twitter-bootstrap
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?
I've been using Foundation for a new project and am really digging the responsive layout features.
Or, you know, read about them.
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.)
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.
webpop looks awesome by the way.
Thanks!
This would imply a fluid grid, which it lacks.
http://www.zeldman.com/2011/07/06/responsive-design-i-dont-t...
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.
There are some edge cases for various components (such as the Bootstrap navbar) that require some special markup and Javascript to collapse intelligently.
http://twitter.github.com/bootstrap/download.html
(Bonus: note the use of ScrollSpy to pin the sub-menu on that page!)
Anyone that's already done it - how easy is it to upgrade from 1.4?