Battle of the Front-End

Frameworks

Rachel Carden!http://wpdreamer.com @bamadesigner

Bootstrap vs. Foundation

• 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?

Bootstrap

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

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

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

Foundation Bootstrap

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

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

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

Foundation BootstrapaOR

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

Who Wins At Getting Started?

What Is A Grid System?

1 2 3 4 5 6 7 8 9 10 11 12

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

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

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

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

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

3 6 3Large:

4 4 4Medium:

Small:121212

The Grid System / The Columns

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!

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!

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!

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

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

Foundation / The Grid System

Foundation / The Grid System

Foundation / The Grid System

Foundation / The Grid System

Who Wins The Grid?

The CSS/JavaScript

• Both frameworks have “out of the box” styles:

• General Typography

• <h1>, <h2>, <p>…

• Lists

• Tables

• Forms

• Etc.

The CSS/JavaScript

• Both frameworks have stylized CSS components:

• Navigation bar

• Slider

• Breadcrumbs

• Pagination

• Panels/Callouts

• Thumbnails

• Accordions

• Button groups

• Labels

• Progress Bars

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>

The CSS/JavaScript

• Both frameworks have JavaScript plugins.

✓Bootstrap has 12.

✓Foundation has 16.

• Fancy Navigation

• Responsive embeds

• Slider

• Accordions

• Alerts

• Tooltips

• Dropdowns

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

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

Who Wins CSS/JS?

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

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

ootstrap / Browser Support

Chrome Firefox IE Opera Safari

Android N/A

iOS N/A N/A

Mac OS X

Windows Versions 8-11

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.

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

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

Who Wins At Compatibility?

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.

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

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.

Rachel Carden!http://wpdreamer.com @bamadesigner

http://getbootstrap.com/

Bootstrap @twbootstrap

http://foundation.zurb.com/

Foundation @ZURBfoundation

THANK YOU!