Code

Making the hero area editable in Wordpress using the Customizer API with selective refresh. The final post in the series, adding a smooth live editing experience.

A reference guide to all the ways to retrieve post thumbnails in Wordpress — from inside a loop, on a page, in custom post types, and more.

How to use JSON-LD in Wordpress to replace Microdata for structured data. Easier to implement and keeps all schema markup in one place rather than scattered through templates.

An introduction to CSS shapes level one — polygon, circle, inset and ellipse. Covers use cases, strengths, and how to wrap text around shapes using shape-outside.

The inline-block method is an effective float based layout alternative. It’s easier to align and removes the need to clear floats.

How to enhance horizontal scrolling navigation with flickity.js. Adds touch and mouse drag support, making the pattern work well on Windows too.

‘How to maintain a perfect square in a responsive layout using CSS padding. A quick tip covering the technique and how to handle content within the square.’

‘A Finder-inspired pattern for toggling between horizontal and vertical scrolling layouts. Built with flexbox, making it easy to switch between compact and expanded views.’

CSS @supports lets you do feature detection natively, without Modernizr. This post looks at how to use it today and where it can replace JavaScript-based feature checks.

Despite the popularity of Bootstrap and others, there’s real value in building your own CSS framework. Here’s why you should consider it and what you gain.

‘Grunticon V2 added the ability to insert inline SVG, generating fallbacks for older browsers. Inline SVG is easily styled with CSS, all done via a Grunt task.’

Styling form elements consistently across browsers is tricky. This post covers using the appearance property on text, button and select elements as a base.