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

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.

1. Battle of the 

Front-End
Frameworks
Rachel Carden!
http://wpdreamer.com
@bamadesigner
Bootstrap vs. Foundation

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. Bootstrap

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. 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. 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. Foundation Bootstrap

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. 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. 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. Foundation Bootstrap
aOR

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

15. Who Wins At
Getting Started?

16. What Is A Grid System?

19. 1 2 3 4 5 6 7 8 9101112

20. 1 2 3 4 5 6 7 8 9101112
12
6 6
2 4 4 2
2 2 2 2 2 2
12

21. 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

22. 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

23. 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

24. 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

25. 3 6 3 Large:4 4 4
Medium:
Small:12 12 12
The Grid System/ The Columns

26. 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!

27. 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!

28. 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!

29. 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

30. 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

31. Foundation/ The Grid System

32. Foundation/ The Grid System

33. Foundation/ The Grid System

34. Foundation/ The Grid System

35. Who Wins The Grid?

36. The CSS/JavaScript
•Both frameworks have “out of the box” styles:
•General Typography
•<h1>, <h2>, <p>…
•Lists
•Tables
•Forms
•Etc.

37. The CSS/JavaScript
•Both frameworks have stylized CSS components:
•Navigation bar
•Slider
•Breadcrumbs
•Pagination
•Panels/Callouts
•Thumbnails
•Accordions
•Button groups
•Labels
•Progress Bars

40. 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>

41. The CSS/JavaScript
•Both frameworks have JavaScript plugins.
✓Bootstrap has 12.
✓Foundation has 16.
•Fancy Navigation
•Responsive embeds
•Slider
•Accordions
•Alerts
•Tooltips
•Dropdowns

42. 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

43. 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

44. Who Wins CSS/JS?

45. 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

46. 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

47. ootstrap/ Browser Support Chrome Firefox IE Opera Safari
Android N/A
iOS N/A N/A
Mac OS X
Windows
Versions

8-11

48. 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.

49. 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

50. 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

51. Who Wins At
Compatibility?

52. 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.

53. 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”.

54. 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.

55. Rachel Carden!
http://wpdreamer.com
@bamadesigner
http://getbootstrap.com/
Bootstrap
@twbootstrap
http://foundation.zurb.com/
Foundation
@ZURBfoundation
THANK YOU!