dConstruct and Responsive Design - Ubelly
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).
Tags: css3
93
Wednesday, September 7th, 2011
Saturday, August 20th, 2011
Sizing with CSS3’s vm and vh units - Snook.ca
Once again I’m getting all my CSS3 information from Jonathan. This time he’s discovered the vw and vh units which allow you to specify sizes relative to the size of the viewport.
Thursday, August 18th, 2011
davidnewton.ca | The Current State of Hyphenation on the Web
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
Tuesday, August 16th, 2011
Re-flex
I was in Minnesota last week for An Event Apart Minneapolis. A great time was had by all. Not only were the locals living up to their reputation with Amy and Kasia demonstrating that Kristina isn’t an outlier in the super-nice, super-smart Minnesotan data sample, but the conference itself was top-notch too. It even featured some impromptu on-stage acrobatics by Stan.
A recurring theme of the conference—right from Zeldman’s opening talk—was Content First. In Luke’s talk it was more than a rallying cry; it was a design pattern he recommends for mobile: content first, navigation second. It makes a lot of sense when your screen real estate is at a premium. You can see this pattern in action on the Bagcheck mobile site (a button at the top of screen is simply a link that leads to the fragment identifier for the navigation at the bottom).
Later on, Eric was diving deep into the guts of the CSS3 flexible box layout module and I saw an opportunity to join some dots.
Let’s say I’ve got a document like this with the content first and the navigation second:
<body>
<div role="main">
<p>This is the main content</p>
</div>
<nav role="navigation">
<p>This is the navigation</p>
</nav>
</body>
Using box-orient:vertical and box-direction:reverse on the body element, I can invert the display of those two children from the order they appear in the source:
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
If I wrap that in a media query, I can get the best of both worlds: content first, navigation second on small screens; navigation first, content second on larger viewports:
@media screen and (min-width: 30em) {
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
}
Works a treat (once you include the necessary -webkit and -moz prefixes).
I thought I’d take it a bit further. Suppose the navigation has a list of links:
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
I could use flexbox to lay those items out horizontally instead of vertically once the viewport is large enough:
@media screen and (min-width: 30em) {
[role="navigation"] ol {
display: box;
box-orient: horizontal;
}
[role="navigation"] li {
box-flex: 1;
}
}
Here’s the weird thing: in Webkit—Safari and Chrome—the list items reverse their direction: “baz, bar, foo” instead of “foo, bar, baz.” It seems that the box-direction value of reverse is being inherited from the body element, which I’m pretty sure isn’t the right behaviour. But it can be easily counteracted by explicitly declaring box-direction: normal on the navigation.
What’s a little trickier to figure out is why Firefox is refusing to space the list items equally. I’ve put a gist on Github if you want to take a look for yourself and see if you can figure out what’s going on.
Update: You can see it in action on JSbin (resize the view panel).
The new CSS3 layout modules and responsive design could potentially be a match made in heaven …something that Stephen has been going on about for a while now. Check out his talk at Mobilism earlier this year.
You’ll notice that he’s using a different syntax in his presentation; that’s because the spec has changed. In my example, I’m using the syntax that’s currently supported in Webkit, Gecko and Internet Explorer. And, as Eric pointed out in his talk, even when the newer syntax is supported, the older vendor-prefixed syntax won’t be going anywhere.
Wednesday, August 10th, 2011
Techniques For Gracefully Degrading Media Queries - Smashing Magazine
There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.
Monday, August 8th, 2011
Rethinking CSS Grids| Mark Boulton
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
Friday, August 5th, 2011
Bruce Lawson’s personal site : HTML5, hollow demos and forgetting the basics
A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.
Let the Web move you-CSS3 Animations and Transitions | Web Directions
John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.
Monday, May 30th, 2011
Chloe Weil
Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.
Tuesday, May 17th, 2011
Layer Styles
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
Friday, May 6th, 2011
css Zen Garden: All-In-One
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
Wednesday, May 4th, 2011
Font sizing with rem - Snook.ca
Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.
Friday, April 29th, 2011
David Emery Online: Response
David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.
Thursday, April 21st, 2011
FFFFALLBACK - A simple tool for bulletproof web typography.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
Friday, April 1st, 2011
Media Query Test
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
Tuesday, March 29th, 2011
Madmanimation
Andy just debuted this at An Event Apart—lovely stuff.
Thursday, March 17th, 2011
Ribot - interface innovation
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
Thursday, March 10th, 2011
Showcase: Pop-Up Book in HTML and CSS | eleqtriq
A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.
Friday, March 4th, 2011
yepnope.js | A Conditional Loader For Your Polyfills!
A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.
Thursday, February 3rd, 2011
The New Bulletproof Font-Face Syntax | Fontspring
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.