More Related Content


More from Brendan Sera-Shriar(20)


Build a Responsive WordPress Theme with Zurbs Foundation Framework

  1. WordCamp Montreal 2013 Build a Responsive WordPress Theme with ZURBs Foundation 4 Framework.
  2. Before we can code responsively, we must understand the fundamentals.
  3. What the heck is responsive web design?
  4. A website or app that responds to the device that accesses it and delivers the appropriate output for it.
  5. No pinch and zoom!
  6. One Site to Rule Them ALL! Cheesy movie reference :)
  7. Why build responsively?
  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"
  9. Some basic stats ... because I’m a marketing guy :)
  10. Smartphone sales have become bigger than PC sales.
  11. 28% of Internet usage comes from a mobile phone
  12. In the retail industry, 16% of search queries come from mobile web usage
  13. Mobile web usage took 50% of sales related to Mother’s Day in 2012
  14. There were a total of $163 billion mobile transactions in 2012 $235.4 billion expected in 2013
  15. We must build responsively, the web depends on it!
  16. The basics of responsive web design
  17. Before you wireframe, design, or code ... Think mobile first!
  18. consider ... 1 2 3 4 5
  19. Use a responsive framework We use Foundation 4 by ZURB
  20. Why we chose Foundation 4 ★ Designed for Mobile First! ★ Flexible 12-column grid ★ Mobile visibility elements ★ Mobile navigation - toggle or off-canvas ★ Existing WP theme ★ Powerful jQuery and Zepto libraries ★ Foundation is developed in Sass
  21. It’s all about the grids!
  22. What you need to consider in the design phase Image sizing
  23. What you need to consider in the design phase Stacking & Re-ordering of columns
  24. What you need to consider in the design phase Mobile Navigation
  25. Design for mobile navigation Toggle menu Off-canvas menuvs.
  26. Responsive Navigation: Optimizing for Touch Across Devices Adapting Common Patterns Read: Responsive Navigation: Optimizing for Touch Across Devices by Luke Wroblewski
  27. Now that we covered the basics, let’s look at the code ...
  28. Download Foundation 4
  29. Foundation 4 Markup <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Foundation 4</title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" href="css/app.css" /> <script src="js/vendor/custom.modernizr.js"></script> <head> (css version)
  30. Foundation 4 Markup <script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js></script>') </script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.LIB-YOU-NEED.js"></script> <script> $(document).foundation(); </script> Before </body>
  31. Foundation 4 Libraries What comes with Foundation 4 ★ Forms ★ Navigation ★ Reveal ★ Joyride ★ Magellan ★ Orbit ★ Tooltips To name a few ...
  32. Let’s do it!
  33. Foundation 4 Grid <div class=“row”> <div class=“large-12 columns”> </div> </div> <!-- stuff --> The Grid in Action Super Easy!
  34. Foundation 4 Grid Customizing the Grid
  35. Foundation 4 Grid Customizing the Grid
  36. Foundation 4 Grid Customizing the Grid
  37. Foundation 4 Grid Customizing the Grid
  38. Foundation 4 Markup in WP <?php get_header(); ?> <div class=“row”> <div class="large-6 columns" role="main"> <?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;?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> That was Easy! The other large-6 is in sidebar.php
  39. If it ain’t broke don’t fix it! Get Reverie by ThemeFortress
  40. Easy to hack Most stable Foundation WP theme Only F4 Theme! It’s FREE
  41. Some Examples
  42. Some Examples
  43. Some Examples
  44. Thank You! @TheBrendans @digibomb