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

References

https://news.ycombinator.com/item?id=5351632
http://jekyllrb.com/
http://expo.getbootstrap.com/
https://github.com/twitter/bootstrap/pull/6342

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

4 comments:

  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

    ReplyDelete
  2. Good article, but it would be better if in future you can share more about this subject. Keep posting.

    ReplyDelete
  3. Great blog. All posts have something to learn. Your work is very good and i appreciate you and hopping for some more informative posts. Install Your Snippet code

    ReplyDelete