#css variables

[sadricodes]

SadriCodes: Introduction to CSS Variables & Member Group Magic

A look at how CSS variables work, and how they can be used to reduce your copy/pasting time when making changes to your CSS.

Also includes a rundown on using the Jcink member group variable to create colours that switch according to the member that is logged in, and/or the member that is being viewed.

like my work? Consider buying me a coffee!

[insidehtml5]

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors | CSS-Tricks

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom

[insidehtml5]

DRY Switching with CSS Variables: The Difference of One Declaration | CSS-Tricks

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less

[insidehtml5]

Stunning hover effects with CSS variables – Prototypr

Build awesome, interactive hover effects with just 9 lines of code and two CSS variables.

[insidehtml5]

Thoughts about front-end development and design. And probably other ramblings by Una Kravets.

[kingkool68]

4,100 Benjamin Moore paint colors as CSS variables

From Wes Bos:

“I turned every 4,100 Benjamin Moore paint colours into CSS variables.“ https://bm.wesbos.com/

[whitebrd]

Theming With Variables: Globals and Locals

Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity. Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.

I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation.

[insidehtml5]

Logical Operations with CSS Variables | CSS-Tricks

Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could