Build a Responsive Theme in WordPress with ZURBs Foundation 5 Framework
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Build a Responsive Theme in WordPress with ZURBs Foundation 5 Framework

on

  • 2,846 views

Responsive design is becoming an expected standard for web developers. Your website or blog needs to look good and function on all screens and devices all the time, and just choosing a ...

Responsive design is becoming an expected standard for web developers. Your website or blog needs to look good and function on all screens and devices all the time, and just choosing a “responsive” WordPress theme isn’t always the best choice. In this session you’ll learn how easy it is to integrate foundation.css into your WordPress theme and how to get added functionality from their jQuery and zepto libraries. We’ll also dive into the css to understand how “responsivity” works.

Statistics

Views

Total Views
2,846
Views on SlideShare
2,447
Embed Views
399

Actions

Likes
6
Downloads
37
Comments
0

5 Embeds 399

http://keepmarketingfun.com 349
http://www.slideee.com 37
https://twitter.com 8
http://thebrendans.wordpress.com 4
http://iphone.oktopic.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Build a Responsive Theme in WordPress with ZURBs Foundation 5 Framework Presentation Transcript

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