List of all cross-browser gotchas from the Bootstrap site:
- Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
- IE and Safari don't actually support the <disabled> attribute on a <fieldset>
- Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
- If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
- Keep in mind that Internet Explorer 8 lacks support for rounded corners.
- Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
- Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
- Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
It would be nice to see if any progress is being made on these.
Bears repeting: IE8 is at < 8% global share, < 5% in many markets, and effectively 0% for any tech-related business. Google has dropped support almost a year ago. Mobile and Safari are way bigger concerns.
Careful now. If your user base is "normal" people it might be substantially more than that.
One site I run is a local news site (East Coast, USA) that does a fair amount of traffic (~10M pages, ~500k visitors monthly), and IE8 is still hovering around 13% for us, with IE7 at just over 2%. In fact, IE8 > IE9, by a fair margin. The good news is that IE share overall is down substantially.
The industry I'm in has very non-technical users and businesses. Last time I checked our telemetry it was reporting that 40% of our customers were on XP and 30% used IE8.
Personally: I'm quite unfamiliar with Foundation so I'd go with Bootstrap 2 or 3. If I had to do it for work I'd go with BS2 because it's stable. Otherwise BS3.
Thanks for the advice. GAnalytics shows 3% IE7 users on a couple of my sites, and nearly 3% for IE6 on one of them =\ I'd rather support IE7 than not, so I'll go with BS2.
Of course, it depends on your location and user base. The US has a slightly higher percentage of IE users, and countries like Korea, Japan and China still have IE as the #1 browser. Check your stats before making any decisions.
note: IE8 is only beating IE9 right now because of automatic updates moving people to IE10 (finally!).
that was my initial thought earlier this month as well and went on preparing to get rid of IE7 support for our specialised cms' backend. until i found out that some of our best-paying corporate customers are still using IE7.
our lesson learned: it's not the quantity that is important here, but rather who is still (stuck) using older browsers - "don't bite the hand that feeds you".
These are pretty minimal for most of the work I do, but what would be nice is if they had a separate section in the docs that tracked all the cross-browser gotchas in one place (let me know if that already exists and I missed it). We are fine with abandoning IE 8. 4% of our user base uses IE8, and I think by 8-12 months from now that will have dropped to below 1-2%. Any major features that don't work, we can workaround (like using respond.js to support media queries on ie, or hacks to support placeholder attribute in IE, etc).
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.
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).
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 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.
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!
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 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?
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.
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
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.
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
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.
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/
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.
I think Flat design is good from one perspective - easier to win client acceptance. The original Bootstrap is so familiar to everyone.
Even non designers have a Deja Vu feeling - "Oh, this is a very cookie cutter look. Can we get something more distinctive?". Of course there are excellent sites [1] which help in tweaking the base design but takes a lot of work.
Flat designs can be much more easily customized and developers can spend more time focussing on the functionality than the design.
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
The modal is still not responsive. I've been using http://jschr.github.io/bootstrap-modal/ and am kind of disappointed that the new version isn't improving existing widgets like this.
Actually it is—it might behave perfectly right now, but the intent is that it is mobile-first and responsive like nearly every other component. If you're running into problems, let us know though via issues. <3
I'm happy about the mobile first approach. Simple things like 100% button widths is great. This was a modification I had to make to every Bootstrap site I built. I like the idea of having a single CDN for it too. Nice work.
The main problem I'm having with the bootstrap flat design is how to difference between button and (e.g.) labels/badges.
In the previous version (2.x..) it was pretty clear for the user that a button was a button...
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...
just tried replacing the css files with the new ones , navigation and many things broke ..but any how I like it, I will integrate it after checking out docs ..
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.
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.
> 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.
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 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.
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.
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.
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.
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.
- Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.
- IE and Safari don't actually support the <disabled> attribute on a <fieldset>
- Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
- If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
- Keep in mind that Internet Explorer 8 lacks support for rounded corners.
- Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
- Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
- Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
It would be nice to see if any progress is being made on these.