Eleventy in a Box
A premium Eleventy starter kit for designers and developers who want to spend less time setting up the same project structure and more time designing distinctive websites.
A premium Eleventy starter kit for designers and developers who want to spend less time setting up the same project structure and more time designing distinctive websites.
Contract Killer is plain and simple and there’s no legal jargon. It’s customisable to suit your business and has been used on countless web projects since 2008.
Free compound grid and modular grid layout generators, plus a set of HTML/CSS layout templates you can call on to make more interesting layouts, available to buy.
It’s incredibly important to respect people’s preferences and to ensure that any movement is turned off when they’ve set “reduced motion” in their OS settings. After adding my Magnificent 7 animations yesterday, I went back to check them with reduced motion enabled. Oh hell, my CSS grid has also stopped working, and it took me all morning to realise the issue wasn’t the grid, but how I’d structured my media queries.
When I started writing for CSS-Tricks, Geoff and I talked about what to put in my bio. He called me a “veteran” web designer. Geez, I felt old enough. So we settled on “pioneer.” That word stuck—and it’s what inspired the new set of animated pioneers now roaming my website.
Yours truly over at the Smashing Magazine: “SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? Web design pioneer Andy Clarke explains how he builds what he calls “adaptive SVGs” using symbol, use, and CSS Media Queries.”
Yours truly over at CSS Tricks: “There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.”
I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…
In this episode of Unfinished Business, Andy talks about what he learned from running an online layout workshop and Rich describes his new, up-coming conference, Web Day Out.
Last week, I hosted what I plan to be the first in an ongoing series of online workshops. Overall, the event went well, and here’s what I learned and how I’ll improve things next time.
Before my workshop last week, I made some changes to my Compound grid generator. After the workshop, I made a new grid generator tool, this time designed to create modular grids.
Yours truly over at the Smashing Magazine: “Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show.”
To get ready for my first practical layout workshop for designers this week, I upgraded my compound grid generator with a new and improved version.
Showing 51 to 60 of 1262 posts

I’m Andy Clarke, a product and website designer. My work blends art direction, branding, and editorial to help people improve their products and websites. I’ve written books about website design, given talks, and delivered design workshops worldwide.