



Jen Kramer • TrueNorth PHP • November 8, 2013
 Grounding in mobile techniques
 Background on responsive design
 Introduce Bootstrap and Foundation
 Compare Bootstra...
www.jenkramer.org • jen@jenkramer.org
 Build a separate mobile-

compatible website or
mobile app (or both)
 Responsive Design
 A comparison of methods
for b...
 Defined by three characteristics
o Flexible grid-based layout
o Images that resize
o Media queries (CSS3)

 www.alistap...
 Images should change size,

based on screen resolution
o Load a big image and let it

scale (not good)
o Server-side (go...
 Browser reports screen

resolution
 Based on current width,
serve a stylesheet with
layout for that width
 No JavaScri...



 While

the back-end world
has been developing tools
and API’s, the front-end
world has been custom or
off-the-shelf.
The...
 Some of the work is done for

you – including debugging!
 You can still customize
what you get.
 It doesn’t have to lo...
getbootstrap.com

foundation.zurb.com

15 More Responsive CSS Frameworks Worth Considering

www.jenkramer.org • jen@jenkra...
 I am a lynda.com author, and I have recorded video training

titles on both frameworks.
 I am currently writing a book ...
 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 ...
 A fully functional grid system with 4 different sizes.
 Base CSS includes standardized styling for forms, buttons,

ima...
 ZURB Foundation is an easy

to use, powerful, and
flexible framework for
building prototypes and
production code on any ...
 A fully functional grid system with 3 different sizes plus a

block grid.
 Base CSS includes standardized styling for f...






Bootstrap
Started by Mark Otto and Jacob
Thornton, while working at
Twitter, as internal tool
Released Bootstrap...


Bootstrap
Strictly open source community,
with Otto as benevolent dictator



Foundation
With a company behind this
fr...
Bootstrap

Foundation

Latest versions of:

Latest versions of Chrome, Firefox, Safari

Chrome (Mac, Windows, iOS, and And...




Bootstrap
Some effort put into accessibility
improvements
Includes the Aria codes, screen
reader only styles
Joomla...


Bootstrap
4 grid system:



Foundation
3 grid system:

o Extra small always stays

o Small always stays horizontal

ho...




Bootstrap
There is a TON of stuff that’s
styled
No right-to-left support
Specific to Bootstrap:
o Jumbotron



Fou...
Foundation

Bootstrap





LESS CSS
Not much LESS documentation
on Bootstrap site
Less of an expectation that you
will...



Bootstrap
Affix: fixes element in place
while page scrolls
ScrollSpy: Updates nav bar with
current position on page

...
Bootstrap Carousel
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol...




Bootstrap Carousel
6 methods
2 events
3 data- options

Foundation Orbit
$(document).foundation('orbit', { animation...
Bootstrap

Foundation

www.jenkramer.org • jen@jenkramer.org

‹#›
CAN THERE BE ONLY ONE?
 You need lots of styling out

of the box, without lots of
changes.
 You love LESS CSS.
 You’re OK with a strictly
open...
 You don’t want a ton of

styling you have to override
later.
 You love Sass/Compass.
 You need tech support
and/or tra...
Jen Kramer
Waltham, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org

Slides available at
www.slideshare.net/jen...
Twitter Bootstrap vs ZURB Foundation Version 3
Twitter Bootstrap vs ZURB Foundation Version 3
Twitter Bootstrap vs ZURB Foundation Version 3
Twitter Bootstrap vs ZURB Foundation Version 3
Twitter Bootstrap vs ZURB Foundation Version 3
Twitter Bootstrap vs ZURB Foundation Version 3
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap vs ZURB Foundation Version 3

9,198

Published on

Published in: Technology

Twitter Bootstrap vs ZURB Foundation Version 3

  1. 1.   Jen Kramer • TrueNorth PHP • November 8, 2013
  2. 2.  Grounding in mobile techniques  Background on responsive design  Introduce Bootstrap and Foundation  Compare Bootstrap and Foundation  Declare a winner!!!
  3. 3. www.jenkramer.org • jen@jenkramer.org
  4. 4.  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobileoptimized websites www.jenkramer.org • jen@jenkramer.org
  5. 5.  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
  6. 6.  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)
  7. 7.  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
  8. 8.  
  9. 9.  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
  10. 10.  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?
  11. 11. getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering www.jenkramer.org • jen@jenkramer.org
  12. 12.  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.
  13. 13.  Jen’s spreadsheet comparing Bootstrap and Foundation  Based on documentation sites for Bootstrap and Foundation.
  14. 14.  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
  15. 15.  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 (moving to MIT) www.jenkramer.org • jen@jenkramer.org
  16. 16.  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
  17. 17.  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
  18. 18.     Bootstrap Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool Released Bootstrap in 2011 Otto & Thornton left Twitter in 2012 Otto is now in charge of the open source project and is adding core team members.     Foundation ZURB is a 30-person web development company in Campbell, CA Created Foundation to build client websites Mark Otto worked here until 2007 When ZURB saw how well Bootstrap was doing, they released Foundation as an open source project. www.jenkramer.org • jen@jenkramer.org ‹#›
  19. 19.  Bootstrap Strictly open source community, with Otto as benevolent dictator  Foundation With a company behind this framework, tech support is available, as well as in-person and online training www.jenkramer.org • jen@jenkramer.org ‹#›
  20. 20. Bootstrap Foundation Latest versions of: Latest versions of Chrome, Firefox, Safari Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only, as Windows has more or less been discontinued) Firefox (Mac, Windows) iOS (iPhone and iPad) Android 2, 4 (tablet and phone) Windows Phone 7+ Surface Opera (Mac, Windows) IE 9 and 10. IE 8 supported with respond.js IE 9 and 10. IE 8 supported with additional grid code (provided on site as a gist) www.jenkramer.org • jen@jenkramer.org ‹#›
  21. 21.    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 www.jenkramer.org • jen@jenkramer.org Foundation ‹#›
  22. 22.  Bootstrap 4 grid system:  Foundation 3 grid system: o Extra small always stays o Small always stays horizontal horizontal o Small, medium, large grids stack after breakpoint o Medium, large grids stack after breakpoint  Can center columns on the page www.jenkramer.org • jen@jenkramer.org ‹#›
  23. 23.    Bootstrap There is a TON of stuff that’s styled No right-to-left support Specific to Bootstrap: o Jumbotron  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 Media object o Pricing Tables o Media List o Keystrokes o Well www.jenkramer.org • jen@jenkramer.org ‹#›
  24. 24. Foundation Bootstrap     LESS CSS Not much LESS documentation on Bootstrap site Less of an expectation that you will work with LESS No official training available     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 ‹#›
  25. 25.   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 ‹#›
  26. 26. Bootstrap Carousel <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" dataslide-to="0" class="active"></li> <li data-target="#carousel-example-generic" dataslide-to="1"></li> <li data-target="#carousel-example-generic" dataslide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> </div> <div class="item active"> <img src="..." alt="..."> </div> <div class="item active"> <img src="..." alt="..."> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-examplegeneric" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carouselexample-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> Foundation Orbit <ul data-orbit> <li> <img src= "../img/demos/demo1.jpg" /> </li> <li> <img src= "../img/demos/demo2.jpg" /> </li> <li> <img src= "../img/demos/demo3.jpg" /> </li> </ul> </div> www.jenkramer.org • jen@jenkramer.org ‹#›
  27. 27.    Bootstrap Carousel 6 methods 2 events 3 data- options Foundation Orbit $(document).foundation('orbit', { animation: 'fade', timer_speed: 10000, pause_on_hover: true, resume_on_mouseout: false, animation_speed: 500, stack_on_small: true, navigation_arrows: true, slide_number: true, container_class: 'orbit-container', stack_on_small_class: 'orbit-stack-on-small', next_class: 'orbit-next', prev_class: 'orbit-prev', timer_container_class: 'orbit-timer', timer_paused_class: 'paused', timer_progress_class: 'orbit-progress', slides_container_class: 'orbit-slides-container', bullets_container_class: 'orbit-bullets', bullets_active_class: 'active', slide_number_class: 'orbit-slide-number', caption_class: 'orbit-caption', active_slide_class: 'active', orbit_transition_class: 'orbit-transitioning', bullets: true, timer: true, next_on_click: false, variable_height: false, before_slide_change: function(){}, after_slide_change: function(){} }); www.jenkramer.org • jen@jenkramer.org ‹#›
  28. 28. Bootstrap Foundation www.jenkramer.org • jen@jenkramer.org ‹#›
  29. 29. CAN THERE BE ONLY ONE?
  30. 30.  You need lots of styling out of the box, without lots of changes.  You love LESS CSS.  You’re OK with a strictly open source project.  You need one of the unique JS/CSS characteristics.  You hate semicolons in your JavaScript/you hate JS. www.jenkramer.org • jen@jenkramer.org
  31. 31.  You don’t want a ton of styling you have to override later.  You love Sass/Compass.  You need tech support and/or training.  You need one of the unique JS/CSS characteristics.  You love semicolons in your JavaScript/you love JS. www.jenkramer.org • jen@jenkramer.org
  32. 32. Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Slides available at www.slideshare.net/jen4web Twitter: @jen4web Facebook: facebook.com/webdesignjen www.jenkramer.org • jen@jenkramer.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×