Best New Features in Bootstrap 3.0

bootstrap-comparison

bootstrap-horizontal-compare

Bootstrap 3.0 RC1 is looking great and I’m so happy to say that it’s a great transition and it looks MUCH better than Bootstrap 2.x.

I feel that overall, BS3 is joining the modern and final-design agnostic chapter of its existence. The flat UI open up everyone to build on top of it, as it should be, rather than tear existing effects down.

And look at the colors, too! BS3 looks much brighter than the darkness of BS2.3.x. This is a major shift from the default they’ve kept while developing Bootstrap. My regular readers will recognize the difference right away, and the non-regulars can easily checkout my tutorial on creating a Kirby CMS theme with Bootstrap 3.0 WIP.

Enjoy!

What’s new and better

Flatter and cleaner UI (buttons and menu!)

buttons-bootstrap

 

bootstrap-nav

The Bootstrap 2.0 look swept the internet with a craze of super simple apps and a unified interface. I blatantly advocated against it once I realized I could not tell one from the other. Since then, UI kits, skins, and theme marketplaces have sprung up to curb the overuse of barrel-like full-width top menu, and the plastic-y buttons, and much more. The web looks great now. Non-bootstrap frameworks have adopted some features but opted out for their own unique look.

Bootstrap 3 took it to another level. Not only did it update its look to be more trend-agnostic with its flat look but it also presents its own theme for documentation with its purple colors and its purple navigation bar. I think that this will REALLY encourage people to experiment and rebrand bootstrap to their own liking.

It’s pretty neat. It makes Bootstrap behave nicely across devices as well as browsers. Meaning that even IE8 and IE9 get a beauty treatment from BS3.

Best of all, I’m personally not forced to augment shadows and dig through the code base to correct the past look of it.

One more thing, Bootstrap 3.0 also has happier colors! It’s like waking up from the darkness of web that Bootstrap 2.x was!

Reset Via Normalize

It has come to my attention that Bootstrap has been using Normalize since their first release. I never noticed it before, I guess.

Foundation’s been using Normalize for a while and other frameworks have started to adopt the same. I’m glad Bootstrap is jumping on as well. This is how pseudo-web-standards are made. Big players like Foundation and Bootstrap can make a fundamental shift in how we code.

By using Normalize as the “reset” stylesheet, these frameworks are able to code on a clean slate. Not only that but making cross-browser changes is much simpler. The reset code is extremely small and it’s a great balance between over declaring elements and not resetting enough. :)

Glyphicons

Finally separate so that you can plug in your own solution, glyphicons are no longer part of the base code. Not only that but Bootstrap finally converted to an icon font rather than using its old sprite system.

This was a big deal. Everyone I know used to plug in their own solution and some Bootstrap generators would pre-package Bootstrap with extensions the likes of Font Awesome.

So wait, does this mean that extensions like font awesome are dead? No, not at all. Font Awesome has animations and way more icons. However, glyphicons being a default will give rise to a new trend since..wait for it..the icons got a redesign and the font features some new interesting pieces:

glyphicons

 

Right off the bat, I’m sure you’ll notice the sorting icons on the bottom right. You may also notice the pointer hands two rows above. I do wonder how this will impact the internet as a whole, given that Bootstrap has become somewhat of a trend setter due to its widespread use.

New Grid System

bootstrap-grid

The grid system is largely reminiscent of Foundation’s grid. The grid is no longer the linear and generic 12 column layout that collapse to 1 column when the browser’s width is shrunk.

The new grid system now allows for variable declarations according to device size. So for example you can have a 4 column content layout that collapses to 2 column / 2 column for tablets and a single column layout for phones. This gives you great power because you can control your site’s look across devices more granularly.

Want less power? No problem, there is a generic column class that you can use which will work the same way as previous bootstrap iterations. However, mind the new syntax!

Form Layouts According to Cols, no more controls!

With the redefined column setups comes another perk. Bootstrap finally got rid of its form control classes. Remember those pesky

<div class="control-group">
    <label class="control-label">
 <div class="controls">
     <input type="text">
 </div>
</div>

So that’s gone and you’re expected to use regular grid classes. Which is great. Syntax is cleaner and makes more sense. Plus, you get more control over the look of your form and the ratio between labels and input fields.

This example would look like this in BS3:

<div class="row">
  <div class="col-4">
    <label>
  </div>
  <div class="col-8">
   <input type="text">
  </div>
</div>

List Groups

List group is a new component under bootstrap which is a pretty big thing for me. I’ve written before about how I had to create my own custom CSS framework to be able to easily prototype things like feeds, statuses, link lists etc. well, bootstrap somewhat took care of me here.

bootstrap-list-groups

 

You see with custom content list groups, you can easily prototype a reddit clone, comments, and other elements. This show you just how much Bootstrap has progressed toward becoming the ultimate prototyping CSS framework.

Contextual Panels

Hopefully a future replacement for regular error pop-ups, contextual panels give color to the entire framework. Seriously. Well, that and colored quotes that you can find anywhere.

Bootstrap took its coloring system more seriously and styled its elements to accommodate the coloring, whether it’s for a warning, to inform or otherwise.

Again, this is an awesome addition mirroring what Foundation was already able to do. I’m very happy that the two frameworks are somewhat working off each other to advance.

contextual-panels

 

Row Mixins (updated 8/1/2013)

One thing I neglected to mention was the usage of mixins in Bootstrap changed in terms of grids. You can now easily create your own grid, or rip out the grid and define only what sections you need (for ex. content + sidebar instead of a full 12 col layout). In addition to doing this, you can also specify break points for your fluid rows. Here’s the code that Bootstrap uses:

mixins

 

You can specify various variables that modify the behavior of these mixins, namely @grid-float-breakpoint, @grid-columns, and @grid-gutter-width. So let’s say I wanted to recreate the layout of my particular site. I could do this:

@grid-float-breakpoints: 768px
@grid-columns: 16
//I like 16 col layouts
@grid-gutter-width: 20px

#wrap {
  .make-row();
}

#header {
  .make-column(3);
}

#inner {
 .make-column(13);
}

.content-sidebar-wrap {
 .make-row();
}

#content {
 .make-column(12);
}

#sidebar {
 .make-column(4);
}

Okay, so, my site is a little weird in terms of structure (I’m using Genesis) but you get the idea. No need for a grid. And again, you can make your own grid very easily. Specify better breakpoints etc. It gives you unprecedented power over your site structure and creating your own site layouts.

But it’s just RC1

Yep, it’s just release candidate 1. Bootstrap announced that they will be releasing RC2 after they get some feedback and then they’ll be ready to do a final launch!

Comments

  1. Great article and overview of what’s new in v3!! I’ve also been playing with it and have posted some migration guidance here http://bootply.com/migrate-to-bootstrap-3

    Thanks again for the best BS 3 article I’ve read so far.

  2. Good post but it’s amazing that you managed to publish an entire page about an upcoming major version without even once providing a link to the Bootstrap site itself. O_o

  3. Looks like few stuffs have been simplified.
    Oh finally Bootstrap is following the trend of flat design, good to know that.

  4. Šime Vidas says:

    I’d put an outline on the images. They blend into the article too much.

Trackbacks

  1. [...] Bootstrap 3.0 RC1 is finally here. So what's changed? What's better?  [...]

  2. […] ?????Best New Features in Bootstrap 3.0 […]

Add Your Comment