Build a Responsive WordPress Theme with Zurbs Foundation Framework
17 likes17,302 views
The document discusses the importance of building responsive websites using the Foundation 4 framework, emphasizing mobile-first design due to the rising number of mobile device users. It highlights key elements of responsive web design such as navigation, image sizing, and grid layout, while encouraging the use of specific coding practices. The document provides resources and code examples to implement Foundation 4 in WordPress themes.
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