Awesome
Learning open-props
Just one of the things I'm learning. https://github.com/hchiam/learning
https://github.com/argyleink/open-props
Demos
Locally: yarn start
or just yarn dev
will open http://localhost:1234/
or
Live: https://learning-open-props.surge.sh
or
Live + editable: https://codesandbox.io/s/github/hchiam/learning-open-props or also
Live + editable: https://codepen.io/hchiam/pen/wvrqRjY
Setup
<link rel="stylesheet" href="https://unpkg.com/open-props" />
or
@import "https://unpkg.com/open-props";
which gives you CSS variables that can be used in regular CSS like this:
html {
--text-1: var(--gray-9);
--text-2: var(--gray-7);
@media (--OSdark) {
--text-1: var(--gray-1);
--text-2: var(--gray-2);
}
}
.push-out {
/* Did you know you can combine animations in native CSS? */
animation: var(--animation-scale-down), var(--animation-fade-out);
animation-timing-function: var(--ease-squish-4);
}
.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);
}
}
.blob {
border-radius: var(--radius-blob-4);
}