Code

Bento grids offer a unique layout challenge for CSS. With the use of Tailwind you can create a flexible layout with modern CSS grid and @container queries.

In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?

Lazy loading doesn’t have to be difficult, here’s how to add smooth loading images to your website.

A common part of a website is the ability to search. Depending on how important search is to your website can define much of how it looks and how it’s prioritised in the design.

Icon fonts are used for their convenience, which generally can’t be matched by SVG. However, this post aims to guide you through the setup and get to a similar level of convenience.

With horizontal scrolling, submenus are quite challenging to make work. Due to the CSS you have to use, a CSS only solution isn’t viable. In this post I show you how to utilise JavaScript.

When using headroom.js, the fixed header can hide even when the navigation is open. This post shows how to prevent that using headroom's callbacks.

‘Coding up the pricing table designed in Illustrator. Flexbox handles the layout, keeping focus on matching the design and adding interactive button states.’

‘A CSS-only iOS-style toggle using a hidden checkbox and the :checked pseudo class with the adjacent sibling selector. No JavaScript required.’

As part of using Wordpress, and any other part of making a website, for that matter, you acquire reusable parts. As well as discover functions that aren’t shouted about. In this post I’ve shared a few with usage.

‘The tachyons approach to CSS makes sense, particularly for spacing and font sizes. This post explains the benefits and how to adapt it to how you already write CSS.’

An introduction to CSS scroll snap points and how they can replace JavaScript carousels. Covers the level one properties — note: this post is now out of date.