• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Comparing Bootstrap and Foundation, Version 2
 

Comparing Bootstrap and Foundation, Version 2

on

  • 1,459 views

Bootstrap and Foundation Compared ...

Bootstrap and Foundation Compared

If you hear discussion of responsive design frameworks, Bootstrap and Foundation are bound to enter the conversation. What are these HTML5/CSS3/Javascript/jQuery frameworks and what problems do they solve? Why are they helpful? What are the downsides to using frameworks? Jen Kramer will address these questions and then compare Bootstrap and Foundation, so you'll have a sense of what might work best for your next responsive design project.

Statistics

Views

Total Views
1,459
Views on SlideShare
1,302
Embed Views
157

Actions

Likes
2
Downloads
31
Comments
0

7 Embeds 157

http://html5devconf.com 76
http://librosweb.es 45
http://responsivedesignframeworks.com 26
http://www.html5devconf.com 4
http://localhost 3
http://responsivedesignframeworks.org 2
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Comparing Bootstrap and Foundation, Version 2 Comparing Bootstrap and Foundation, Version 2 Presentation Transcript

    •   Jen Kramer • Web & PHP Conference • August 18, 2013
    •  Grounding in mobile techniques  Background on responsive design  Introduce Bootstrap and Foundation  Compare Bootstrap and Foundation  Declare a winner!!!
    • www.jenkramer.org • jen@jenkramer.org
    •  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile- optimized websites www.jenkramer.org • jen@jenkramer.org
    •  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  www.alistapart.com/articles/responsive-web-design/ www.jenkramer.org • jen@jenkramer.org
    •  Images should change size, based on screen resolution o Load a big image and let it scale (not good) o Server-side (good) o Client-side: Load several images and display the one right for this resolution (not good) o Client-side: let JavaScript decide (better)
    •  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
    • 
    •  While the back-end world has been developing tools and API’s, the front-end world has been custom or off-the-shelf. There has been no middle ground. www.jenkramer.org • jen@jenkramer.org
    •  Some of the work is done for you – including debugging!  You can still customize what you get.  It doesn’t have to look like a Bootstrap/Foundation site.  The code may be more than you would create custom… but how much time/money did you save?
    • getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering www.jenkramer.org • jen@jenkramer.org
    •  I am a lynda.com author, and I have recorded video training titles on both frameworks.  I am currently writing a book on Bootstrap 3.  I do not work for or contribute to the coding of either project.  I have no insight into either project other than what’s publicly available for both projects.  I think both frameworks are awesome and amazing in their own right and are appropriate for different situations and different skillsets.
    •  Jen’s spreadsheet comparing Bootstrap and Foundation  Based on documentation sites for Bootstrap and Foundation.
    •  Twitter Bootstrap is the most popular responsive design framework for building web sites and web applications.  It is the most popular project in GitHub and is used by NASA and MSNBC among others. wikipedia.org/wiki/Twitter_Bootstrap www.jenkramer.org • jen@jenkramer.org
    •  A fully functional grid system with 4 different sizes.  Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.  CSS customization through LESS CSS  jQuery-driven components include dropdown menus, tooltips, popovers, alerts, image carousel, accordion panels, etc.  Optional icon font for incorporating vector images, distributed with Bootstrap, 180 icons  Distributed under Apache 2, copyright 2013 Twitter www.jenkramer.org • jen@jenkramer.org
    •  ZURB Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.  It is the 13th most starred project in all of GitHub and is used by National Geographic Education, PBS, and Pixar Projection. www.jenkramer.org • jen@jenkramer.org
    •  A fully functional grid system with 3 different sizes plus a block grid.  Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.  CSS customization via Sass and Compass  jQuery-driven components include dropdown menus, tooltips, popovers, image carousel, site tour, etc.  Custom icon font for incorporating vector images available as a separate download  Distributed under MIT license www.jenkramer.org • jen@jenkramer.org
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap Latest versions of: Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only, as Windows has more or less been discontinued) Firefox (Mac, Windows) Opera (Mac, Windows) IE 9 and 10. IE 8 supported with respond.js Foundation Latest versions of Chrome, Firefox, Safari iOS (iPhone and iPad) Android 2, 4 (tablet and phone) Windows Phone 7+ Surface IE 9 and 10. IE 8 supported with additional grid code (provided on site as a gist)
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap  Some effort put into accessibility improvements  Includes the Aria codes, screen reader only styles  Joomla has pushed for accessibility since Bootstrap is incorporated in the version 3 CMS Foundation
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap  4 grid system: o Extra small always stays horizontal o Small, medium, large grids stack after breakpoint Foundation  3 grid system: o Small always stays horizontal o Medium, large grids stack after breakpoint  Can center columns on the page
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap  There is a TON of stuff that’s styled  No right-to-left support  Specific to Bootstrap: o Jumbotron o Media object o Media List o Well Foundation  In general there is LESS styling out of the box o But that’s less to override later  Right-to-left support  Specific to Foundation: o Pricing Tables o Keystrokes
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap  LESS CSS  Not much LESS documentation on Bootstrap site  Less of an expectation that you will work with LESS  No official training available Foundation  Sass plus Compass (can run without Compass)  Extensive Sass documentation  Expectation that you will style with Sass  ZURB offers training for working with Sass (and Foundation)
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap  Affix: fixes element in place while page scrolls  ScrollSpy: Updates nav bar with current position on page Foundation  HTML5 form validation library (Abide)  Responsive lightbox (Clearing)  Site tour (Joyride)  Responsive image scheme: Interchange loads correct individual image for screen resolution, including Retina images
    • www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap Foundation
    • CAN THERE BE ONLY ONE?
    •  You need lots of styling out of the box.  You don’t necessarily want to change a lot of styling.  You love LESS CSS.  You need one of the unique characteristics.  You hate semicolons in your JavaScript. www.jenkramer.org • jen@jenkramer.org
    •  You don’t want a ton of styling you have to override later.  You’re going to write a lot of styles later anyway.  You love Sass/Compass.  You need one of the unique characteristics.  You love semicolons in your JavaScript. www.jenkramer.org • jen@jenkramer.org
    • Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen www.jenkramer.org • jen@jenkramer.org Slides available at www.slideshare.net/jen4web