Going Off Canvas with Zurb Foundation 3.0: New on Premium
plus

Going Off Canvas with Zurb Foundation 3.0: New on Premium

Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Intermediate
  • Estimated completion time: 2 hours

We have a new Premium tutorial for you! Today we’re going to be diving head first into the newest RWD pattern on the block, off-canvas layouts — a very clever approach from the team at Zurb.


Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

In this tutorial, we’re going to be creating a simple homepage that has some very special features when viewed on a smaller viewports. While we’re going to be working step by step to create the page, we will be getting Zurb Foundation and the Off-Canvas Layouts to do all the heavy lifting for us.


You’ll Learn How to:

  • Work with the Zurb Foundation framework
  • Use various workflow improvement tools (such as CSS unminifier)
  • Deal with Off-Canvas layouts

..and a whole load more besides..


Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Pingback: My Stream | Going Off Canvas with Zurb Foundation 3.0: New on Premium | My Stream

  • Pingback: Going Off Canvas with Zurb Foundation 3.0: New on Premium | Shadowtek Hosting and Design Solutions

  • shawn

    So is the tutorial based off using the Sass or are you just using the standard Css?

    If you are basing it off of Sass, are you using silent extends with Sass?

    Trying to get a clearer idea of what it is we would be learning.

    • http://www.snaptin.com Ian Yates

      Even though Zurb Foundation is built with Sass, Chris uses the straight CSS version during this tutorial. Check out the preview for a clear idea of what’s covered :)

  • Aldo

    Hi

    This frameworks are compatible with IE8-?? so can I see the website in IE?

    just wondering

    thanks

    • https://twitter.com/onemorewebguy Chris Brown
      Author

      Hi Aldo, According to their documentation, Zurb Foundation supports IE8+. The box-sizing: border-box box model — which is pretty key to the grid system — is not supported by IE6 & IE7. Apart from that, the demo should degrade pretty well to IE8.

      Hope this helps!