Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Comparision between Bootstrap and Foundation Framework

    @rakesh.pant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 252
    Comment on it

    Cheat-Sheet for Comparison between Bootstrap and Foundation Classes and Elements

    Introduction of Bootstrap and Foundation

    Bootstrap and foundation frameworks are very well known font-end framework for Responsive prototype Design. If we are talking about running scenario, Responsive designs are widely used in terms of usability in all the devices. Both the frameworks come with the ready-to-use elements that increase productivity and speed up the prototype work.

    Bootstrap Framework, was build up by the Twitter group in mid-2010 and originally released on August 2011 and also provided 20 over releases including major 2 versions (v2 and V3).

    Foundation Framework was created by a team of Zurb, a product design company in Campbell, CA.

    Both the frameworks have its own features and importance or uniqueness. We are not discussing the level of both the frameworks, here we are only discussing the comparisons.

    Below, we provided the list of comparison between Bootstrap and Foundation.

    1.   Comparison in Media Queries

    Media Queries are the relevant element in Responsive Designs. Both the frameworks have different media style.

    Bootstrap Media Table

    Screens

    Class-Prefix

    View-port Size

    Width

    Extra Small Screens

    .col-xs-*

    <768px

    auto

    Small Screens

    .col-sm-*

    768px

    750px

    Medium Screens

    .col-md-*

    992px

    970px

    Large Screens

    .col-lg-*

    1200px

    1170px

    Foundation Media Table

    Screens

    		 Class Prefix
    (Default Grid)     		Class Prefix
    (Block Grid)

    View-port Size

    Small Screens

    .small-* .column(s)

    .small-block-grid-*

    40em (640px)

    Medium Screens

    .medium-* .column(s)

    .medium-block-grid-*

    40.063em (641px)

    Large Screens

    .large-* .column(s)

    .large-block-grid-*

    64.063em (1025px)

    2.   Comparison in Define Classes

    => For Normal Define Classes

    Attributes

    Bootstrap Classes

    Foundation Classes

    Alert

    .alert .alert-success .alert-danger .alert-info

    .alert-box .success .warning .info .round .radius .secondary

    Buttons

    .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block

    .button .tiny .small .large .secondary .success .alert .radius .round .disabled .expand

    Lists

    .list-unstyled .list-inline

    .inline-list (will unstyle it also)

    Labels

    .label .label-default .label-primary .label-success .label-info .label-warning .label-danger

    .label .success .alert .secondary .round .radius

    Tables

    .table .table-striped .table-hover .table-bordered .table-condensed .active .success .info .warning .danger

    Tables are automatically formatted with borders, stripes, and headers. No extra style classes given.

    Panels

    .panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger

    .panel .callout .radius No other colors provided and no syntax for having a header and body of the panel.

    Progress Bars

    .progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active

    .progress .small-* .large-* .secondary .success .alert .radius .round

    Text Utilities

    .text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text-warning .text-danger

    .text-left .text-right .text-center .text-justify .small-text-left (also works for medium, large, xlarge)

    .small-only-text-left (also works for medium, large, xlarge)


    .small-text-center (also works for medium, large, xlarge)

    .small-only-text-center (also works for medium, large, xlarge)

    .small-text-right (also works for medium, large, xlarge)

    .small-only-text-right (also works for medium, large, xlarge)

    .small-text-justify (also works for medium, large, xlarge)

    .small-only-text-justify (also works for medium, large, xlarge)

    Visiblity Classes

    .visible-*-block .visible-*-inline


    .visible-*-inline-block .hidden-xs


    .hidden-sm .hidden-md .hidden-lg

    .show-for-small-only (medium, large, xlarge, xxlarge)

    .show-for-small-up (medium, large, xlarge, xxlarge)

    .hide-for-small-only (medium, large, xlarge, xxlarge)

    .hide-for-small-up (medium, large, xlarge, xxlarge)

    .show-for-landscape .show-for-portrait .show-for-touch .hide-for-touch .hidden-for-small-only (medium, large, xlarge, xxlarge)

    .hidden-for-medium-up (large, xlarge, xxlarge) .visible-for-small-only (medium, large, xlarge, xxlarge)

    .visible-for-medium-up (large, xlarge, xxlarge)

    => For Grid Classes

    Bootstrap

    Foundation

    .container

    .container-fluid

    .row

    .col-xs-*

    .col-sm-*

    .col-md-*

    .col-lg-*

    .col-xs-offset-*

    .col-sm-offset-*

    .col-md-offset-*

    .col-lg-offset-*

    .row

    .columns

    .small-*

    .medium-*

    .large-*

    .small-offset-*

    .medium-offset-*

    .large-offset-*

    3.  Other points of differences

    Points of Difference

    Bootstrap

    Foundation

    Website

    getbootstrap.com

    foundation.zurb.com

    Version

    3.3.4

    5.5.2

    Date of last release

    March 16, 2015

    April 30, 2015

    Browser Support

    - Chrome (Mac, Windows, iOS, and Android)

    - Safari (Mac and iOS only)

    - Firefox (Mac and Windows)

    - Opera (Mac and Windows)

    - IE8+

    - Chrome (Mac, Windows, iOS, and Android)

    - Safari (Mac and iOS only)

    - Firefox (Mac and Windows)

    - Opera (Mac and Windows)

    - IE9+

    Sizing units

    Pixels

    rems

    LESS

    Yes

    No

    SASS/SCSS

    Yes

    Yes

    File size

    14 files at 1019 KB

    30 files at 936 KB

    Grid setup

    12 column layout-Fluid and fixed

    12 column layout-Fluid, block and centering available

    Conclusion

    In the end, we understand that front-end Frameworks usage is popularly ideal for the people who want to build quickly and elegantly. Both the frameworks (Bootstraps and Foundation) is very widely known and usable just because of frameworks unique features.

    As we figure out that various unique templates using Bootstrap or Foundation. So It's all up to the Front-end Developer to use any of the frameworks.

    HTML Frameworks CSS Frameworks Bootstr Bootstrap vs Foundation Bootstrap Foundation Cheat-sheet
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: