The documentation makes reference to an announcement on the blog, which doesn't seem to be available. If anybody wants to keep watch, be my guest: http://blog.getbootstrap.com.
This looks like a nice set of changes for Bootstrap. I'm not sure how I feel about the grid class name changes, but then again, I went all-in on Foundation a few months back, so it doesn't affect me one way or another.
I'm sure mdo and fat have excellent reasons for using Less instead of Sass, but I'm a Rails user and I like Sass better to boot. Anyway, no matter, I'm glad to see Bootstrap is continuing to push forward!
I've inherited a web application that's held together with invalid HTML and riddled with inline CSS. Got the green light to redo it all.
Replacing all the markup has been on hold pending BS3 (the mobile-first aspect of BS3 seems a big win over BS2), but while waiting I've seen a lot of people talking about Zurb Foundation and its "superior" grid system.
From a purely HTML5+CSS3 point of view, what do you think of BS vs. Zurb?
Zurbs' grid uses percentage widths for columns and is mobile-first - BS 3 now uses a similar system which makes the only really difference SASS/SCSS vs LESS if you just want the grid
Clearly, I can't speak to BS3, but the thing I like most about Foundation is the mobile-first grid: build your grid layout using Foundation's 'small-n' classes and it just works on larger screens too. If you want to develop more complex layouts for larger screens, all you have to do is append 'large-n' class names (and now 'medium-n' exists, too).
That's interesting to read, beccause on my iPad 4 BS3 is very sluggish. Buttons visibly wait to show any change, menus the same. I don't have this problem with BS2. Maybe when it ships this will have been eliminated.
bootstrap 3's grid system now uses percents instead of fixed pixels. also col-lg or col-sm classes can be used to design/show different content on different resolutions. my vote is on bootstrap.
I prefer LESS over SASS, simply because of how often I use mixins and how nice ".border-radius(5px)" is compared to "@include border-radius(5px)".
That being said, my current setup is Stylus+Nib. (And for the above examples, you'd just write "border-radius: 5px" and it takes care of everything. Much more flexible.)
Actually, in SASS, border-radius is done with the syntax `+border-radius(5px)`. You're thinking of SCSS, which is much more verbose but has more similar syntax to CSS.
there is such a thing as plain border-radius: 5px, you know?
I think mixin's are generally overused; having to maintain css as well as right it, I'm quite happy with a syntax that doesn't encourage their use. If you need em: fine, but the you won't care about @include vs. "." anyhow.
As I'm sure you well know, a mixing includes vendor specific prefixes. And the whole point of mixins is to make it easier to maintain. Once they're written, you don't need to worry.
The percentage of browsers that still require these prefixes are miniscule. I've been using border-radius, box-shadow, box-sizing, and others without prefixes for a while now without issue. Check caniuse.com for their status and you'll find vendor prefixes are dropping like flies.
That's an opinion, not a fact. If I see a colored rectangle that's offset from the text with a label that indicates action[1], I immediately think its a button. I'm willing to wager a non-trivial amount of consumers do so as well, but this is what things like context and split testing are for.
[1] The trickiness with flat design is when buttons for action are also used as information display. One of the biggest issues with the first iteration of Metro was that you'd have a box that shows your current number of emails -- and you didn't know if that was just a part of your dashboard or also a link to your email that had a nice preview. That's not a failing of flat design, that's a failing of design.
I've been waiting for the dropdown events that were added. I started a project in Zurb Foundation today due to Zurb having the upper hand in responsive, time to reevaluate it looks like...
It has all sorts of bugs in Safari on my iPad. Switching screen orientation and zooming out cause the left sidebar to cover up the body text, I can sometimes get it to stay zoomed out way too far, and if I try to zoom in Safari crashes every time. Looks very slick though.
the collapsed navbar has several problems on Chrome (beta) for Android as well, f.e. when zooming, or scrolling while the menu is in the expanded state
Do the Foundation developers always need to hijack posts regarding bootstrap? Please stop it, and just submit links to articles discussing why Foundation is better.
We have built the new version of our web app on BS3. The migration from BS2 to BS3 was not too difficult. There are some new elements too like List View and Panels. Love the flat UI too. Feels very modern and light. Here is a demo of our app: http://demo.erpnext.com/
I've always wondered people like using a Gem. It's better for me to just write in a bootstrap.css file in my assets folder and add it to the application.css tree.
Bootstrap 3 is mobile compatible "out of box". but dropping of IE support can cause troubles on your side. you should use respond.js to use media-queries on IE8 and below. despite this, i'm using it since april and everything is ok.
Thanks, I started the change from 2 > 3 today and it hasn't been too painful. The main things were changing to the new grid system and searching the docs for some classes that had been renamed
I love bootstrap, but I'm completely unconvinced about the flat trend.
My site, www.liberwriter.com is squarely aimed at non-technical people who are not really on top of the latest trends. I could very easily envision them having a higher cognitive load trying to figure out what is a button and what isn't and so on.
Bootstrap is a, well, bootstrap. You're supposed to build upon it, so having a "flat" base makes sense since it's less hassle to add CSS properties (and give your buttons some bevels) than override existing ones.
While it might not be much "hassle" in terms of adding some code, the part I appreciate most about bootstrap is that it's put together by competent designers and looks good as a whole. Once I start f'ing around with individual bits and pieces, my guess is that things are going to go to hell in a handbasket in short order, which sort of defeats the purpose of the whole thing in the first place.
Also, my guess is that the flat base is there because that's what's cool these days. Which isn't necessarily a bad thing: for a lot of people, having something that looks modern and recent is pretty important too. Just that I'm worried about it, a little bit.
You should never rely on the styling for a public facing website. Sure, if you're building a side projects or perhaps even an MVP, go for it. However, if you're building a site to service a market, whether it be selling something, publishing something, etc. you should always go with a unique design.
Bootstrap is great for having some underlying architecture but the visual styles should rarely be used. Keeping the original bootstrap style says a few things about you and your product: You're either lazy, poor at design, or don't care enough to hire a competent designer.
Well, you do have the liberty to add your non-flat styles as you wish...
And: Bootstrap is not intended to be used "as is" in every case. It's supposed to give you an quick start, something you can extend and customize as you see fit. It does a terrific job at that.
One of the advantages of having very non-technical customers, is that they could not care less that "OMG, it's stock bootstrap!". They just like that the site looks decent, and it certainly looks better than if I did everything myself.
Having a good enough default means I can spend my time improving the product, rather than worrying about something that neither the customers nor I care much about as long as it's good enough. And stock bootstrap very much is - that's one of the things I love so much about it.
With the flat design stuff, now I'll have to think about it, look for different solutions like themes, or maybe just going for it and hoping it's not a problem, and generally spend time not making our ebook conversions better.
Ultimately, it's not that big a deal, and I'm still way better off than without bootstrap, but I do consider it somewhat of a regression.
No, but the Bootstrap guys are very good with CSS and HTML, and there are probably lots of other benefits to upgrading once you look beyond the flat design stuff. Things that I would be very happy to have!
I don't know if it was designed by focus group or not, but a lot of work went into flat design. It helps to start with understanding the reasoning behind Microsoft's Metro design language [1][2], which is one of the originators of the flat trend.
In a nutshell, it's aimed primarily at touchscreen devices, but the principles that make it work there also happen to work on most other screens - remove all "chrome" (unnecessary shadows, 3D elements, etc) and focus on the content (strong typography, media, organized with whitespace).
I think it's flat so that you can add CSS css to create your custom widgets instead of having to override CSS to customize widgets. Foundation has a similar construct.
It seems like preferring a uniformly flat style is a more "non-technical" point of view; a more technically-oriented perspective would recognize the quasi-3D beveling of controls as a semantic cue indicating that those elements are functional controls meant to be interacted with, rather than static content.
I think that buttons with some kind of bevel/emboss - ones that resemble the ones people have seen on computers for the past 20 or so years, and in the physical world for 100+ - are going to be more recognizable. Flat UI means a smaller visual vocabulary (usually, and maybe not the best chhoice of word but hopefully you know what I'm trying to get at), but it also means fewer clues for users. Once they've figured out the answer to "what is a button?" they're left with something free of visual noise that is mostly only useful while learning.
(Anecdotally) For someone non technical, change is usually bad when it comes to interfaces. I think that simple and "easy to understand" is a great direction and have tried using flat and "ios7 color&font weight differentiated buttons" in some recent projects. I have seen teething issues when moving towards UIs where the visual definition of a button does not include some "quasi-3d" aspect. Simply differentiating by text or background color makes a lot of users apprehensive about touching things, afraid they will produce an unexpected or unwanted result. I've seen them adapt rather quickly, but there has always been some 'what do I press?' stage. Not exactly test data, but the results have been pretty consistent.
EDIT: I should note that usually adding a stroke to just the bottom edge of a clickable button or a slight shadow/gradient usually helps. You can see this style in a lot of recent google products and I think it works really well (and I bet they tested it before deploying!). This method allows you to remove or tone down the shadows/gradients/textures from your navbars and other items without having them feel disconnected from your buttons.
The good news is that in two years you can be concerned about moving away from the rock solid accepted standard of flat design towards the next new "trend". Because you know, it works and people are familiar with it and why would anyone want to mess with that.
There was a time that some believed removing the underline from links was nothing but a design led trend and a move in the wrong direction. People figured it out, adjusted, and no site missed a beat.
So what exactly is the point of bootstrap? It includes an entirely pointless (and poorly made) grid system; an excessive (and unnecessary) css reset; complex & slow selectors, and lots of default styling you're probably going to replace anyhow.
If it were a bunch of separate modules you could individually include and use as a template for your own style, you could actually use the parts you need: as it is, I really don't understand the hype.
I for one hate working with CSS and would rather concentrate on writing Javascript and the backend code. The point of bootstrap and similar is to give your web app a UI on a good-enough level for most apps.
Also yes you can use only bits of it if you want, just click Customize.
If it were a bunch of separate modules you could individually include and use as a template for your own style, you could actually use the parts you need
Version 3 is very modular. You can compile the LESS files yourself and include only what you need.
You could already do that with 2.x too. I did this with a site that I built using bootstrap 2.3. No one knows that site is bootstrap until I tell them we used it. We made our own bootstrap.less file that only pulled in the .less for the modules we needed, so we could minimize the bloat.
Also, bootstrap uses normalize now, not reset. This poster should make a little more effort to understand before criticizing. It's obviously a useful framework as many find it very useful. Coding and html css for a complex is not something a developer wants to do unless they have very, very good expertise in front end development. I think bootstrap is great for developers who aren't front end experts, but aren't necessarily bad developers. Maybe specializing in back end work, database, web server side stuff. Using bootstrap frees you up to focus on things that matter more for your app, and you don't have to worry about typography, typeahead, grid systems, etc. It's one of many options that satisfy this need, such as Zurb's Foundation.
I use bootstrap. I'm complaining based on experience, not randomly reading their code.
As to modularity: I'm happy they're addressing part of the problem, but it's really only part of the problem. Fundamentally, these "modules" are NOT modules: they don't provide and encapsulation layer since you still need to interact with them heavily. (unless you don't want to do any styling at all, ever.)
If you will, bootstrap is a set of templates, and it would work a lot better if they packaged it as such. It's not a library, nor a module: the insides of the abstractions leak out all over the place.
I use bootstrap. I'm disappointed with 2; although perhaps 3 is better.
I guess if you don't know css I can imagine it's a godsend: bunt frankly, basic css isn't that hard, and most of boostrap is easy to duplicate with basic css (except perhaps the media queries).
Anyhow, I don't think bootstrap doesn't have good stuff; I think the way it's presented as some kind of "system" is a bad idea. It's doesn't work well as a system. It works well as a basis when someone takes the time to pick and choose what they need.
You can't just take bootstrap AND some other css, use them both together, and expect both to work orthogonally without a lot of care. They will stomp on each others selectors and you'll have a specificity war on your hands. How can you make this work? By actually picking, the bits you need, and doing more than a modular concatenation with whatever other css you need.
Basically: it's a great css example, not an encapsulated, finished module.
When you say: "No one knows that site is bootstrap until I tell them we used it" that tells me you customized it, and that's exactly how it should be. It's not a reusable component, it's a customizable template.
It is useful for projects where functionality/content is what matters and the only design requirement is "looks sort of professional".
If you have the money and use for a real design, bootstrap is probably not for you. It doesn't really integrates in your own design, it's just a better default.
If you are writing a web application of sorts that needs to have a basic theme (buttons, forms, menus, etc) then Bootstrap serves a good purpose and gives you a responsive layout along with it. It also brings some sense of uniformity across apps for more complex controls.
For anything beyond that you are better off with yui/pure or csswizardry/inuit which offer much better responsive grid systems. Pure has one shortcoming in that you can't specify varying column widths for varying devices (such as 6 columns for desktop and 3 for mobile). Both frameworks are light and offer some decent UI elements with minimal styling so you can extend them.
You forgot the option of "no framework, I'll build it myself and have ultimate control".
It's not rocket science, it's HTML and CSS, and you don't need a framework to have uniformity or responsiveness.
Your site could be made up of a bunch of jquery plugins too, and stock library graphics, and is your content rehashed too?
div class=span4 is nothing more than a table-based layout in disguise. Spans and rows are not inherent to divs. You're adding a layer of new rules that doesn't complement the technology you're adding to. You may as well be building with an old fashioned table based layout.
When I view source of some of the flagship bootstrap examples, I see stuff like this... empty divs either side of the logo graphic. I remember doing stuff like this with tables back in the 90s. Spacer gifs inside the empty table cells. But in this case, it's a class.
You're forgetting the key benefit of frameworks built on preprocessors like Sass or LESS: you can use their mixins to define semantic CSS rules, without using presentation classes.
Just because people have a framework doesn't mean they will write elegant code. The example you gave is indeed ugly, but there are a bunch of different ways (within the framework) to accomplish the same thing without being so lame. This is a fault of the developer, not the folks who created bootstrap.
People write terrible code in bootstrap, django, backbone, etc. Even within the confines of a framework, man will always find a way to write shit code. It is one of the constants of our universe.
> It includes an entirely pointless (and poorly made) grid system
Well if you don't want to design using a grid then I don't think it really makes sense to use bootstrap as it's main point is the grid system. Poorly made? They seem to have made a lot of improvement and is now pretty close to the Fundation one.
> an excessive (and unnecessary) css reset
imo it misses box-sizing: border-box, the default css values are really bad and a reset of any kind is always welcome.
> lots of default styling you're probably going to replace anyhow
But this is more and more the point of bootstrap, the default styling allows you to focus on the code when you're not a designer.
For me, it helps me build a quick prototype of my projects and avoid designing administration that I will be the only one to see.
For those wanting to try out Bootstrap 3 against an existing Bootstrap 2 site... note that if you use anything other than 12 columns that it won't work yet.
Simply: The grid is hard-coded to be 12 columns.
If you want more or less, then you need to adjust less/grid.css manually and reflect that in column count within less/variables.css and use grunt to rebuild.
Aside from the generation of custom grids being broken, no complaints about the rest and we've been following the bleeding edge for several months now and it's been fine. Yeah a couple of things have broken, but every change has been an improvement and that's a good thing.
140 comments
[ 4.5 ms ] story [ 196 ms ] threadI've been keeping an eye on the pull request (https://github.com/twitter/bootstrap/pull/6342) and the gh-pages branch (https://github.com/twitter/bootstrap/tree/gh-pages) for other Bootstrap 3 information.
http://twitter.github.io/bootstrap/customize strongly suggests there will be another RC after this one.
It's a huge productivity boon and the documentation does a great job of showing you what to do.
This looks like a nice set of changes for Bootstrap. I'm not sure how I feel about the grid class name changes, but then again, I went all-in on Foundation a few months back, so it doesn't affect me one way or another.
I'm sure mdo and fat have excellent reasons for using Less instead of Sass, but I'm a Rails user and I like Sass better to boot. Anyway, no matter, I'm glad to see Bootstrap is continuing to push forward!
Replacing all the markup has been on hold pending BS3 (the mobile-first aspect of BS3 seems a big win over BS2), but while waiting I've seen a lot of people talking about Zurb Foundation and its "superior" grid system.
From a purely HTML5+CSS3 point of view, what do you think of BS vs. Zurb?
That being said, my current setup is Stylus+Nib. (And for the above examples, you'd just write "border-radius: 5px" and it takes care of everything. Much more flexible.)
I think mixin's are generally overused; having to maintain css as well as right it, I'm quite happy with a syntax that doesn't encourage their use. If you need em: fine, but the you won't care about @include vs. "." anyhow.
http://monosnap.com/image/Vc05ZRQmGTmRrYvTEbLaYAI6w.png -- those do not look interactive at all.
[1] The trickiness with flat design is when buttons for action are also used as information display. One of the biggest issues with the first iteration of Metro was that you'd have a box that shows your current number of emails -- and you didn't know if that was just a part of your dashboard or also a link to your email that had a nice preview. That's not a failing of flat design, that's a failing of design.
Of course context plays a huge part, but it's a gamble whether this trend will survive for long.
I would definitely recommend this gem. Yury, the maintainer, updates it pretty much every day.
It's a fork of the twitter-bootstrap-rails gem.
Edit:
There is also this: https://github.com/jlong/sass-twitter-bootstrap/tree/3.0.0-w...
Why add another point of failure on your site?
My site, www.liberwriter.com is squarely aimed at non-technical people who are not really on top of the latest trends. I could very easily envision them having a higher cognitive load trying to figure out what is a button and what isn't and so on.
What do testing and studies show about this?
Also, my guess is that the flat base is there because that's what's cool these days. Which isn't necessarily a bad thing: for a lot of people, having something that looks modern and recent is pretty important too. Just that I'm worried about it, a little bit.
Bootstrap is great for having some underlying architecture but the visual styles should rarely be used. Keeping the original bootstrap style says a few things about you and your product: You're either lazy, poor at design, or don't care enough to hire a competent designer.
And: Bootstrap is not intended to be used "as is" in every case. It's supposed to give you an quick start, something you can extend and customize as you see fit. It does a terrific job at that.
Having a good enough default means I can spend my time improving the product, rather than worrying about something that neither the customers nor I care much about as long as it's good enough. And stock bootstrap very much is - that's one of the things I love so much about it.
With the flat design stuff, now I'll have to think about it, look for different solutions like themes, or maybe just going for it and hoping it's not a problem, and generally spend time not making our ebook conversions better.
Ultimately, it's not that big a deal, and I'm still way better off than without bootstrap, but I do consider it somewhat of a regression.
I don't know if it was designed by focus group or not, but a lot of work went into flat design. It helps to start with understanding the reasoning behind Microsoft's Metro design language [1][2], which is one of the originators of the flat trend.
In a nutshell, it's aimed primarily at touchscreen devices, but the principles that make it work there also happen to work on most other screens - remove all "chrome" (unnecessary shadows, 3D elements, etc) and focus on the content (strong typography, media, organized with whitespace).
[1]: http://en.wikipedia.org/wiki/Metro_%28design_language%29
[2]: http://www.microsoft.com/design/toolbox/tutorials/windows-ph...
There are none. Web design trends like flat design are fashion.
(Anecdotally) For someone non technical, change is usually bad when it comes to interfaces. I think that simple and "easy to understand" is a great direction and have tried using flat and "ios7 color&font weight differentiated buttons" in some recent projects. I have seen teething issues when moving towards UIs where the visual definition of a button does not include some "quasi-3d" aspect. Simply differentiating by text or background color makes a lot of users apprehensive about touching things, afraid they will produce an unexpected or unwanted result. I've seen them adapt rather quickly, but there has always been some 'what do I press?' stage. Not exactly test data, but the results have been pretty consistent.
EDIT: I should note that usually adding a stroke to just the bottom edge of a clickable button or a slight shadow/gradient usually helps. You can see this style in a lot of recent google products and I think it works really well (and I bet they tested it before deploying!). This method allows you to remove or tone down the shadows/gradients/textures from your navbars and other items without having them feel disconnected from your buttons.
There was a time that some believed removing the underline from links was nothing but a design led trend and a move in the wrong direction. People figured it out, adjusted, and no site missed a beat.
If it were a bunch of separate modules you could individually include and use as a template for your own style, you could actually use the parts you need: as it is, I really don't understand the hype.
Also yes you can use only bits of it if you want, just click Customize.
Version 3 is very modular. You can compile the LESS files yourself and include only what you need.
Also, bootstrap uses normalize now, not reset. This poster should make a little more effort to understand before criticizing. It's obviously a useful framework as many find it very useful. Coding and html css for a complex is not something a developer wants to do unless they have very, very good expertise in front end development. I think bootstrap is great for developers who aren't front end experts, but aren't necessarily bad developers. Maybe specializing in back end work, database, web server side stuff. Using bootstrap frees you up to focus on things that matter more for your app, and you don't have to worry about typography, typeahead, grid systems, etc. It's one of many options that satisfy this need, such as Zurb's Foundation.
As to modularity: I'm happy they're addressing part of the problem, but it's really only part of the problem. Fundamentally, these "modules" are NOT modules: they don't provide and encapsulation layer since you still need to interact with them heavily. (unless you don't want to do any styling at all, ever.)
If you will, bootstrap is a set of templates, and it would work a lot better if they packaged it as such. It's not a library, nor a module: the insides of the abstractions leak out all over the place.
I guess if you don't know css I can imagine it's a godsend: bunt frankly, basic css isn't that hard, and most of boostrap is easy to duplicate with basic css (except perhaps the media queries).
Anyhow, I don't think bootstrap doesn't have good stuff; I think the way it's presented as some kind of "system" is a bad idea. It's doesn't work well as a system. It works well as a basis when someone takes the time to pick and choose what they need.
You can't just take bootstrap AND some other css, use them both together, and expect both to work orthogonally without a lot of care. They will stomp on each others selectors and you'll have a specificity war on your hands. How can you make this work? By actually picking, the bits you need, and doing more than a modular concatenation with whatever other css you need.
Basically: it's a great css example, not an encapsulated, finished module.
When you say: "No one knows that site is bootstrap until I tell them we used it" that tells me you customized it, and that's exactly how it should be. It's not a reusable component, it's a customizable template.
https://github.com/twbs/bootstrap/tree/3.0.0-wip/less
If you have the money and use for a real design, bootstrap is probably not for you. It doesn't really integrates in your own design, it's just a better default.
For anything beyond that you are better off with yui/pure or csswizardry/inuit which offer much better responsive grid systems. Pure has one shortcoming in that you can't specify varying column widths for varying devices (such as 6 columns for desktop and 3 for mobile). Both frameworks are light and offer some decent UI elements with minimal styling so you can extend them.
It's not rocket science, it's HTML and CSS, and you don't need a framework to have uniformity or responsiveness.
Your site could be made up of a bunch of jquery plugins too, and stock library graphics, and is your content rehashed too?
div class=span4 is nothing more than a table-based layout in disguise. Spans and rows are not inherent to divs. You're adding a layer of new rules that doesn't complement the technology you're adding to. You may as well be building with an old fashioned table based layout.
When I view source of some of the flagship bootstrap examples, I see stuff like this... empty divs either side of the logo graphic. I remember doing stuff like this with tables back in the 90s. Spacer gifs inside the empty table cells. But in this case, it's a class.
<div class=span4></div> <div class=span4>logo</div> <div class=span4></div>
People write terrible code in bootstrap, django, backbone, etc. Even within the confines of a framework, man will always find a way to write shit code. It is one of the constants of our universe.
<div class="span4 offset4">logo</div>
Well if you don't want to design using a grid then I don't think it really makes sense to use bootstrap as it's main point is the grid system. Poorly made? They seem to have made a lot of improvement and is now pretty close to the Fundation one.
> an excessive (and unnecessary) css reset
imo it misses box-sizing: border-box, the default css values are really bad and a reset of any kind is always welcome.
> lots of default styling you're probably going to replace anyhow
But this is more and more the point of bootstrap, the default styling allows you to focus on the code when you're not a designer.
For me, it helps me build a quick prototype of my projects and avoid designing administration that I will be the only one to see.
Simply: The grid is hard-coded to be 12 columns.
If you want more or less, then you need to adjust less/grid.css manually and reflect that in column count within less/variables.css and use grunt to rebuild.
Aside from the generation of custom grids being broken, no complaints about the rest and we've been following the bleeding edge for several months now and it's been fine. Yeah a couple of things have broken, but every change has been an improvement and that's a good thing.