Susy Off Canvas, A Responsive Web Design Layout Pattern

I’ve mentioned the Susy framework before, but thought it was useful to bring up the concept of Responsive Web Design Layout Patterns. In this case we’re talking about “off canvas”, where elements are shoved out of the viewport (canvas), when a small screen is being used, and shoved back into the viewport, when the screen is large enough to accommodate the element. All of this can be decided by setting variables in the SASS in the Susy Framework. Makes rolling your own off canvas layouts much easier.

Off canvas layouts are getting more attention. The frontend framework from Zurb, has even implemented an off-canvas layout in their framework.

Also Brad Frost has a fantastic demo of some layout patterns for RWD. Resize your browser and check these out. Nice to know there are a lot of options to choose from. Good to see people experimenting with this whole RWD thing.

And I would be remiss if I didn’t mention Luke Wroblewski, whom I’ve seen at AEA conference, and attended his mobile workshop, and does fantastic work in the mobile space when it comes to Frontend Engineering. Check out his article on Multi-Device Layout Patterns.