Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build a Responsive WordPress Theme with Zurbs Foundation Framework

17,026 views

Published on

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.

Published in: Technology, Business
  • Dating direct: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F90ZZC ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Build a Responsive WordPress Theme with Zurbs Foundation Framework

  1. 1. WordCamp Montreal 2013 Build a Responsive WordPress Theme with ZURBs Foundation 4 Framework.
  2. 2. Before we can code responsively, we must understand the fundamentals.
  3. 3. What the heck is responsive web design?
  4. 4. A website or app that responds to the device that accesses it and delivers the appropriate output for it.
  5. 5. No pinch and zoom!
  6. 6. One Site to Rule Them ALL! Cheesy movie reference :)
  7. 7. Why build responsively?
  8. 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. 9. Some basic stats ... because I’m a marketing guy :)
  10. 10. Smartphone sales have become bigger than PC sales.
  11. 11. 28% of Internet usage comes from a mobile phone
  12. 12. In the retail industry, 16% of search queries come from mobile web usage
  13. 13. Mobile web usage took 50% of sales related to Mother’s Day in 2012
  14. 14. There were a total of $163 billion mobile transactions in 2012 $235.4 billion expected in 2013
  15. 15. We must build responsively, the web depends on it!
  16. 16. The basics of responsive web design
  17. 17. Before you wireframe, design, or code ... Think mobile first!
  18. 18. consider ... 1 2 3 4 5
  19. 19. Use a responsive framework We use Foundation 4 by ZURB
  20. 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. 21. It’s all about the grids!
  22. 22. What you need to consider in the design phase Image sizing
  23. 23. What you need to consider in the design phase Stacking & Re-ordering of columns
  24. 24. What you need to consider in the design phase Mobile Navigation
  25. 25. Design for mobile navigation Toggle menu Off-canvas menuvs.
  26. 26. Responsive Navigation: Optimizing for Touch Across Devices Adapting Common Patterns Read: Responsive Navigation: Optimizing for Touch Across Devices by Luke Wroblewski
  27. 27. Now that we covered the basics, let’s look at the code ...
  28. 28. Download Foundation 4 http://foundation.zurb.com/docs/
  29. 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. 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. 31. Foundation 4 Libraries What comes with Foundation 4 ★ Forms ★ Navigation ★ Reveal ★ Joyride ★ Magellan ★ Orbit ★ Tooltips To name a few ...
  32. 32. Let’s do it!
  33. 33. Foundation 4 Grid <div class=“row”> <div class=“large-12 columns”> </div> </div> <!-- stuff --> The Grid in Action Super Easy!
  34. 34. Foundation 4 Grid Customizing the Grid
  35. 35. Foundation 4 Grid Customizing the Grid
  36. 36. Foundation 4 Grid Customizing the Grid
  37. 37. Foundation 4 Grid Customizing the Grid
  38. 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. 39. If it ain’t broke don’t fix it! Get Reverie by ThemeFortress
  40. 40. Easy to hack Most stable Foundation WP theme Only F4 Theme! It’s FREE
  41. 41. Some Examples
  42. 42. Some Examples
  43. 43. Some Examples
  44. 44. Thank You! www.TheBrendans.com www.KeepMarketingFun.com @TheBrendans www.facebook.com/thebrendans @digibomb

×