Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework

WordCamp Ottawa 2014

Build a Responsive WordPress Theme with ZURBs Foundation 5 Framework.

http://2013.montreal.wordcamp.org/session/build-a-responsive-wordpress-theme-with-zurbs-foundation-framework/




Before we can code responsively,

we must understand the fundamentals.

Originally from WordCamp Montreal 2013

What the heck is responsive web design?


A website or app that responds to the device that accesses it and delivers the

appropriate output for it.


No pinch and zoom!


One Site to Rule

Them ALL!

Cheesy movie reference :)Originally from WordCamp Montreal 2013

Why build responsively?


“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 we’ll build websites for the decade to come.”

- Jeffrey VeenJeffrey Veen is the author of "The Art and Science of Web Design"


Some basic stats ...because I’m a marketing guy :)


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


20% of Google searches are being

performed on a mobile device


61% of people have a better opinion of brands when they

offer a good mobile experience


28.85% of all emails are opened on mobile phones, and 10.16%

are opened on tablets.


Over $300 billion mobile transactions were made in 2013

This number is expected to grow by a 100% for 2014


We must build responsively,

the web depends on it!


The basics of responsive web design


Before you wireframe, design, or code ...

Think mobile first!


consider ...

1

2

3

4

5


here are a few media queries we target ...


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

Use a responsive framework

We use Foundation 5 by ZURB


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


It’s all about the grids!


What you need to consider in the design phase

Image sizing

Stacking & Re-ordering of columns

Mobile Navigation


Design for mobile navigation

Toggle menu Off-canvas menuvs.


Responsive Navigation: Optimizing for Touch Across Devices

Adapting

Common Patterns

Read: Responsive Navigation: Optimizing for Touch Across Devices by Luke WroblewskiOriginally from WordCamp Montreal 2013

http://www.lukew.com/ff/entry.asp?1649

http://www.lukew.com/ff/entry.asp?1649

Now that we covered the basics,

let’s look at the code ...


But, you can download everything in the framework in simple, vanilla CSS and JS

http://foundation.zurb.com/develop/download.html

We do it in Sass





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

What you need to get started★ Git

★ Ruby 1.9+

★ NodeJS

★ Bower

★ Compass

It’s easier than it looks

Step by step instructions





If it ain’t broke don’t fix it!

Get Reverie by ThemeFortress

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

Easy to hack

Most stable Foundation WP theme

Child Starter Theme


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

http://foundationpress.olefredrik.com/

http://foundationpress.olefredrik.com/

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

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

http://jointswp.com/

http://jointswp.com/

http://awtheme.com/

http://awtheme.com/

http://zurbpress.wpprofs.com/

http://zurbpress.wpprofs.com/

Starting a new project is as simple as

foundation new project_name

or get the reverie-child themehttps://github.com/milohuang/reverie-child

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

/*Theme Name: Theme NameDescription: Child theme for the ReverieAuthor: 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 */

style.css

1

http://themefortress.com/reverie

http://themefortress.com/reverie

Getting setup

//// FOUNDATION SETTINGS//

// 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);

_settings.scss

2

Load functions

Customize Foundation

first few lines ...

Getting setup - optional

// FONT-STACK //

$main-font: 'OpenSans';

// LINK COLORS //

$normal : #282828;$hover : #111111;$active : #cccccc;$visited: #aaaaaa;$focus: #222222;

architecture.scss

3

Set global variables Custom mixins

// 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;! }}

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

Then we include it like this

Foundation 5 Markup

<?php get_header(); ?>! <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(); ?>

page.php Grid classes

Foundation 5 Markup

$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>

functions.php - a snippet using masonry

Call Foundation classes from anywhere

Credit @isotrope

Some Examples

Some Examples

Some Examples

Some Examples

If you’re in Montreal in May come check out ...

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





Want to join the team?Check our internship program

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

Want to join the team?Check our internship program





Thank You!www.TheBrendans.com

www.KeepMarketingFun.com@TheBrendans

www.facebook.com/thebrendans

@digibomb

http://www.TheBrendans.com

http://www.TheBrendans.com

http://www.KeepMarketingFun.com

http://www.KeepMarketingFun.com

http://twitter.com/thebrendans

http://twitter.com/thebrendans

https://www.facebook.com/thebrendans

https://www.facebook.com/thebrendans

http://twitter.com/digibomb

http://twitter.com/digibomb

Documents

Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework