Build a Responsive WordPress Theme with Zurbs Foundation Framework
•
17 likes•17,293 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” 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Build a Responsive WordPress Theme with Zurbs Foundation Framework
Similar to Build a Responsive WordPress Theme with Zurbs Foundation Framework (20)
More from Brendan Sera-Shriar
More from Brendan Sera-Shriar (18)
Recently uploaded
Recently uploaded (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 :)
- 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!
- 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 ...
- 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