bs-css-core
Statically typed DSL for writing CSS in ReasonML.
This is a fork of bs-css that extracts the Css module, so that it can be used by various CSS-in-JS bindings. See bs-react-fela-examples and bs-styletron-react-examples for practical examples of usage.
Installation
yarn add --dev bs-css-core
In your bsconfig.json
, include "bs-css-core"
in the bs-dependencies
.
Usage
type theme = { textColor: Css.color, basePadding: Css.cssunit}; let makeStyle = (theme) => Css.( style([ backgroundColor(white), boxShadow(shadow(~y=3, ~blur=5, rgba(0, 0, 0, 0.3))), padding(theme.basePadding), fontSize(rem(1.5)), color(theme.textColor), marginBottom(theme.basePadding) ]) );
Keyframes
Define animation keyframes;
let bounce = Css.( keyframes([ ("0%", [transform(scale(0.1, 0.1)), opacity(0.0)]), ("60%", [transform(scale(1.2, 1.2)), opacity(1.0)]), ("100%", [transform(scale(1.0, 1.0)), opacity(1.0)]) ]) ); let makeStyle = (_theme) => Css.( style([ animationName(bounce), animationDuration(2000), width(px(50)), height(px(50)), backgroundColor(rgb(255, 0, 0)) ]) );
Development
yarn start
Where is the documentation?
Check out css.rei.
Thanks
Thanks to bs-css that introduced the DSL. Thanks to bs-glamor which bs-css was forked from. Thanks to elm-css for DSL design inspiration.