Your SlideShare is downloading. ×
0
 
Jen Kramer • Northeast PHP • August 18, 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 bu...
 Defined by three characteristics
o Flexible grid-based layout
o Images that resize
o Media queries (CSS3)
 www.alistapa...
 Images should change size,
based on screen resolution
o Load a big image and let it
scale (not good)
o Server-side (good...
 Browser reports screen
resolution
 Based on current width,
serve a stylesheet with
layout for that width
 No JavaScrip...

 While the back-end world
has been developing tools
and API’s, the front-end
world has been custom or
off-the-shelf.
Ther...
 Some of the work is done for
you – including debugging!
 But you can still customize
what you get.
 It doesn’t have to...
getbootstrap.com foundation.zurb.com
15 More Responsive CSS Frameworks Worth Considering
www.jenkramer.org • jen@jenkramer...
 I am a lynda.com author, and I have recorded video training
titles on both frameworks.
 I am currently writing a book o...
 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 t...
 A fully functional grid system with 4 different sizes.
 Base CSS includes standardized styling for forms, buttons,
imag...
 ZURB Foundation is an easy
to use, powerful, and
flexible framework for
building prototypes and
production code on any k...
 A fully functional grid system with 3 different sizes plus a
block grid.
 Base CSS includes standardized styling for fo...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
Latest versions of:
Chrome (Mac, Windows, iOS, and Android)
Safari (Ma...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
 Some effort put into accessibility
improvements
 Includes the Aria ...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
 4 grid system:
o Extra small always stays
horizontal
o Small, medium...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
 There is a TON of stuff that’s
styled
 No right-to-left support
 S...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
 LESS CSS
 Not much LESS documentation
on Bootstrap site
 Less of a...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap
 Affix: fixes element in place
while page scrolls
 ScrollSpy: Update...
www.jenkramer.org • jen@jenkramer.org ‹#›
Bootstrap Foundation
 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 don’t want a ton of
styling you have to override
later.
 You’re going to write a lot of
styles later anyway.
 You ...
Jen Kramer
Waltham, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/we...
Comparing Bootstrap and Foundation
Comparing Bootstrap and Foundation
Comparing Bootstrap and Foundation
Comparing Bootstrap and Foundation
Comparing Bootstrap and Foundation
Comparing Bootstrap and Foundation
Upcoming SlideShare
Loading in...5
×

Comparing Bootstrap and Foundation

16,658

Published on

Twitter Bootstrap and Zurb Foundation are the most popular responsive design frameworks today. As with most technology, although they look very similar on the surface, they're designed with different applications and target audiences in mind. Get a quick overview of Bootstrap and Foundation, learn how to customize these for your applications, and figure out which is right for your next project.

Published in: Technology
6 Comments
14 Likes
Statistics
Notes
  • The most recent version of this talk is from February 2014 and compares Bootstrap 3 and Foundation 5. http://www.slideshare.net/jen4web/bootstrap-vs-foundation-version-4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @AndreRoussakoff, thank you! I'm glad you found this helpful. Enjoy the courses, and I hope you have fun finding the right solution for you!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks, Jen, for laying a 'framework of thinking' about the differences between the two. I have not made up my mind yet, but I am definitely going to watch your both 'Up and running with...' courses. Just to try and play around a bit with both frameworks having your comparison in mind.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @christianmatthias Thanks, glad you found it helpful! This wasn't a comprehensive presentation on the differences -- it just provided an overview of a few things that are different. I have a spreadsheet (that desperately needs updating) which goes through everything in more detail.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I hate bootstrap I am always overriding the bejeezus out of it. thanks for the slideshare it really cleared things up.

    I do think there are now things in Foundation you didn't include like magellen vs affix.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
16,658
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
303
Comments
6
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Comparing Bootstrap and Foundation"

  1. 1.   Jen Kramer • Northeast PHP • August 18, 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 mobile- optimized 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!  But you can still customize what you get.  It doesn’t have to look like a Bootstrap/Foundation site, unless that’s what you want.
  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 under Apache 2, copyright 2013 Twitter 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 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.  3 sets of icon fonts for incorporating vector images (untested with Foundation 4)  Distributed under MIT license www.jenkramer.org • jen@jenkramer.org
  18. 18. 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)
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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)
  23. 23. 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
  24. 24. www.jenkramer.org • jen@jenkramer.org ‹#› Bootstrap Foundation
  25. 25.  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
  26. 26.  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
  27. 27. 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
  1. A particular slide catching your eye?

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

×