GLOO – structuring your CSS

Back in the day, I had all my CSS in one file. Then I discovered Sass, and started separating everything out into different files. Today, I have a tried-and-tested approach to structuring my CSS to ensure it's tidy, powerful and easy to use. I call it GLOO, which stands for Globals, Layout, Objects and Overrides. … Continue reading GLOO – structuring your CSS

Using custom HTML attributes to define CSS state

TL;DR If an element should only have one state at a time, don't use classes, use custom attributes. <div class="tile" data-theme="dark">...</div> .tile[data-theme="dark"] {...} The old way Those of us who have been using off-the-shelf CSS frameworks for a few years will be familiar with the idea of using classes to define an element's properties. For … Continue reading Using custom HTML attributes to define CSS state

pShadow – a jQuery extension for gorgeous drop shadows

What's pShadow? pShadow, short for 'paper shadow', is a jQuery extension that adds realistic drop shadows to HTML elements, which works in Internet Explorer (IE8, IE7, IE6 with some clever trickery), Firefox, Chrome, Safari, Opera, and any other modern browser you care to mention.  It's free to download and use, and you can see an … Continue reading pShadow – a jQuery extension for gorgeous drop shadows