Newsletter #37 - Open Props, Responsive Type, and a Resource Roundup!

January 3, 2022

Howdy and Happy New Year, partner! We've got a bunch of wonderful tools so that you're working smarter, not harder in 2022.


I hope you had a wonderful celebration ringing in the New Year! This week is pretty quiet with CodePens and articles, but we've got a nice roundup of resources to share with you!

Resource Round Up!

Open Props: Sub-Atomic Styles Open Props: Sub-Atomic Stylesopen-props.style

Adam Argyle has put together one of my favorite resources in recent years. It's a well-crafted set of web design tokens to build off of.

It comes with set colors, typography, spacing, sizing, and so much more, all set as CSS Custom Properties.

I'm rebuilding my personal site with it and it's been a joy to use. Even better, Adam is coming on the show to teach us all about it!

Design & Dev tools thread Design & Dev tools threadtwitter.com

Our friend Josh W Comeau shared an excellent collection of useful tools you can use in your next project.

They're all great, but a new one for me that I love is Polychroma, which helps you avoid the ugly gradients that can come from using RGB.

Fluid Type Scale - Generate responsive font-size variables Fluid Type Scale - Generate responsive font-size variableswww.fluid-type-scale.com

Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any existing design system.

I love these tools that help give you beautiful, responsive typography. I also love a similar tool, Utopia, as well as Typetura, a library that lets you make your entire design responsive: not just your type.

Open Props from above even includes some responsive type options!

Frontend Developer Resources 2022 - DEV Community Frontend Developer Resources 2022 - DEV Communitydev.to

Here's another great collection of resources by our friend Nick Taylor over in the DEV community! There's a ton here, so skim the sections you're really interested in!

fractils - Utilities for SvelteKit fractils - Utilities for SvelteKitfractils.fractal-hq.com

This SvelteKit utility library gives you helpful functions for implementing dark mode, intersection observers, local storage, and more.

Big thanks to Brent Morton from the Discord for sharing this!

So Long, Partner

It's a short holiday week here at the Horse, but we'll be back next week with a bit more.

As always, thanks so much for reading, and we'd love to see you join the community in the Discord. It's a wonderful and supportive place for friendly folks of any experience level.

(Also check out the Generative Art channel. David and Varun have been making some incredible stuff there!)

So long, and see you next week!

Your neigh-bor,

Alex

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters