Build a Responsive WordPress Theme with

ZURBs Foundation 5 Framework.

WordCamp Ottawa 2014

Before we can code responsively,

we must understand the fundamentals.

Originally from WordCamp Montreal 2013

What the heck is

responsive web design?

Originally from WordCamp Montreal 2013

A website or app that responds to the

device that accesses it and delivers the
appropriate output for it.

Originally from WordCamp Montreal 2013

No pinch and zoom!

Originally from WordCamp Montreal 2013

One Site
to Rule
Them ALL!

Cheesy movie reference :)

Originally from WordCamp Montreal 2013

Why build responsively?

Originally from WordCamp Montreal 2013

Day by day, the number of devices,

platforms, and browsers that need to
work with your site grows. Responsive
web design represents a fundamental
shift in how well build websites for the
decade to come.
- Jeffrey Veen
Jeffrey Veen is the author of "The Art and Science of Web Design"
Originally from WordCamp Montreal 2013

Some basic stats ...

because Im a marketing guy :)

Originally from WordCamp Montreal 2013

1 in every 5 people in the

world own a smartphone, and
1 in every 17 own a tablet

Updated from WordCamp Montreal 2013

28% of Internet
usage comes from a
mobile phone

Updated from WordCamp Montreal 2013

20% of Google
searches are being
performed on a
mobile device

Updated from WordCamp Montreal 2013

61% of people have

a better opinion of
brands when they
offer a good mobile
experience
Updated from WordCamp Montreal 2013

28.85% of all emails

are opened on mobile
phones, and 10.16%
are opened on tablets.

Updated from WordCamp Montreal 2013

Over $300 billion

mobile transactions
were made in 2013
This number is expected to
grow by a 100% for 2014

Updated from WordCamp Montreal 2013

We must build responsively,

the web depends on it!

Originally from WordCamp Montreal 2013

The basics of responsive web design

Originally from WordCamp Montreal 2013

Before you wireframe, design, or code ...

Think mobile first!

Originally from WordCamp Montreal 2013

consider ...

1
2

Originally from WordCamp Montreal 2013

5
4

here are a few media queries we target ...

! ! /* iphone 3-4 (320 x 480) */
! ! @media only screen and (min-device-width:320px)
480px) and (orientation:portrait) {
! ! }
! ! @media only screen and (min-device-width:320px)
480px) and (orientation:landscape) {
! ! }
! ! /* iphone 5 (320 x 568) */
! ! @media only screen and (min-device-width:320px)
568px) and (orientation:portrait) {
! ! }!!
! ! @media only screen and (min-device-width:320px)
568px) and (orientation:landscape) {
! ! }
! ! /* ipad (768 x 1024) */
! ! @media only screen and (min-device-width:768px)
1024px) and (orientation:portrait) {
! ! } */
Originally from WordCamp Montreal 2013

