Link: CSS Writing Modes

This article on 24 Ways by Jen Simmons is being linked to a lot these days, for good reason.

I had no idea about so much of this. It’s a whole new world of layout thinking out there.

Two level breadcrumbs with CSS :only-child

There was a situation where we had some breadcrumbs being produced by a CMS. The problem was that the breadcrumb appeared on the top-level page as well as it’s children pages. On the top level page it came across very redundant, and this single level breadcrumb would appear right above the page title. However, we wanted the breadcrumb trail to still appear on the second level pages.

Ideally, this kind of situation would be dealt with at the template level, and the markup would simply be absent. In this case, we couldn’t change the template, we could only change the CSS.

The solution was the CSS :only-child pseudo selector.

Read More1 Comment

Front End Testing with Wraith: A Step by Step Recipe

I had occasion to finally get to one of my goals from last year – and that was to introduce some testing to my front end development.

My goal was to have a way to have a before/after visual regression test. The open source Wraith project, from the BBC, fits the bill wonderfully.

This post is merely meant to be a step-by-step procedure to get Wraith up and running. I’m not going to provide any context to what each step means.

First off, this post assumes that you’re running Mac OS X, and already have Ruby installed. This post also assumes that you want to use the “history” mode in Wraith – where you are taking two snapshots of the same URL. (The “standard” mode requires two different URLs).

Read More4 Comments