Recently, the Foo Fighters website has featured a countdown. We’ve yet to find out what it is counting down to. Whilst looking at the site on my iPhone, I noticed there is a clever parallax effect on the background image which is related to the position of the device. Naturally, as a curious front end…

A responsive demo showing reordering of content blocks at different viewport widths. This demo uses flexbox and the order property.

A Sass list to provide backgrounds for different hero sections and adding support for retina devices. The list contains 3 values per item – a suffix to the class selector, the default background image and a background image for retina devices.

For quite some time we’ve used the faux columns technique to create the appearance of equal height columns. With flexbox, this is no longer necessary.

Having just come across a situation where I need a container to scale its height proportionally to its width for a responsive site, I am posting my solution here.

We often have situations where we have elements sitting side by side in the design of a website and CSS has provided us with an easy way to achieve this using the float attribute. A common example might be the navigation on a website.

Ease development and maintenance of CSS without increasing http requests by the use of Sass partials

It seemed appropriate these magnets should be used on the Pentangle office fridge.

Thanks to FatWomble for putting together this video of this years Seloc Winter Warmer.

Huge thanks to Andibrook for booking this day with Llandow Circuit. Here’s a video of a few laps taken with the GoPro HD camera I won via Surfers Against Sewage.