theAdhocracy
Animating a grid element provides a lot of potential for fancy UIs and interesting interactions, but it's not immediately obvious when searching online how it needs to work and what the limitations are.
The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my …
There are a lot of new web technologies emerging at the moment which really feel like we're entering a new era. Over the last decade, the likes of HTML5, ES6+, flexbox etc. have brought the web, and …
An attempted experiment to replicate the blog layout of ilovetypography.com, which uses floats to great effect, with more modern CSS Grid and Flex techniques. Turned out to not be quite so simple, but taught me a lot about the benefits and limitations of CSS Grid.
An excellent overview of (most of) the unit options you can use in CSS Grid columns and rows, with examples. (No …
Well, it only took about a week of dazed puzzling, data tables, and tearing my hair out in clumps, but I think I may finally have a rough content taxonomy for theAdhocracy. A rough first version, that is. Let me explain...
Disclaimer: The title link is an affiliate link, which means I get credit if you use it to sign up. Not really why I made this post, but figured why not …
It turns out that there are a lot of gotchas to creating a clear category structure for media reviews. Well, after a year of messing around with various setups behind the scenes, I think I'm starting to get somewhere.
Rather than set a max-width on his main content grid, Ethan has used what he calls a constraint column. Basically, the right-most column on his grid scales with the viewport and restricts …
Just after the 10-year anniversary of his Responsive Design article on A List Apart, Ethan has published some interesting thoughts on the nature of seams within …
The new dominant layout methods in CSS – grid and flexbox – have solved a lot of issues. Still, sometimes the ideal layout is somewhere in the middle: a flexible grid-like mashup. With a bit of outside-the-box thinking, you can there from either angle.
I love Andy's new design over on Stuff & Nonsense. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made …
A follow-up to Andy's previous explanation of his compound grid layout in which they explain their logic behind a 4 + 5 compound grid a bit more. It's neat, but this description is what really caught …
Is an album's tracklist better suited for a table or a list? The answer may surprise you! (But it probably won't).
A look at the largely manual workflow I've used to convert my physical music collection into a digital data archive.
Craft CMS can be a very enjoyable mobile authoring experience, but it can be improved with some clever plugins and a few relatively new core features.
Styled Components have tripped me up a few times today, but I ended up learning some useful tricks as a result.
A lovely overview of much of the new CSS that has landed (or is landing) in browsers recently, and how that relates to component-led …
A few careful thoughts about the utility of "web marginalia", in this case for discovery; things like blogrolls, feed lists, and webrings. John wonders if their demise is in part due to the loss of …
Want to type a data object so that a given key (e.g. "foo") can only be paired with a specific type (e.g. Bar)? Now you can!
An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or …
Migrating content between fields in Craft is not as simple as it might be. In the wake of Craft 5, I've been getting a lot of practice, and wanted to write up some of the techniques I've been using.
A very clever technique of using combinations of flex-basis, asymmetrical flex-grow, or (for Grid) some quirky minmax() magic to generate flexible layout shifts that, in practice, …