Open Props — Supercharged CSS Variables

Adam Argyle released a new project named Open Props. Similar to the aforementioned Pollen, it’s a library that offers nothing but CSS Custom Properties.

Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.

Once included, you can use the Custom Properties the library provides: colors, margins, paddings, gradients, shadows, font properties, aspect-ratios, … even some basic animations or a conditional border-radius — they’re all there, exposed as Custom Properties!

@import "https://unpkg.com/open-props";

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

I like this very much. Very, very much. Unlike Other Projects™, Open Props nails the “We need Design Tokens” problem by simply making them available in CSS (or via JS if that’s your thing). It doesn’t require you to set up a build pipeline, nor does it enforce you to discard CSS for a re-implementation in another language. You can keep on using what you already know: CSS.

Open Props →

~