Twitter’s Bootstrap has taken off like a rocket since its release. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to a number of websites.
The Changes
This is not a drop-in upgrade to 2.3. In fact, if you just swap out the CSS and JS with this new version, it’s quite likely that the majority of the site will be broken. There are NUMEROUS breaking changes in this version, so you might as well start fresh.
Check out this document, which is being continually updated as changes are made. The main documentation is also updated to show off version 3′s features.
I must confess I am obesessd with Twitter Bootstrap and even more with its 3rd release. Cleaner more robust and better to handle.
Changes in Twitter Bootstrap 3
The most important changes in Twitter Bootstrap 3 are the mobile-first approach and the grid. From now Twitter Bootstrap 3 defines three grids: Extra small (xs) grid for Phones (=992px) and the Large grid for Desktops.
I was messing around with it and think it is possible to summarize most of the changes in Twitter Bootstrap 3:
- The core repository has been cleaned
- Less conflict in JavaScript
For instance, in the past conflicts with other frameworks occured during the use of TinyMCE. So the solution to load TinyMCE BEFORE jQuery has been around for a while:
tinyMCE.init({ mode : "none"});
$(document).ready(function() {
$('textarea.tinymce').tinymce({
theme : "simple",
script_url : 'tiny_mce/tiny_mce.js',
});
});
- LESS component classes are mixin-friendly (LESS allows for nested selectors. Make use of this to encapsulate each component. I’ve found this to be a big help in keeping code tidy and readable.)
An example:
.navbar {
.brand {
color: @white;
}
.nav > li > a {
color: @grayLighter;
}
}
- New component: List groups
- New component: Panels
Panel with heading
- Mobile-first: There is no separate responsive stylesheet.
- Grid system improved to mobile-first
- Heading classes are not supported
- Add support for responsive utility classes on table elements
- That also includes better buttons
- Slightly more complex input groups
- Major changes in forms
- Glyphicons is now a font. No more PNGs.
- Dropdowns now supported in button groups
- Hero unit is now called Jumbotron
- Improvements in navbar
- Progress bars, now support change of colors, more semantic
- Modals are mobile-first
If you want to read it more about it, Weblog Bass Jobsen is doing a great job to explain the major changes in the current release.
Clean Style
Bootstrap puts its focus more on structure and allow you to add in your own style without having to override the default styles. It also seems that Twitter Bootstrap 3 is becoming flatter. Take a look at the buttons, for instance. The buttons are with a solid color and come without gradients or shadows. There’s an inset shadow when the button is active. Also, Twitter Bootstrap 3 removed the “inverted” button style and instead made the default button style a very dark gray, or black; you name it.
The new version makes all buttons equal because none of the buttons really feel secondary anymore. They all pop out and that can be a bit problematic. There is an issue started that is trying to get a btn-secondary class added so we can have a lighter colored button that won’t stick out so much. I’m all for this, and if you agree, you should go put your word in to make sure this happens.
JavaScript Changes
There aren’t a whole lot of changes to JavaScript in Twitter Bootstrap 3, though there are a few changes that are related to JavaScript. They removed a friend, made some changes to Modals and Carousels, and added better Bower support.
Tips in case you are not familiar with Twitter Bootstrap
- Get to know Bootstrap.
Read the official documentation, familiarize yourself with all of the components, and learn the ins and outs of the source. If you will be regularly customizing Bootstrap, then the time you invest here will pay off down the line. - Variables first.
Whether you’re using a generator or editing the source, begin your modifications with the supported variables. You might discover that they’re sufficient for your needs. Just changing the navigation bar and basic colors is a huge start. - Pick your palette.
Think about your website’s color scheme, particularly your primary and secondary accent colors. Some good resources are out there to help you with this. After you’ve decided on a palette, set up and use these colors as variables. You shouldn’t be seeing hex codes sprinkled throughout your code.