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