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.
- Examining Responsive Navigation Patterns
- Examining Responsive Navigation: Footer Patterns
- Examining Responsive Navigation: Toggle Patterns
- Examining Responsive Navigation: Off Canvas Patterns
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.
Download a free sample from my book, Design Fundamentals.
what viewport can i use
with last release
of flexbox
regards
cesare casadonte
Do you mean what browser support flexbox? The newest spec works on Firefox, Opera, Chrome, and the Blackberry browser. For Chrome and Blackberry you need to use the -webkit- vendor prefix.
An older version of flexbox works with most other current browsers.
Right now the 2 holdouts are IE9 and below and Opera mini. I don’t think there’s a way to get flexbox to work on Opera mini, but for IE you can use the Flexie.js polyfill.
I have experimented with one of the previous incarnations of flex-box and ran into an odd quirk with Firefox when a flex-box child div contained fluid images (no width/height attributes on the “” tag, width max-width:100%; height:auto;)
Essentially Firefox makes the height of the flex-box child element the same height as the natural height of the images contained in the flex-box child div, even though it respects the max-width rule and restrains the image’s width to 100% of the container element. Any insights as to whether this will be fixed when Firefox 20 rolls out with support for the new Flex-box syntax?
Interesting Chris. I haven’t run into that, but mainly because I haven’t tried to do the same thing. When I have a free moment, I’ll try to duplicate what you found with the new flexbox spec and let you know what I find.
I suppose we’ll have to wait for FF 20 to make an appearance first.
Was it only Firefox where you saw the issue or did it occur in any other browser?