Awesome CSS Variables

Making a list of awesome CSS Variable resources and libraries (and dashing it twice!)

Table of Contents

• Guides
• Talks
• Demos
• Animation Engines
• CSS (Processors)
• HTML Processing
• Scrolling
• SVG

Guides

Getting Started

• A Strategy Guide To CSS Custom Properties – This article outlines the basics of using CSS Variables by comparing them to variables found in pre-processors such as Sass – by Michael Riethmuller
• CSS Custom Properties and Theming – This post shows how CSS Variables can be used to dynamically theme websites. This is a common problem when "white labeling" digital content – by Chris Coyier
• Using CSS custom properties (variables) – This is the definitive guide for getting started with CSS Variables. Like most of their other content, MDN continues to be the best place to learn in depth how web technology works short of reading the actual specifications.
• Learn CSS Variables for free – This free video series takes the viewer through the basics of CSS Variables, how to use them in theming, and how to change them through JavaScript – by Per Harald Borgen
• Individualizing CSS Properties with CSS Variables – This article is an exploration of using CSS Variables in different CSS Properties such as animation-play-state, transforms, and in color channels. As usual, a great and thoughtful read – by Dan C Wilson

Theming

• CSS Custom Properties and Theming – This post shows how CSS Variables can be used to dynamically theme websites. This is a common problem when "white labeling" digital content – by Chris Coyier

Positioning

• Making Custom Properties (CSS Variables) More Dynamic – This article explains how changing CSS Variables' values using JavaScript and using CSS inheritence can result in very dynamic webpages – by Dan C Wilson

• Hybrid Positioning with CSS Variables and max() – Lea shares a useful technique when you are using an absolute position element but still want a sticky behaviour – by Lea Verou

Responsive

• The trick to viewport units on mobile – This article explains why the vh unit is not always what we expect on mobiles and how to fix that using a single CSS variable – by Louis Hoebregts

Talks

• CSS Variables: var(--subtitle) – This talk from CSSConf.Asia 2016 shows a variety of ways to use CSS Variables as well as well as a deep dive into the syntax – by Lea Verou
• Interactive Web Apps with CSS Variables – This meetup talk from September 2018 shows advanced CSS Variable techniques and how to use them – by Christopher Wallis

Demos

• Easy Theming w/ the Color Picker (CodePen) – Tick the color you want to change the theme. The theme color switching is controlled via JS and simply changes a root CSS Variable's hex value – by Daryn St. Pierre
• CSS Vars – A Collection by Shaw (CodePen Collection) – A collection of pens using CSS Variables – by Stephen Shaw
• Megaman READY! (CodePen) – Reproduces the famous "READY" from the Megaman games without using JavaScript. This uses CSS Grid extensively and CSS Variables for timing and changing the end point of the exploding blocks – by Christopher Wallis
• Splitting: CSS vars for split words & chars (CodePen) – Examples of text effects built with Splitting: https://splitting.js.org. These animations/transitions are all done with CSS after Splitting adds helper spans & CSS Variables – by Stephen Shaw
• The Charmeleon from Null Island (CodePen) – This endangered chameleon species is usually spotted in the dense forests of Null Island. With special abilities like camouflaging to background colors and reacting to DOM hovers, it has an appetite for Defaultae Pointericus insects. Experimenting with the new lottie-api, CSS Variables and cursor possibilities – by Hernan Torrisi
• Custom properties – A collection by Goiblas (CodePen Collection) – A collection with examples of use – by Jesús Olazagoitia

Animation Engines

• Flipping – A library (and collection of adapters) for implementing FLIP transitions. It has multiple strategies for completing FLIP transitions. The CSS adapter supports using CSS Variables – by David Khourshid
• GSAP – "Ultra high-performance, professional-grade animation for the modern web." Among animation engines, the team claims it to be the fastest and the most backward compatible – by Greensock
• Just Animate – A general animation engine that uses the Web Animation API for style based animation and has its own animation engine with an extensible plugin system for animating SVG, CSS variables, etc – by Christopher Wallis

CSS (Processors)

• CSSPlus – A family of CSS reprocessing plugins that give you more power when writing CSS. It's called “CSSplus” because it's CSS plus JavaScript, the method most of these plugins use to add power to CSS is by having JavaScript dynamically update CSS variables with information about the browser and elements – by Tom Hodgins

HTML Processing

• Splitting – A JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more! Most Splitting methods utilize a series of s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS – Stephen Shaw

Scrolling

• BasicScroll – Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables – by Tobias Reich
• ScrollOut – Install ScrollOut and decorate elements with the data-scroll attribute. As elements become visible, data-scroll will be set to in and when elements are scrolled out they will be set with out. Add your own CSS or JS to make a big impression when things come into view. That's it! Use the cssProps to animate based on scroll position and to do parallax – by Christopher Wallis

SVG

• Lengthy – A JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations – Stephen Shaw

Polyfills

• IE11CustomProperties – A lightweight polyfill to enhance IE11 with CSS variables. Features: dynamic added content, respecting the cascade, pseudo-classes like :hover, js-integration (style.setProperty('--x','y')), and many more – Tobias Buschor

License

To the extent possible under law, Christopher Wallis has waived all copyright and related or neighboring rights to this work.