Entries tagged with “CSS”

Rebuilding the Leading Design grid

Last year when I worked at Clearleft, I built the website for Leading Design Conference. CSS Grid would have been the perfect approach for this, so I've recently rebuilt it in codepen...

This is a beautiful case study.

I love the animations and use of new CSS like CSS Grid and Feature queries.

CSS Color Module Level 4

I recently wrote about CSS variables, which is a feature that we have previously only had available to us in preprocessors. Preprocessors have also given us color functions, allowing us to manipulate colours...

What you might not know about CSS variables

CSS variables or "Custom Properties" (as per their correct name) allow you to use variables directly in CSS, with no compiling...

An introduction to CSS Grid

I recently ran a class at work to introduce some of my colleagues to CSS Grid. Here's what we covered....

WTF, forms?

Nice custom form styles with explanations and a CSS file.

Part 3: We might not need quantity queries thanks to Flexbox

I've learnt that we don't need quantity queries to create a balanced grid. Quantity queries are very powerful, but so is Flexbox. If we just want all the items in the last row to fill the space, regardless of how many there are, then Flexbox can take care of this...

Quantity queries and Flexbox part 2

A while ago, after reading Heydon Pickering's article on quantity queries, I had a go at it myself. I wrote a post on how we can use quantity queries in CSS to alter the width of items in a grid depending on their position in the grid. Since writing that post I've realised that I didn't use Flexbox or nth-child to their full potential. The CSS can be written more efficiently....

Pragmatic, Practical, and Progressive Theming with Custom Properties

I love this use of custom properties by @csswizardry. Custom properties and @supports are my favourite things right now!

Why I'm Excited About Native CSS Variables

Philip Walton looks at the differences between custom properties and Sass variables... and why they're awesome.

@supports will change your life

Here's an exciting feature in CSS, which may be about to change your life.​...

Magic randomisation with nth-child and Cicada Principle

The combination of nth-child and cicada principle is a clever technique used for faking the randomisation of patterns. ...

Using Feature Queries in CSS

Everything you need to know about feature queries.

Revisiting the Float Label pattern with CSS

Emil's CSS only version of the float label pattern.

Inline SVG spriting and currentColor

A very common use for SVGs are icon systems. When building these I've always gone by a general rule: Add decorative images as background images in CSS and add meaningful images in HTML with appropriate alternative text. This time however, I needed to make an icon system with the flexibility of being in many different colours. So I turned to the currentColor variable in CSS....

CSS only accordion

A CSS only accordion example in codepen.

The new CSS Layout by Rachel Andrew

A great talk on Flexbox and Grids.

Teaching the order of margins in CSS

At codebar this week, I was paired with a graphic designer who was just starting her HTML & CSS learning journey. I really enjoyed working with her because she wanted to understand everything, and because of this, I found a nice way to explain the order of margins in CSS....

A simple HTML5 Progress bar

HTML and CSS for a simple progress bar with a fallback...

Building for retina devices

There is a useful section on adding image-set to CSS for retina devices

Cool things we can do with CSS

​Today I shared my list of "Cool things we can do with CSS" at a brown bag lunch at Clearleft....

Day notes: CSS icon transforms

I'm interested in creating subtle animated effects on icons using CSS, so I've started to playing with some on Codepen...

CSS counter property

Numbering items with the counter property in CSS...

What a CSS review might look like

A great article on what to consider during a CSS review.

Messing with quantity queries in CSS

I recently read posts by Aaron Gustafson and Heydon Pickering about quantity queries, and I thought they would make a really good continuation to my previous post on flexbox grids...

Building a CSS toggle feature with :checked and flexbox

I wrote a post a while ago when I learnt how to use the :checked pseudo class to build a toggle feature. This week, I have created another toggle feature, still using CSS only, which is much more exciting than the first...

Flexbox in 5

This takes you through a series of steps to create flexbox layouts. I like the explanations that go with each step. A nice tool for learning the basics.


This is a playground for learning flexbox. I also like that it shows all of the vendor prefixes in the generated code.

Leveling Up With Flexbox (SmashingConf Oxford 2014)

A great talk by Zoe Mickley Gillenwater on learning Flexbox and how it can be used as progressive enhancement.

An equal height grid using Flexbox

I've been getting a little excited about Flexbox recently, so two weeks ago I wrote an introduction to it. Since then, I have experimented with Flexbox to solve a CSS problem that I used to see all the time when I first started working in web development ...

A guide to Flexbox - CSS Tricks

A great starting point for learning Flexbox.

With a spoonful of flexbox

​Flexbox is a smart layout module which offers a more efficient way of laying out items in a given space. One of the key strengths is it's ability to calculate space...