Open Props

Creator

Creator

Seonglae Cho

Created

Created

2021 Dec 4 9:55

Editor

Editor

Seonglae Cho

Edited

Edited

2021 Dec 4 10:1

Refs

Refs

CSS Variable based control

argyleink • Updated 2021 Dec 4 8:5

Open Props Examples

좋긴한데 postcss라 동적 컨트롤이 힘들다


@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);
  }
}

Open Props: sub-atomic styles

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

https://open-props.style/

Open Props: sub-atomic styles

Recommendations

///////////