and (max-device-width:

and (max-device-width:

and (max-device-width:

and (max-device-width:

and (max-device-width:

Use a responsive framework

We use Foundation 5 by ZURB

Originally from WordCamp Montreal 2013

Why we chose Foundation

Designed for Mobile First!

Small, medium, and large 12-column grid

Rapid prototyping

Mobile visibility elements

Mobile navigation - toggle or off-canvas

Font icon library

Powerful jQuery and Zepto libraries

Foundation is developed in Sass

Most importantly an existing WP theme

Updated from WordCamp Montreal 2013

Its all about the grids!

Updated from WordCamp Montreal 2013

What you need to consider in the design phase

Mobile Navigation
Image sizing

Stacking & Re-ordering of columns

Originally from WordCamp Montreal 2013

Design for mobile navigation

Toggle menu
Originally from WordCamp Montreal 2013

vs.

Off-canvas menu

Responsive Navigation: Optimizing for

Touch Across Devices
Common Patterns

Adapting

Originally from WordCamp Montreal 2013

Read: Responsive Navigation: Optimizing for Touch Across Devices by Luke Wroblewski

Now that we covered the basics,

lets look at the code ...

Originally from WordCamp Montreal 2013

We do it in Sass
But, you can download everything in the
framework in simple, vanilla CSS and JS
http://foundation.zurb.com/develop/download.html

What you need to get started

Git

Ruby 1.9+

NodeJS

Bower

Compass

Its easier than it looks

Step by step instructions

http://foundation.zurb.com/docs/sass.html

You could build a WP Foundation theme from scratch but ...

If it aint broke dont fix it!

Get Reverie by ThemeFortress

Easy to hack

Most stable Foundation

WP theme

Child Starter Theme

Updated from WordCamp Montreal 2013

Of course there are other options

FoundationPress - http://foundationpress.olefredrik.com/

WP-Foundation - http://320press.com/wp-foundation/

JointsWP - http://jointswp.com/

Reactor - http://awtheme.com/

ZurbPress - http://zurbpress.wpprofs.com/

to name a few ...

Starting a new project is as simple as

foundation new project_name
or get the reverie-child theme
https://github.com/milohuang/reverie-child

Child theme architecture

CSS directory - compiled SCSS files

SCSS directory

config.rb - required for compass to compile project

style.css - to register child theme in WordPress

the rest is up to you

Getting setup

style.css
/*
Theme Name: Theme Name
Description: Child theme for the Reverie
Author: Brendan & Brendan Inc.
Template: reverie-master
*/
/*
*
*
*
*
*

This is the CSS file loaded by WordPress in backend,

it will not be loaded in the frontend.
Go to the css/ folder and find style.css,
this is the CSS file loaded by WordPress in frontend.
Using Sass/Scss? Find the style.scss under scss/ folder.
http://themefortress.com/reverie */

Getting setup
_settings.scss
//
// FOUNDATION SETTINGS
//

first few lines ...

Load functions

// This is the default html and body font-size for the base rem value.
// $rem-base: 16px;
// Allows the use of rem-calc() or lower-bound() in your settings
@import "foundation/functions";
// Grid
// $include-html-grid-classes: $include-html-classes;
$row-width: rem-calc(1140);
$column-gutter: rem-calc(30);

Customize Foundation

Getting setup - optional

architecture.scss
// FONT-STACK //
$main-font: 'OpenSans';
// LINK COLORS //
$normal : #282828;
$hover : #111111;
$active : #cccccc;
$visited: #aaaaaa;
$focus: #222222;

Set global variables

// FONT SMOOTHING MIXIN //

@mixin font-smoothing($value: on) {
! @if $value == on {
! ! -webkit-font-smoothing: antialiased;
! ! -moz-osx-font-smoothing: grayscale;
! }
! @else {
! ! -webkit-font-smoothing: subpixel-antialiased;
! ! -moz-osx-font-smoothing: auto;
! }
}

Then we include it like this

.menu {
@include font-smoothing(on);
}

Custom mixins

Foundation 5 Markup
page.php

Grid classes

<?php get_header(); ?>

<!-- Row for main content area -->
! <div class="small-12 large-8 columns" id="content" role="main">
! ! <?php /* Start loop */ ?>
! <?php while (have_posts()) : the_post(); ?>
! ! <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
! ! ! <header>
! ! ! ! <h1 class="entry-title"><?php the_title(); ?></h1>
! ! ! ! <?php reverie_entry_meta(); ?>
! ! ! </header>
! ! ! <div class="entry-content">
! ! ! ! <?php the_content(); ?>
! ! ! </div>
! ! </article>
! <?php endwhile; // End the loop ?>
! </div>
! <?php get_sidebar(); ?>!
<?php get_footer(); ?>

Foundation 5 Markup
functions.php - a snippet using masonry
$recent_posts = new WP_Query( $args );
if ( $recent_posts ) { ?>
<div class="row full-row">
<?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
$post_id = get_the_ID();
if ( get_the_post_thumbnail( $post_id ) ) { ?>
<div class="large-4 columns text-center pad-row">
<a class="fade" href="<?php the_permalink(); ?>">
! <?php the_post_thumbnail( 'masonry-thumbnail' ); ?>
<div class="row">
! <div class="large-12 columns tags-box">
! ! <p class="thumb-title"><?php the_title(); ?></p>
! ! <p class="thumb-tag"><?php the_tags(); ?></p>
! </div>
</div>
</a>
</div>

Call Foundation classes from anywhere

Credit @isotrope

Some Examples

Some Examples

Some Examples

Some Examples

If youre in Montreal in May come check out ...

http://www.thebrendans.com/events-workshops/

Want to join the team?

Check our internship program

Want to join the team?

Check our internship program

http://www.thebrendans.com/internships/

Thank You!
www.TheBrendans.com
www.KeepMarketingFun.com
@TheBrendans
www.facebook.com/thebrendans
@digibomb