Open Props — Supercharged CSS Variables

This content originally appeared on Bram.us and was authored by Bramus!

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 →

~

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-12-02T22:06:21+00:00) Open Props — Supercharged CSS Variables. Retrieved from https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/

MLA

" » Open Props — Supercharged CSS Variables." Bramus! | Sciencx - Thursday December 2, 2021, https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/

HARVARD

Bramus! | Sciencx Thursday December 2, 2021 » Open Props — Supercharged CSS Variables., viewed ,<https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/>

VANCOUVER

Bramus! | Sciencx - » Open Props — Supercharged CSS Variables. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/

CHICAGO

" » Open Props — Supercharged CSS Variables." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/

IEEE

" » Open Props — Supercharged CSS Variables." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/. [Accessed: ]

rf:citation

» Open Props — Supercharged CSS Variables | Bramus! | Sciencx | https://www.scien.cx/2021/12/02/open-props-supercharged-css-variables/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.