Twitter Bootstrap 3: New Release Preview – Mobile First

The popular framework created by two Twitter employees some years ago, Twitter Bootstrap, reached huge success on the internet because it helps designers build websites faster and helps them a lot on their way to become better at what they do.

Twitter Bootstrap is a free collection of tools containing HTML and CSS-based templates for forms, charts, buttons, typography, navigation and other user interface components. They also have some optional JavaScript extensions, but these are not the main features. If you want to know how popular it actually is, ask NASA or MSNBC; both of them have side websites built on Bootstrap.

Unfortunately Bootstrap has relatively incomplete support for the latest technologies, HTML5 and CSS3, but the good part is that it is compatible with all major browsers. The second Bootstrap version supports responsive design as well, meaning that all their frameworks can automatically adjust to different screens on different operating systems.

Twitter Bootstrap is the most popular project on GitHub and it is open-source, which means that everybody is encouraged to contribute and help improve the framework. So just as a side note, if you have the required knowledge, the guys from Bootstrap are always in need of some help.

Some time ago we actually showed you a collection of elegant websites built on the Bootstrap framework, and you can go back and read the article here. Sure, there are many more right now, including Designmodo’s free Flat UI pack which you can find here.

The framework is modular and it is based on LESS stylesheets that implement various components of the toolkit. Developers can select the components they want to use and are not forced to use all of them, which means they can reduce the size of their files considerably – this leads to fast-loading websites and happier visitors.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Bootstrap 3.0

Bootstrap 3.0

Few days ago Twitter announced Bootstrap would release their newest version very soon, labeled 3.0, as it is their third major release. In order to make designers stay tuned, they released an early look at what to expect from the new framework.

An article published back in December made clear what the Bootstrap team works on for the new major update and the announced improvements were these:

  • Change the Bootstrap URL
  • Compile all LESS code, as well as the responsive styles, all in a single CSS file
  • Drop support for IE7
  • Switch to the MIT license instead of the Apache
  • Drop the *-wip branch style of development
  • Accelerate versioning
  • Improve responsive CSS
  • Centralize community efforts

However, many more features have been announced for the actual 3.0 release which is yet to come. The framework is now labeled as “mobile first”. The release has been totally rewritten to be mobile friendly from the beginning and instead of adding optional mobile styles as before, in the new Bootstrap they will be available into the core code. These mobile styles will not be in separate files anymore, but in the library, which makes using Bootstrap even easier than before.

Some other actual changes include converting docs to Jekyll instead of Mustache, redoing illustrations, updating example screenshots to be retina-ready, redesigning icons preview, updating all examples to reflect changes in the markup, but also improvements for the JavaScript area: overhauling CSS transitions and reinforcing with JavaScript modules as necessary, improving noConflict throughout plugins and name-spacing events to reduce conflict issues.

Let’s now look at some of the most important improvements that were actually introduced in Bootstrap 3.0:

  • Colors such as @blue or @orange were removed, but they were not used that much anyway.
  • In order to match CSS patterns, the .opacity () mixin uses now decimal values instead of whole numbers.
  • The grid systems are fluid by default.
  • The @altFontFamily variable is removed.
  • Regarding forms, .form-search and .controls-row are removed.
  • Dropdowns are now allowed within button groups.
  • The .nav-list option is now modified to make it look like the BS2 sidenav.
  • Support for .navbar-search has been dropped.
  • The .btn-navbar variable is now called .navbar-toggle
  • The framework is tested on iOS5 and on Android devices, including on native Chrome browsers.

Bootstrap 3.0 comes with lots and lots of new features and it would take a very long time for me to talk about all of them, but the I have mentioned the most important above, so at least you have a place where to start from.

There are some solid overhauls in the layout and grid system, typefaces, tables, images, buttons, forms, icons, navigation and in the customizer. You can see every and each one of the new features here.

We do not know yet when Bootstrap 3.0 will be fully released, but its current Release Candidate version has been out for some days and you can jump straight into it. The fact that the RC has already been release tells us that it will not be a lot of time until the final release will be out there.

Bootstrap 3.0 comes with huge improvements that will not only ease our web design work, but also the mobile platform design part of it. Such frameworks can’t be easily found on the internet and I believe that there are not many better out there, so go and make use of Bootstrap as much as you can.

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

11 Comments
  1. Max Lynch Mar 12, 10:12 pm

    W00t! Really looking forward to this release. We will be putting this into Jetstrap (http://jetstrap.com/) for our 1.0 soon.

    Not sure how “flat” the final product will be, but I think it’s great since it makes it easier to customize for your brand. That is a good thing for bootstrap going forward.

    Reply
    +6
    • Ryan Belisle Mar 12, 10:55 pm

      I think I read somewhere it’s just ‘flat’ for now during development. They will bring back the default gradients on release.

      Reply
      +4
  2. Terry Harvey Mar 13, 12:51 am

    Skeuomorphic Bootstrap? Cool!

    Reply
    0
  3. pepperstreet Mar 13, 2:41 am

    Mmh, what actually means “dropped support” for some 2.x classes? Users have to check all BS projects and sites for any occurrences? Is there any info about an upgrade path and related issues?

    Reply
    +5
  4. Chad Mar 13, 1:41 pm

    Will the 3.X branch be a drop-in replacement for 2.X; with a few minor tweaks? I’m just wondering how easy it will be to update a project from 2.x to 3.x.

    Reply
    +2
  5. Tobias Mar 13, 7:44 pm

    Any infos about a possible release date? They say “soon”. Does ist mean days, weeks, month?

    Reply
    +3
  6. cythux Mar 17, 9:14 pm

    I wait, for the master version on Github

    Reply
    +3
  7. Alex Apr 16, 8:41 pm

    I absolutely love how frameworks are going Mobile first. So many people on their phones, its wise for a designer to build mobile -> tablet -> monitor. Funny how tech is changing development.

    Reply
    +4

Leave a Reply

*
* Minimum length: 20 characters