Tuesday, March 12, 2013

Bootstrap 3 is now Mobile First

Bootstrap 3 a complete rewrite of the docs, CSS, and JavaScript.  Here are some of the major improvements:

  • Mobile First Design
    • Responsive CSS is no longer separate and all responsive features are now compiled into the core bootstrap.css file
    • Horizontal forms are now mobile-first, meaning at <768px, elements are stacked. Above that, elements are floated and appear side-by-side
    • Refactor responsive-utilities.less to account for new mobile-first approach
  • Dropping IE7 and FF3.6 support, combining standard and responsive CSS into a single file, and consolidating additional code as appropriate.
  • Docs templates are built with Jekyll instead of Mustache
  • LESS changes 
    • Rename variables to use dashes instead of camelCase
    • Replace existing color variables, e.g., @blue, with symantic, e.g., @brand-primary
    • Remove .border-radius() mixins
    • Change name of clearfix mixin
      • Mixin itself is now .clear_float() and class is .clearfix
    • .opacity() mixin now uses decimal values instead of whole numbers
  • Simplify Layout and grid system (single grid system again)
  • Form controls are now 100% width by default, input groups have been overhauled, and form states simplified.
  • Font icons! Converted to Glyphicons v1.7 @font-face, dropping the old PNGs
  • Differentiated the labels and badges 
    • badges no longer have modifier classes and are purely meant as unread counters.
  • Jumbotron (formerly hero-unit)
    • improved styling for mobile viewports
  • Navbar improvements
    • Keeping .navbar-for, dropping .navbar-search form layout
    • Overhaul styles of default navbar
    • Update active state of nav links for mobile view
    • Lots of overrides, extra styles, and more
  • Redesign the modals to be mobile-first
    • No longer require use of .hide
  • Drop the .thumbnails meta component.
  • Redesigned Carosel
  • Redesinged Customizer (highlight depenencies)
  • Updated Makefile to reflect the changes to the docs build process (namely Jekyll)
Note that gradients and other embellishments have temporarily been removed, which produces a flat look and feel.

Get Bootstrap 3 Now

You can go here to check out the release candidate: http://rc.getbootstrap.com/

-- or -- just download it directly here:  https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip



Sponsor Ads(Please visit one if you liked this article. Thanks!)

1 comment:

  1. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    Melbourne Web Designer