Custom Styling Form Inputs With Modern CSS Features
If you've been using pseudo elements for styling custom checkboxes and radio buttons, you'll know it can be a fiddly beast. Modern CSS features give some new ways to manage these. Custom properties, support queries, not pseudo classes can make this a bit nicer but the real bonus is being able to add pseudo elements to input fields!
This post by Aaron Iker over at CSS Tricks is a good run down of how to upgrade your custom checkbox fu.
Read the post Custom Styling Form Inputs With Modern CSS Features
Creating a full bleed CSS utility
Not sure how many times I've needed to do this, but its lots. Andy Bell's technique for breaking out of a fixed-width container and going edge-to-edge is great. Like all great CSS "tricks" it made us all wonder how we never thought of it (nice new site design too)
Read the post Creating a full bleed CSS utility
Utopia Responsive Typography... er... thing
This looks like a very clever bit of CSS for scaling your type on a modular scale. I like how they've split the explanation into a designer perspective and a developer perspective. Disclaimer: I don't fully understand this yet 🥴
Why the GOV.UK Design System team changed the input type for numbers
Great post from the must-read tech blog from the GDS folks. Really interesting and some good points on why the number field is problematic and probably doesn't work like you would expect and some tips on how to get a text field to work more like you'd want the number field to.
Read the post Why the GOV.UK Design System team changed the input type for numbers
Bonus reading: Phil Nash on using some of the same techniques and some cool autocomplete values to improve the UX of one time code fields - HTML attributes to improve your users' two factor authentication experience
Google Fonts does variable fonts now
If you don't know what variable fonts are, go take a look online. They are pretty cool.
Check out the variable font options at Google Fonts
Tiny Dev Helpers
Here's a handy site with a bunch of useful single-purpose online tools to help with web dev
Check out Tiny Helpers
Composer plugin for installing and managing Twig bundles
A handy plugin so you can install and manage a bundle of Twig files in your templates directory. Super handy for installing and updating your code across multiple projects.
Github link to Twig Bundle Installer
Handling Whitespace in Twig
This tweet showing the cool ways you can handle whitespace in Twig is definitely one to bookmark
While You Weren’t Looking, CSS Gradients Got Better
CSS Gradients: Brilliant but I can never remember how to wrote them. The recent updates are going to make that part a little bit easier. This post by Ana Tudor at CSS Tricks explains all.
Read While You Weren’t Looking, CSS Gradients Got Better
Have you seen any cool stuff lately? Why not tell us all about it on Twitter
