Off Canvas What Now?

If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). Luke Wroblewski, author of Mobile First, mentioned this style of layout in his roundup of mobile layout patterns.

He and Jason Weaver then worked to create a batch of layouts, which they published to demonstrate how layouts like this could work on the Web. We were so impressed that we wanted to make that style of layout available for Foundation users, and the four layouts below are a few different examples of off-canvas layouts created specifically for Foundation. Download these not just to see how a layout like this works (it's pretty crafty), but also to get a sneak peek at Foundation 3, which these were built with.

Read more about why we built this on our blog: New Foundation 3.0 Playground Release: Off-Canvas Layouts →

Four Layouts, No Waiting We've put together four different layouts, each with specific functionality and code for you to check out and download. Be sure to check these out on different devices, or resize your browser down to see the mobile device presentation. Bottom Nav Layout This layout moves the nav menu to the bottom on mobile, and enables a sliding sidebar. View this layout

View this layout Top Nav Layout This layout has a sliding top nav as well as a sliding sidebar. View this layout

View this layout Paneled A very different layout, this has full-width panels stacked on desktops but enables a tabbed panel layout on mobile. View this layout

View this layout Sidebar on Mobile Only This layout moves the navigation to the sidebar on mobile only. View this layout Download the Code

How to Use These Layouts The download below includes everything you need to play with these layouts and use them on your own site or app. You'll find a few things in the download: Foundation 3.2 , the release version of Foundation 3. We originally developed this with an alpha release, but have updated to the 3.2 release. This includes the new grid, changes to the structure and CSS (like box-sizing), new modular-scale based typography, new elements, and a lot more.

, the release version of Foundation 3. We originally developed this with an alpha release, but have updated to the 3.2 release. This includes the new grid, changes to the structure and CSS (like box-sizing), new modular-scale based typography, new elements, and a lot more. CSS and SCSS — if you've used Sass and Compass before everything is included to check out the SCSS implementation. You'll need the Compass, Linguistics, and Modular-Scale gems to run this. Note: You do not need to use or know Sass/SCSS to use these layouts

— if you've used Sass and Compass before everything is included to check out the SCSS implementation. You'll need the Compass, Linguistics, and Modular-Scale gems to run this. Note: You do not need to use or know Sass/SCSS to use these layouts Four off-canvas layouts — we modified or built four layouts after the work done by Luke and Jason, each showing different ways of setting up an off-canvas layout. There are four test files included (offcanvas-1.html, etc) so you can check them out on any kind of device.

— we modified or built four layouts after the work done by Luke and Jason, each showing different ways of setting up an off-canvas layout. There are four test files included (offcanvas-1.html, etc) so you can check them out on any kind of device. offcanvas.css, offcanvas.js — the four layouts require these two files to function. Each of these layouts has specific requirements for syntax and order, so pay close mind to how these examples are put together. You'll need a solid understanding of HTML and CSS (and JS / jQuery) to pick these layouts apart.