Thursday, 21 March 2013

Responsive Navigation And Flexbox — Some Articles I’ve Written Elsewhere - Vanseo Design

Responsive Navigation And Flexbox — Some Articles I’ve Written Elsewhere - Vanseo Design

Responsive Navigation And Flexbox — Some Articles I’ve Written Elsewhere

Posted: 20 Mar 2013 05:30 AM PDT

As if I don’t write enough here, I’ve been writing recently for some other sites you may know and thought I’d share a few articles if you haven’t come across them on your own.

Responsive Navigation

First here’s a series of tutorials on responsive navigation patterns I wrote for the Tuts+ sites. The first three are Tuts+ premium tutorials so you’ll need to be a member there to read the complete tutorial. They do let you read a generous amount even if you aren’t a member.

The last (the off canvas patterns) appears on Webdesign Tuts+ so you can read the entire tutorial, see the demo, and grab the code.

The last article offers walks through four demos for creating off canvas navigation and sidebars using either javascript or css click events.

Flexbox

Second is an article I wrote for Adobe, Working with flexbox: The new specification. I’ve covered the basic syntax of the latest flexbox spec here, but the article at Adobe walks through a demo using flexbox to build a responsive layout.

It starts with a single column, moves to a two column layout, and ends up as a three column layout. While it does, it plays around with some flexbox properties so you can see how easy it is to move columns around with a line or two of code.

The demos are actually here on the site. For the article I broke things up in seven different demo files, but you only need two of them to get most of what the others cover. I’ll toss in one more that’s a slight variation.

If you resize your browser on demo 3, you’ll see what parts 1 and 2 include. Similarly if you resize demo 6, you’ll see what parts 4 and 5 are about. Part 7 is a slight variation of demo 6 to illustrate a couple more things. If you’d really like to see the other demos check the URLs on any of these and I’m sure you’ll crack my ingenious code to find the others.

You will need to view the flexbox demos in either Chrome or Opera as those are the only browsers that support the latest spec at the moment. Firefox will support it after another update or two with version 20. If you’d to mix the newest spec with an older spec you can make the demos work on most browsers

I have some articles in the works for Smashing Magazine. I’m guessing most of you will see them when they’re published, but assuming I remember I’ll link to a few of them here once enough are published.

Enjoy.

The post Responsive Navigation And Flexbox — Some Articles I’ve Written Elsewhere appeared first on Vanseo Design.