build a responsive wordpress theme with zurbs foundation 5 framework
DESCRIPTION
Build a Responsive WordPress Theme With ZURBs Foundation 5 FrameworkTRANSCRIPT
![Page 1: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/1.jpg)
WordCamp Ottawa 2014
Build a Responsive WordPress Theme with ZURBs Foundation 5 Framework.
![Page 2: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/2.jpg)
Before we can code responsively,
we must understand the fundamentals.
Originally from WordCamp Montreal 2013
![Page 3: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/3.jpg)
What the heck is responsive web design?
Originally from WordCamp Montreal 2013
![Page 4: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/4.jpg)
A website or app that responds to the device that accesses it and delivers the
appropriate output for it.
Originally from WordCamp Montreal 2013
![Page 5: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/5.jpg)
No pinch and zoom!
Originally from WordCamp Montreal 2013
![Page 6: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/6.jpg)
One Site to Rule
Them ALL!
Cheesy movie reference :)Originally from WordCamp Montreal 2013
![Page 7: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/7.jpg)
Why build responsively?
Originally from WordCamp Montreal 2013
![Page 8: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/8.jpg)
“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"
Originally from WordCamp Montreal 2013
![Page 9: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/9.jpg)
Some basic stats ...because I’m a marketing guy :)
Originally from WordCamp Montreal 2013
![Page 10: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/10.jpg)
1 in every 5 people in the world own a smartphone, and
1 in every 17 own a tablet
Updated from WordCamp Montreal 2013
![Page 11: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/11.jpg)
28% of Internet usage comes from a
mobile phone
Updated from WordCamp Montreal 2013
![Page 12: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/12.jpg)
20% of Google searches are being
performed on a mobile device
Updated from WordCamp Montreal 2013
![Page 13: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/13.jpg)
61% of people have a better opinion of brands when they
offer a good mobile experience
Updated from WordCamp Montreal 2013
![Page 14: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/14.jpg)
28.85% of all emails are opened on mobile phones, and 10.16%
are opened on tablets.
Updated from WordCamp Montreal 2013
![Page 15: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/15.jpg)
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
![Page 16: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/16.jpg)
We must build responsively,
the web depends on it!
Originally from WordCamp Montreal 2013
![Page 17: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/17.jpg)
The basics of responsive web design
Originally from WordCamp Montreal 2013
![Page 18: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/18.jpg)
Before you wireframe, design, or code ...
Think mobile first!
Originally from WordCamp Montreal 2013
![Page 19: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/19.jpg)
consider ...
1
2
3
4
5
Originally from WordCamp Montreal 2013
![Page 20: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/20.jpg)
here are a few media queries we target ...
Originally from WordCamp Montreal 2013
! ! /* 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) {! ! } */
![Page 21: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/21.jpg)
Use a responsive framework
We use Foundation 5 by ZURB
Originally from WordCamp Montreal 2013
![Page 22: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/22.jpg)
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
![Page 23: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/23.jpg)
It’s all about the grids!
Updated from WordCamp Montreal 2013
![Page 24: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/24.jpg)
What you need to consider in the design phase
Image sizing
Stacking & Re-ordering of columns
Mobile Navigation
Originally from WordCamp Montreal 2013
![Page 25: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/25.jpg)
Design for mobile navigation
Toggle menu Off-canvas menuvs.
Originally from WordCamp Montreal 2013
![Page 26: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/26.jpg)
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
![Page 27: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/27.jpg)
Now that we covered the basics,
let’s look at the code ...
Originally from WordCamp Montreal 2013
![Page 28: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/28.jpg)
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
![Page 29: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/29.jpg)
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
![Page 30: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/30.jpg)
If it ain’t broke don’t fix it!
Get Reverie by ThemeFortress
You could build a WP Foundation theme from scratch but ...
![Page 31: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/31.jpg)
Easy to hack
Most stable Foundation WP theme
Child Starter Theme
Updated from WordCamp Montreal 2013
![Page 32: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/32.jpg)
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 ...
![Page 33: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/33.jpg)
Starting a new project is as simple as
foundation new project_name
or get the reverie-child themehttps://github.com/milohuang/reverie-child
![Page 34: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/34.jpg)
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
![Page 35: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/35.jpg)
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
![Page 36: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/36.jpg)
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 ...
![Page 37: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/37.jpg)
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
![Page 38: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/38.jpg)
Foundation 5 Markup
<?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(); ?>
page.php Grid classes
![Page 39: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/39.jpg)
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
![Page 40: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/40.jpg)
Some Examples
![Page 41: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/41.jpg)
Some Examples
![Page 42: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/42.jpg)
Some Examples
![Page 43: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/43.jpg)
Some Examples
![Page 44: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/44.jpg)
If you’re in Montreal in May come check out ...
http://www.thebrendans.com/events-workshops/
![Page 45: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/45.jpg)
Want to join the team?Check our internship program
![Page 46: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/46.jpg)
http://www.thebrendans.com/internships/
Want to join the team?Check our internship program
![Page 47: Build a Responsive WordPress Theme With ZURBs Foundation 5 Framework](https://reader031.vdocuments.site/reader031/viewer/2022020403/55cf85ac550346484b90613a/html5/thumbnails/47.jpg)
Thank You!www.TheBrendans.com
www.KeepMarketingFun.com@TheBrendans
www.facebook.com/thebrendans
@digibomb