July 28, 2021
(Updated: November 04, 2021)
The ever evolving styles of the web. With the growing complexity of websites, frameworks becoming the norm and bundlers controlling the output of our production code there is a heck of a lot to learn and keep up with.
Follow/Read
Adam Argyle is a great follow on twitter for anyone interested in CSS snippets, topping up your general knowledge and seeing whats on the horizon and being added to browsers.
A great article from @soMelanieSaid on using position sticky with css grid items. This was reference I used when positioning the sidebar content on this site.
Read/Bookmark
The ultimate guide guide to flexbox. CSS tricks nailed this one and it's one of the best and easiest to understand guides out there
Read/Bookmark
Another great CSS layouts guide from CSS tricks. I find myself referencing this a lot stored some snippets for easy access.
Watch/Admire
This is where it all started for me and Devtips holds a very dear place in my heart. A lot of it may be outdated but I'm leaving it here for the memories.
Pseudo classed are incredibly powerful things. I use :after and :before all of the time and it often gives a more elegant and readable solution. This article will help you learn about that and more.
Create smoother box-shadows with some techniques from Tobias. Philipp Brumm also created this tool inspired by the article. One thing I would love is if it created several box-shadow classes with varying sizes and strengths.
A comprehensive introduction on creating and styling Layout wrappers. I'm a big fan of this article because it covers a lot of use cases.
Ahmed has wrote a great post for those wanting to familiarize themselves with min(), max() and clamp() CSS functions. I'm excited for this addition to the language and it will revolutionize responsive declarations.
Read/Guide
A solid animation guide from Matt Perry (@mattgperry). Useful to anyone regardless of whether you’re using Motion One or not.
Pure CSS Patterns
A little gem from Josh Comeau's CSS for JS Devs course and one of the better ones I've seen out there.
Responsive Design Previewer
Tweeted by none other than @addyosmani (so it's bound to be good). I've got to say it's absolute bliss being able to see all of the screens I care about in one space side by side, and it even updates if you're using hot reloading.
Useful Layout Snippets
@Una has collated 10 modern CSS layout and sizing techniques which anyone can benefit from. CSS again proving how powerful it can be.
1kb Solution
A tiny library which takes a lot of inspiration from how Styled Components and Emotion have approached CSS-in-JS. One I'm keen to try and what's even more impressive is that it's framework agnostic!
Near Zero Runtime
There's been a lot of talk about Stitches.js in the twitterverse for its developer experience and the hype seems real. Created by the Modulz team which are well known for outputting quality packages.
Do you know a resource that could benefit another reader and is relevent for this page? Let me know by leaving a short message below and I will take a look!
Like the content I'm creating? Show some love and:
Buy me a Coffee