Piccalilli - Everything

Big fan of and checking in but what I don’t like is having to add extra elements to present a nice look and feel for them. Dealing with the disclosed content also requires extra elements if you want to apply a layout, for example. It looks like that is changing though! I’m especially looking forward to giving the new ::details-content...

FYI We have news! We're in the home straight, finishing up Complete CSS and with that, we have a launch date: November 26 at 12pm GMT. Sign up to get updates and we'll email you as soon as it is live. We've been working on Complete CSS since February 2024. The aim of the game for me was to pull together all of the stuff I've been talking about...

Josh is here again with another stunner of an article and they’ve done a fantastic job of demonstrating how useful container queries can be in the real world. This is a really important part: I don’t think most designers are even aware that they have this exciting new capability. It’s our job to share these developments with them, so that they...

This post is a great run down of how much thought and consideration goes into making form validation actually useful. This part really stood out to me: However, if not well-designed, in-line error messages can become overwhelming. For example, flagging a field as incorrect after just one character can be disruptive, especially if the person...

A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well. An example of this is a “Simple List” component I was helping to make. It’s a workhorse component,...

You’d think design systems are a utopia of planning, modular code and governance but I’m sorry to tell you that one of the many things that will take up a lot of your time in a more mature system is Snowflakes: A ’snowflake’ in a Design System is a one-off component that could be needed for a specific project, but there is an understanding that...

The first sentence of this great article is the most important: I don’t mind HTML email, but it really can be overdone. There is a tendency to do too much. We try to keep emails that come from here super simple but we still get a couple of issues with Buttondown. We’re actually looking at going back to using Postmark, so a super simple template...

Let’s start with a brief, mostly subjective history of web tech. A long long time ago, web development was pretty much a single discipline where any developer would work throughout their stack. Most would be armed with a backend language or framework, HTML and CSS, with a sprinkle of JavaScript. Then the demands for richer and richer user...

FYI A break from our usual type of article here but it is very important we do because WordPress powers nearly half of the web. You may or may not be aware of the situation unfolding with Automattic and their CEO Matt Mullenweg against WP Engine. I recommend reading the following to get up to speed. We’re not in the business of adding opinion to...

I love to see resources arrive that are specifically for beginners. This new resource by Blake Watson is exactly that and it’s all about the most important language of the web: HTML. I’ve had a read through and it was a great bit of skill refreshing for me, so even if you consider yourself to be a good developer, check it out yourself. There’s...

When the gov.uk team offer a rundown like this, you have to read it because that team are some of the best in the business of great user experience. We’re so lucky in the UK because anything government related is so easy to use. They are, of course very into progressive enhancement to achieve those excellent results. For users to experience a...

We’ve all been there—rushing to meet a deadline, we throw together a dropdown menu or modal without fully considering its accessibility. But what if making a few small changes could drastically improve the experience for a broader range of users? Accessibility doesn’t have to be a daunting task or a compliance box to tick. It’s about creating...

Being the co-author of Every Layout and a super fan of wildcard selectors, as you can imagine, my mentions and DMs have been riddled with “wildcards are incredibly inefficient” for years. I of course brush that off because as Trys says in their article, browsers are very efficient at handling CSS selectors. When this article landed in my RSS...

I’ve always been a Richard Rutter fanboy, so seeing my CSS reset cited in their new reset fills me with pride. When it comes to web typography, Richard knows more than most and shares this vast knowledge really well with TODS. There’s a near 100% guarantee (unless you’re actually Richard) that you will learn at least one new thing about OpenType...

If you’ve spent plenty of time wading through modern JavaScript, odds are you’ve seen enough ellipses (...) to put even the most brooding 90s role-playing game protagonist to shame. I wouldn’t fault you for finding them a little confusing. Granted, I wouldn’t fault you for finding anything about JavaScript confusing, but I’ve always thought those...

My stance on masonry arriving in CSS is pretty clear: get the focus situation sorted and then I might be more interested. I personally think masonry is quite an antiquated design pattern, but it still finds itself on the web a lot so not needing JavaScript for layout is only a good thing. I’ve not been subscribed to the idea of masonry being...

What I really like about this article is how Josh explains how :has() works. They’re especially good at that sort of thing. There’s lots of good real-world examples in there too which compliments the vibe I was trying to achieve earlier in the year. We need more real world examples like this! I’ve long said flexbox was my all time favourite CSS...

A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one. The hope is it demystifies the humble button and encourages folks who reach for a and a JavaScript handler to use semantic elements. What we’re building We’ve got a pretty standard button with three variants, a...

I’m highlighting this new redesign of Ahmad Shadeed’s website because it ticks so many boxes for me as excellent work. First up, it’s clean, considered and uses typography and space really well. Ahmad’s site is a combination of a personal site and a professional site and they’ve rightly allowed space in their design while delivering flair in...

Look, Twitter is trash now, let’s be honest. It used to be a gold mine for discovering stuff as a developer, but since the Musk takeover, finding anything of value is hard. We’re all fragmented now too, spread around Bluesky, Mastodon, Threads and LinkedIn, so finding stuff is still tough on social media. I’ll always back RSS — it’s why we...

I’ve mentioned it before but practical, easy-to-understand articles are what make things stick in my brain. That’s exactly what Ryan Mulligan has cooked up for us. I’ve only slightly touched @property — mainly for container filling text — because I don’t really do high interactive stuff. I’m starting to see how @property could be useful away...

Our first course is going live this year and it’s all about CSS! Well not all, but we’ll let the Complete CSS page explain just what that is about: …you can spend all the time in the world focussing purely on your CSS knowledge, but top level front-end development is much more than writing code. It’s also about communication, planning and...

