Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Battle of the Front-End Frameworks: Bootstrap vs. Foundation

10,052 views

Published on

Responsive web design is a must these days but it can be a little tricky to make your design work on all devices and screen sizes, especially if you have to start from scratch each time. Front-end frameworks make it very easy to quickly create responsive, standard-complaint websites by providing a reusable structure (HTML, CSS, JS), with configurable components, that allows you to hit the ground running with minimum effort. And the two most powerful frameworks? Bootstrap and Foundation. Rachel has used both Bootstrap and Foundation with numerous WordPress projects and will not only show you how to get started using these frameworks, but will also present a comparison of these two systems and the differences you’ll face when using them to create a WordPress theme.

Published in: Software
  • Login to see the comments

Battle of the Front-End Frameworks: Bootstrap vs. Foundation

  1. 1. Battle of the 
 Front-End Frameworks Rachel Carden! http://wpdreamer.com @bamadesigner Bootstrap vs. Foundation
  2. 2. • A standardized package that provides a common structure of files, folders and code (HTML, CSS, JS) for web folks to use to develop the front-end, or presentation layer, of their site. • Front-end frameworks save a lot of time because you do not have to build your front-end layer from scratch for each new project. What Is A Front-End Framework?
  3. 3. Bootstrap
  4. 4. ootstrap • Was developed by Mark Otto and Jacob Thornton at Twitter in 2010. Served as the style guide for internal tools before its public release on August 19, 2011. • Has had 28 releases. The last stable release was version 3.2.0 on June 26, 2014. / v3.2.0
  5. 5. ootstrap • Is open-source under the MIT license - hosted, developed, and maintained on GitHub. They welcome contributions. ★ Is the most starred GitHub development project with over 70,700 stars. jQuery is second with a little over 31,400. Has been forked on GitHub over 26,300 times. / v3.2.0
  6. 6. ootstrap • Grid-based system written in HTML, CSS, LESS (they also have a SASS port), and JavaScript. • Responsive Design • Introduced an optional responsive stylesheet with version 2.0 on Jan 31, 2012. • Framework became responsive by default, otherwise known as “mobile-first”, for version 3.0 which launched on Aug 19, 2013. / v3.2.0
  7. 7. Foundation Bootstrap
  8. 8. Foundation • Was developed by the ZURB web agency as an internal style guide in 2008. Was released to the public in October 2011. • Has had over 80 releases. The last stable release was version 5.3.3 on August 1, 2014. / v5.3.3
  9. 9. Foundation • Is open-source under the MIT license - hosted, developed, and maintained on GitHub. They welcome contributions. ★ Has over 17,500 stars on GitHub. Forked over 3,800 times. / v5.3.3
  10. 10. Foundation • Grid-based system written in HTML, CSS, Sass, and JavaScript. • Responsive Design • Introduced responsive grid in version 2.0 on October 18, 2011. Claims to be “the first open-source framework to be responsive”. • Framework became “mobile-first” for version 4.0, which launched on Feb. 28, 2013. / v5.3.3
  11. 11. Foundation BootstrapaOR
  12. 12. Getting Started / Downloading • Download complete set of compiled/minified files ✓Bootstrap: 12 files at 773 KB ✓Foundation: 29 files at 698 KB • Download source code using bower ✓Bootstrap is built with Less, but has a SASS port ✓Foundation has their own CLI
  13. 13. Who Wins At Getting Started?
  14. 14. What Is A Grid System?
  15. 15. 1 2 3 4 5 6 7 8 9 10 11 12
  16. 16. 1 2 3 4 5 6 7 8 9 10 11 12 12 6 6 2 4 4 2 2 2 2 2 2 2 12
  17. 17. The Grid System • They both use a 12-column grid system. ✓By default, Bootstrap uses a fixed-width grid layout. • Can be converted to fluid with a couple tweaks. ✓Foundation has a fluid layout. / Overview
  18. 18. The Grid System Screen size Foundation Bootstrap XS N/A 0 to 767px S 0 to 640px 768px to 991px M 641px -1024px 992px to 1199px L 1025px - 1440px 1200px and up XL 1441 - 1920px N/A XXL 1921px and up N/A / Media Queries
  19. 19. Foundation <div class="row"> <div class="small-12 medium-4 large-3 columns">...</div> <div class="small-12 medium-4 large-6 columns">...</div> <div class="small-12 medium-4 large-3 columns">...</div> </div> = 12 = 12 / The Grid System
  20. 20. ootstrap <div class="row"> <div class=“col-sm-12 col-md-4 col-lg-3 columns">...</div> <div class=“col-sm-12 col-md-4 col-lg-6 columns">...</div> <div class=“col-sm-12 col-md-4 col-lg-3 columns">...</div> </div> = 12 = 12 / The Grid System
  21. 21. 3 6 3Large: 4 4 4Medium: Small: 12 12 12 The Grid System / The Columns
  22. 22. The Grid System • Both Bootstrap and Foundation will allow you to: ✓nest grids <div class=“row"> <div class="small-12 medium-4 large-3 columns”> <div class=“row"> <div class="small-12 medium-4 large-3 columns">...</div> <div class="small-12 medium-4 large-6 columns">...</div> <div class="small-12 medium-4 large-3 columns">...</div> </div> </div> </div> / But Wait! There’s More!
  23. 23. The Grid System • Both Bootstrap and Foundation will allow you to: ✓nest grids ✓offset columns <div class=“row"> <div class="large-1 columns”>…</div> <div class="large-9 large-offset-2 columns”>…</div> </div> 1 9, offset 2 / But Wait! There’s More!
  24. 24. The Grid System • Both Bootstrap and Foundation will allow you to: ✓nest grids ✓offset columns ✓shift the order of columns between screen sizes <div class="row"> <div class="small-10 small-push-2 columns”>This 10 will be last</div> <div class="small-2 small-pull-10 columns”>This 2 will be first</div> </div> / But Wait! There’s More!
  25. 25. Foundation • Only Foundation will allow you to: ✓center columns <div class="row"> <div class="small-6 small-centered columns”>…</div> </div> 6, centered / The Grid System
  26. 26. Foundation ✓Foundation also has a block grid: <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6”> <li><!-- Your content goes here —></li> <li><!-- Your content goes here —></li> <li><!-- Your content goes here —></li> <li><!-- Your content goes here —></li> <li><!-- Your content goes here —></li> <li><!-- Your content goes here —></li> </ul> / The Grid System
  27. 27. Foundation / The Grid System
  28. 28. Foundation / The Grid System
  29. 29. Foundation / The Grid System
  30. 30. Foundation / The Grid System
  31. 31. Who Wins The Grid?
  32. 32. The CSS/JavaScript • Both frameworks have “out of the box” styles: • General Typography • <h1>, <h2>, <p>… • Lists • Tables • Forms • Etc.
  33. 33. The CSS/JavaScript • Both frameworks have stylized CSS components: • Navigation bar • Slider • Breadcrumbs • Pagination • Panels/Callouts • Thumbnails • Accordions • Button groups • Labels • Progress Bars
  34. 34. The CSS/JavaScript • Both frameworks have visibility classes that allow you to show and hide elements depending on the screen size. <p class=“show-for-small-only">Only visible on a small screen.</p> <p class=“show-for-medium-up">Only visible on medium screens and up.</p> <p class=“show-for-medium-only">Only visible on a medium screen.</p> <p class=“show-for-large-up">Only visible on large screens and up.</p> <p class=“show-for-large-only">Only visible on large screens.</p>
  35. 35. The CSS/JavaScript • Both frameworks have JavaScript plugins. ✓Bootstrap has 12. ✓Foundation has 16. • Fancy Navigation • Responsive embeds • Slider • Accordions • Alerts • Tooltips • Dropdowns
  36. 36. The CSS/JavaScript • In Bootstrap, you have to add class names to certain elements, like tables, form elements and images, in order for them to be responsive and to show the base CSS styles. • Foundation’s base CSS is “out of the box”. / Differences
  37. 37. The CSS/JavaScript • Foundation’s out-of-the-box CSS has more of a flat design, compared to Bootstrap. • The CSS and Javascript components available from each framework varies a little. / Differences
  38. 38. Who Wins CSS/JS?
  39. 39. Working With WordPress • Bootstrap’s requirement to add CSS classes to certain HTML elements (form elements, tables, etc.) becomes a hindrance when you’re dependent upon WordPress core or plugins to print HTML. / Issues
  40. 40. Working With WordPress • Components with both frameworks require very specific HTML. • Navbars are the most commonly-used component. • You have to figure out how to get wp_nav_menu() to work with your framework’s navbar. • Other developers have created wp_nav_menu() walkers for you to use. / Issues
  41. 41. ootstrap / Browser Support Chrome Firefox IE Opera Safari Android N/A iOS N/A N/A Mac OS X Windows Versions
 8-11
  42. 42. ootstrap / Browser Support • Some CSS3 properties and HTML5 elements are not fully supported in Internet Explorer 8 and 9. • Internet Explorer 8 requires the use of Respond.js to enable media query support. • There are a few more super specific issues and caveats you might run across.
  43. 43. Foundation • It’s a lot easier to just say what Foundation is not compatible with: Internet Explorer 8 and below. • Their framework relies on media queries to be “mobile- first”, which IE 8 does not support. • Browsers or devices that do not support media queries will be restricted to a simple, single-column layout. / Browser Support
  44. 44. Foundation • If you have to support IE8, Foundation’s official recommendation is to use Foundation 3.2. • However, someone figured out a fairly simple solution to provide IE8 support when using Foundation 5, which involves including a few script libraries to fix IE8's lack of support for media queries and CSS rem units. • You can view this solution at http:// foundation.zurb.com/forum/posts/241-foundation-5- and-ie8. / Browser Support
  45. 45. Who Wins At Compatibility?
  46. 46. The Major Differences • Bootstrap uses Less and Sass, where Foundation only uses Sass. • Foundation offers a more flexible grid system, including centered columns and the block grid. • Foundation doesn’t officially support IE 8.
  47. 47. The Major Differences • In Bootstrap, you have to add class names to certain elements, like tables, form elements and images, in order for them to be responsive and to show the base CSS styles, where Foundation’s base CSS is “out of the box”.
  48. 48. The Major Differences • Foundation’s out-of-the-box CSS has more of a flat design, compared to Bootstrap. • The CSS and Javascript components available from each framework varies a little.
  49. 49. Rachel Carden! http://wpdreamer.com @bamadesigner http://getbootstrap.com/ Bootstrap @twbootstrap http://foundation.zurb.com/ Foundation @ZURBfoundation THANK YOU!

×