DEV Community

Cover image for CSS Resources from my Bookmarks
Dominic Duffin
Dominic Duffin

Posted on

CSS Resources from my Bookmarks

I've got a lot of bookmarks! So I'm going to share some of them on here! This may become a (occasional) series 😊

Text formatting

Deep dive CSS: font-metrics, line-height and vertical-align by Vincent De Oliveira

Alignment

Box Alignment Cheatsheet by Rachel Andrew

Animation

How to Use CSS Variables for Animation by Dennis Gaebel
Easy CSS Watermelon Slice animation tutorial by Muna Mohammed

Grid

Basic Concepts of grid layout - MDN
Grid fallbacks and overrides by Rachel Andrew
CSS Grid Layout and Progressive Enhancement - MDN
GRID: A simple visual cheatsheet for CSS Grid Layout
Grid by Example: A collection of Grid resources maintained by Rachel Andrew

Flexbox

Tweet by Ali Spittel on centering with Flexbox

Shapes

Experimental layouts with CSS Shapes and clip-path by Michelle Barker
CSS Shapes Resources by Kristopher Van Sant

Units

The new (and old) CSS units you've never heard about by Massimo Artizzu

Specificity

CSS Specifity by Emma Wedekind
CSS specifity and the cascade by Andy Bell

Responsive design

Using Media Queries For Responsive Design In 2018 by Rachel Andrew
Creating Responsive Diamonds Using Viewport Units by Meghan Sterling

General

CSS Tricks: css-tricks.com
CSS: From Zero to Hero by Ali Spittel
Things nobody ever taught me about CSS by Charlie Gerard
CSS Reference - MDN

Other collections of resources

Resources to Help You Create CSS Images! by Victoria Bergquist

Top comments (3)

Collapse
 
zed_m profile image
Amine Hammou

thank you!!
you also should add Wes Boss CSS GRID

Collapse
 
dominicduffin1 profile image
Dominic Duffin

Thank you - I'll look that up!

Collapse
 
angelarae63 profile image
Angela Whisnant

Awesome! Thanks for sharing!