I will be completely honest, I don’t know performance dev tools as well as I probably should. I always find articles and talks on performance fascinating but when I come to learn stuff myself, my eyes often glaze over. Articles like this are really helpful though because it’s a real world problem that I’m sure a lot of us have unwittingly done:...

I’ll always share a simple solution because simple is almost always the best option. Theme preferences and toggles are one of those things that can be super over-engineered, so it’s great Christopher has come through with a simple solution for the former. It’s something that’s still at the forefront of my mind since we’ve redesigned this site....

We recently redesigned this site and a part of that was a sidebar-based article view. That aspect was fine because the Every Layout Sidebar is designed to deliver that layout with no fuss. I threw a spanner into the works though because we have a component named and I wanted it to span the full width, including the sidebar because it needs room...

I love to see this sort of thing. In fact, nothing makes me happier on the web than seeing something simplified and improved because of that simplification. This article demonstrates that beautifully and teaches you how to write some pretty dang solid CSS that is battle tested in the real world. What also makes me happy is accessibility was...

I can’t believe Piccalilli links have been here since January and I still haven’t plugged the book I co-wrote with Heydon. We first published the book 5 years ago and it’s now in its 3rd addition. I’m biased, sure, but we still religiously use these layouts to build stunning websites over at Set Studio. In fact, these layouts are the first thing...

In the 2023 edition of State of CSS, the demographics were as follows: Over 50% of respondents were between 25 and 44 Over 30% of respondents earned $50k or more Over 60% of respondents identified as male Sure, the demographics are seemingly improving year-on-year but to get a true reflection of the industry, we’re asking — possibly even begging...

FYI This is the third and final part of our series on redesigning Piccalilli. To get the most out of this article, we recommend you start from the top. At this point, we’ve completed the design work and have also produced a backlog of production tasks, so I’m sorry to say, the build is actually quite boring to write about. It’s boring because at...

I won’t provide any spoilers because Chris’ writeup is really good with a nice real world example. The only commentary I will add is using container queries for everything — including fluid typography and space — might feel like a good idea on paper, but you lose global flow and rhythm by doing that. For example, if you use container units for...

I, like Jim, am also a keen(ish) golfer. Let me tell you about Golf: it’s one of the most over-engineered sports — quite possibly the most — out there. If you, like Jim says, watch the plethora of videos on social media you will almost certainly make golf not just more expensive, but also a joyless pursuit for yourself. I went down the...

FYI This is the second part of our series on redesigning Piccalilli. To get the most out of this article, we recommend you read the first part. After getting through our first sprint we have now completed our second and last sprint of the prototype design phase of our full redesign of Piccalilli. View full size" /> We’ve done the first sprint, so...

I fawn over Heydon’s writing a lot, but for good reason: they are very good. Step up their new article about the humble HTML anchor element () which not only explains what it is and how to use it correctly, but also how it all works under the hood of the browser too. Very interesting and very critical reading. Let’s hope Heydon does in fact make...

More posts like this please. Short, snappy and handy! I chuckled at the absurdity of conflicting rotation values in the resulting code, but it does the job perfectly well for what Robin was trying to achieve: animating around a shape, not spinning. I’m not sure when I would use this technique, but I know I will in the future and this is going to...

For the longest time, I’ve had “do an article about why position sticky probably isn’t working” item on my articles to write list and I’m glad to tell you, I have removed that item today because Kilian has nailed it. The position: sticky capability is unbelievably useful, but it comes with many little quirks that prevent it from working as...

As promised in our link to Roman Komarov’s ‌Fit-to-Width Text: A New Technique article, I have implemented it and tweaked a couple of bits for our context. The context My upcoming CSS course is in full production mode at the moment and a big part of the course is that we’re building a front-end for a fictional barista academy in London. There’s...

I like posts like this: quick, actionable CSS that will improve both the visual appearance and the overall user experience. Here’s my favourites from the collection: Increase the body text size Increase the line between rows of text Wrap headings in a more balanced way They’re all super quick and easy to apply. I’d also recommend this article on...

I’m big on progressive enhancement but on real world projects, you gotta account for there being no JavaScript available for highly interactive elements. The ol’ no-js class or in CUBE CSS projects, a data-js="none" exception has been the go-to for years, but utilising a media query like David shares with us is pretty handy. If you ever wanted...

A browser extension has interfered with the site A spotty connection hasn’t loaded the dependencies correctly Internal IT policy has blocked dependencies WIFI network has blocked certain CDNs A user is viewing your site on a train which has just gone into a tunnel A device doesn’t have enough memory available There’s an error in your JavaScript...

It’s something I am terrible for when using grid: not naming my grid areas and tweaking grid-column or grid-row values until it looks right 😬 This guide has been really helpful for me though. For example, I completely forgot you can name not just grid areas, but grid lines too! I still don’t really use grid much other than for very specific...

Fit text is very much at the front of my mind at the moment. Those who attended my Smashing Workshop on scalable CSS will certainly attest to that. In the workshop, we achieved it with this sorta rule: font-size: var(--container-fill-text-size, max(15cqi, var(--size-step-10))); This allows for progressive enhancement because a web component...

Piccalilli is evolving into a more ambitious publisher and a big part of that is a brand refresh and full visual redesign. It’s a very large iteration of a longer term roadmap for the site which we’re undertaking here at Set Studio. I thought it would be a good idea to give you a peek behind the curtain at our process. It’s a rare treat for us...