We've got this pattern on the Set Studio website. It's three summaries with headings that render in a three column grid which as the viewport reduces in space, automatically stack.The three column grid part is pretty straightforward, we're first using this little layout composition..grid { display: grid; grid-template-columns: repeat( var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr) ); gap: var(--gutter, var(--space-l));}Then we're hinting the browser to make it a three column grid, where it can, using a CUBE CSS exception..grid[data-layout='thirds'] { --grid-placement: auto-fit; --grid-min-item-size: clamp(16rem, 33%, 20rem);}If we just leave the CSS like that (with a little help from our base styles), its looks ok, but the differing heading lengths at narrower viewports creates an awkward reading line. Ideally, each of those summaries will be on a consistent, horizontal reading line.To see this demo, head over to the web version.We're using CSS grid alr

I'll start by saying I am very much an AI-sceptic — at points, seething at the whole landscape. What I do appreciate though is that the genie is already out of the bottle and it's too big to fit back in. AI is going nowhere, although the current tech hype cycle increasingly looks fragile.It's the exploitation that makes me mad, especially. I run this publication and AI has stolen everything. Not just this publication either because it's even stolen premium content, such as Every Layout.To combat this theft-by-default policy, Cloudflare have come up with a "pay per crawl" system.The way it works is a Cloudflare-served site — just like this one — can return a 402 status code, indicating that a payment is required for a crawler to access a page. Along with that, the publisher can set a crawler-price header, indicating how much a crawler needs to pay to crawl that content.Crawlers either have to come back, indicating a willingness to pay, or proactively determine a crawler-max-price. As lo

Every Layout’s Sidebar exemplifies a quantum CSS layout, perhaps better than any other layout we offer.It is neither a two column layout, comprising elements with fixed and fluid widths, nor a single column layout comprising two vertically stacked elements. It’s both, and neither. It adapts, automatically, to context — with no @media or @container queries required.The Sidebar is versatile too. It can set out the vertical navigation and main content of your page, and it can form intrinsically responsive media blocks, wherein the sidebar is an image.But, even as I’m writing about it now, the name Sidebar bugs me. The layout, as specified, is not actually a sidebar. A sidebar is just a (relatively) narrow element. The Sidebar is a layout that includes a sidebar. Necessarily, there are three elements in total: a container, a designated sidebar element, and an accompanying element to take up the remaining space.Consequently, the code uses the term with-sidebar to define the container. Gramm

We recently put out a short survey to get a temperature check on some future ideas and the stuff we're already doing. We got a modest response — 180 respondents — and learned quite a lot from those.Thanks so much to everyone who responded!Let's break down some key questions:“If we explored short, focused, cheaper courses, would you be interested?”A very surprising 76% of respondents backed this idea. It's surprising because we don't tend to see many short courses around, aside from on platforms that charge a monthly fee.We're not interested in charging a monthly fee, but what we are interested in is publishing more courses. A full course takes an unbelievable amount of time and effort to produce and it's a hell of a risk for both author and publisher.Our thinking is by doing shorter courses, we can better expand the diversity of course authors on the platform and vastly increase the volume of our offering. Our pricing is very competitive already, but £249 is a lot of money. By offering

It's not often I'm in the market for CSS processing tools. I was very into Sass but stopped using it when CSS became more capable and PostCSS became more useful to me.PostCSS is very useful for me and the wider team. Here's what our postcss.config.mjs file looks like for this website:import postcssGlobalData from '@csstools/postcss-global-data';import postcssImportExtGlob from 'postcss-import-ext-glob';import postcssCustomMedia from 'postcss-custom-media';import cssnano from 'cssnano';const isProduction = process.env.NODE_ENV === 'production';export default { plugins: [ postcssGlobalData({ files: [ './src/global/variables.css' ] }), postcssImportExtGlob(), postcssCustomMedia(), isProduction && cssnano() ]};This setup allows a couple of useful features for us such as defining non-standard custom property-like variables for media queries, for when we actually need them.The main thing PostCSS does for us though is importing globs, such as this:@import-glob 'compositions/*.css';@import-glo