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))); … | Continue reading
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 … | Continue reading
HTML tables are almost as old as the web itself, and have been used — and abused — for decades. Once upon a time, intrepid web designers hacked together complex layouts using tables, in the absence of other suitable methods. Thankfully that’s no longer common practice today, but … | Continue reading
Recently we published The time for designers to learn to code is now and it really resonated with folks. This is great! Our whole deal here at Piccalilli is to create content that helps people in the real world, working on real projects. With that in mind, we want to make content … | Continue reading
I like articles like this. It’s no way saying “you should replace GSAP” but more “hey, check out what you can do with CSS now” and hell yeh, check out what you can do with CSS now! I’ve only half been keeping an eye on the new CSS scroll animation stuff. I always wait to see cont … | Continue reading
This to me looks like a solid way to do things. I don’t agree with all of it, for sure, but I’m a big proponent of separating concerns. James breaks utilities down into 3 concerns: aesthetics, layout and spacing. Aesthetic being more like CUBE CSS Blocks, layouts being like CUBE … | Continue reading
In the challenge I was stuck with a suboptimal solution to little decorative dots. If you haven’t already read that, do that first. I’ll wait. Right, you’re up to speed, let’s dig in. A call to arms I was really impressed with the efforts folks contributed to this challenge, so I … | Continue reading
There’s a lot of pre-production going on here on the upcoming CSS course and part of that is answering “how do we make demos easier to maintain in the long term.?” I think David might have the answer for us. Take a look at this code sample: <p>Hello world</p> | Continue reading
Every now and then an article appears in your RSS which blows your goddamn mind. This is one of those, friends. It’s long, but honestly, it’s absolute gold. I think folks who work in client services like agencies and freelancers will find this especially useful, because ideas lik … | Continue reading
I’m a long-time proponent of progressive enhancement to the point where readers are almost certainly bored, but I am like I am because it’s important. I’ve been saying the following for years: We build for everyone. Not just for ourselves or our peer groups. Do you want to build … | Continue reading
Let us know if there’s anything missed in this, but at a minimum, you want to turn off “Content training” in your Figma organisation’s admin area. To reach the right section, from your organisation page in Figma, click Admin then the Settings tab. The “AI” settings are right at t … | Continue reading
A lot of thought is happening around “AI” and large language models (LLM) here at Piccalilli because we are flat against it. Sure using an “AI” assistant is pretty handy, but further poisoning the web with generated content slop is almost certainly going to have detrimental conse … | Continue reading
One of the most valuable things I ever did as a designer was learn to code. Initially, it was a baseline understanding so I could make CSS adjustments to front-end implementations of my design work. Developers never really got the attention to detail I was looking for, so I took … | Continue reading
I’m going to do this thing a little differently and start with my solution and ask for folks to come up with a better solution. The context is a little “eyebrow” heading, but the complexity is there are decorative dots each side. I’m close — with the help of magic numbers — but I … | Continue reading
We’ve been working on a pretty cool client project recently that’s got some fun branding which required some image masking. Y’know, this sorta thing: See the Pen Mask image by Andy Bell (@piccalilli) on CodePen. .masked-image { mask-image: url(https://assets.codepen.io/174183/m … | Continue reading
If you’re not aware of Geoff Graham, you should be. He’s outrageously good at educating folks. Heck, he’s a fully qualified teacher! He also was a huge part of the glory days of CSS-Tricks. He’s released a new course, simply named The Basics, focusing on HTML and CSS. I like that … | Continue reading
This is a fantastic article by Andrew Walpole, packed full of useful and pragmatic advice. I like this part the most: Specifically, sometimes you need to write some CSS that either you aren’t 100% confident about why you need it. This is the perfect place to express that skeptici … | Continue reading
This guide is designed to help everyone with Markdown, even if they have never written it before. It is deliberately simple. There’s links to further resources and learning at the end of the article. I’m not going to spend ages explaining what Markdown is or how it works because … | Continue reading
Sign up forms, they’re pretty common! What’s also common is for the submit button to float above the input, like this: There’s a problem though. A lot of the time, the input is behind the button, which in itself is too much of a risk for stuff going wrong. Worst, in some cases, t … | Continue reading
I put “AI” in quotes in my writing because the current iteration of “AI” is hardly intelligent. But, whether I like it or not, it is the colloquial term right now. I don’t think it’s a surprise to anyone that I am certifiably Not A Fan™ of “AI” either. I don’t like art and cultur … | Continue reading
This feels huge: Practically speaking this means that for the very first time in 11ty’s history, I will be working independently on 11ty full time. This means increased iteration speed, more responsive official support, more features and bug fixes, and faster releases. I’ve got s … | Continue reading
It’s no surprise to anyone that I would be in to this article. Rob does a fantastic job of breaking down the benefits of being the browser’s mentor, not its micromanager with a proper real-world example. This quote is so important: But, in my view at least, aiming for "pixel perf … | Continue reading
I like it when people grab a domain, craft a great piece of writing and then specifically design around it. This is what Michelle has done for the Manifesto for a Humane Web. It’s come at an important crossroad for the web. We’ve been here before with “web3” and crypto, which rig … | Continue reading
I’m completely fascinated by independent publishing. It’s mainly because I’m thinking a lot about the future of this publication, so let me explain what fascinates me about these publications. The first is The Cascade by Robin Rendle. You’ve almost certainly read Robin’s fantasti … | Continue reading
Back in 2022 I made this site: Be the browser’s mentor, not its micromanager. There’s some key principles on there which is a nice little collection of tiles. The trick during the talk — that I made this site for — was that the grid is actually progressively enhanced with masonry … | Continue reading
I love an article that presumes no prior knowledge and quickly gets everyone up to the same level with clear, concise content. I also love an article that is useful for me at a very specific time and guess what? Ryan’s article on SVG sprites is absolutely both. I’ve been around t … | Continue reading
This is just a quick one and something I never wanted to have to announce, but here we are: our RSS feed is back to being a full text RSS feed. This has (rightly) annoyed some folks because historically, Piccalilli always provided a full text RSS feed. Unfortunately though, since … | Continue reading
The set.studio site is powered by design tokens, which for colours, are hex codes. I managed to automatically convert those to P3 colours with a custom PostCSS plugin. | Continue reading
Elizabeth Meshioye runs down how animations can affect people negatively and how you can prevent that while still producing lovely, interactive work. | Continue reading
React’s version 19 Beta is boasting full custom element support so I cover how that could impact projects on our radar and how this new support will make an impact. | Continue reading
Inheritance truly is a superpower and it’s what makes developing on the web a joy if you embrace it. In this quick post, I’m going to convert you into a super fan. | Continue reading
Inheritance truly is a superpower and it’s what makes developing on the web a joy if you embrace it. In this quick post, I’m going to convert you into a super fan. | Continue reading
James Kerr explains how the Array.sort() function actually works! | Continue reading
James Kerr explains how the Array.sort() function actually works! | Continue reading
We’ve refreshed the look and feel of both the Piccalilli site and the brand so wrote up a little about that and the future of the platform. | Continue reading
We’ve refreshed the look and feel of both the Piccalilli site and the brand so wrote up a little about that and the future of the platform. | Continue reading
Heydon Pickering unleashes the power that CSS gives us with selectors and custom properties to create handy tests to make sure your markup is up to scratch. | Continue reading
Heydon Pickering unleashes the power that CSS gives us with selectors and custom properties to create handy tests to make sure your markup is up to scratch. | Continue reading
Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS. | Continue reading
Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS. | Continue reading
Scott Jehl has written a super detailed run-down of how they tried to recreate Wordle with HTML and CSS. | Continue reading
A big part of the Piccalilli Links thing is I want to elevate good writers. I need help discovering those writers though! | Continue reading
Bored of the same old card demos for Container Queries and struggling to see where you’d use them in real projects? I was too until Ahmad Shadeed published yet another great guide. | Continue reading
David Bushell shares some unbelievably good tips on styling buttons and explains exactly how they work too. | Continue reading
We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out. | Continue reading
404 Media has invested really well in RSS and broken all the decisions and process down in a nice article. | Continue reading
The one and only Vitaly Friedman takes a deep-dive into a lesser thought about focus of user-centric design. | Continue reading
Jason Grigsby asks for data to support an apparent preference for people defaulting to links opening in new tabs. | Continue reading