14
28%
ISC
bs-css-core
0.2.2
neglecteddeprecatedBuckleScript statically typed DSL for CSS
librarycss
homepagerepositorynpmissuesdocumentation

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

  • RE
  • ML 
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)
    ])
  );
type theme = {
  textColor: Css.color;
  basePadding: Css.cssunit;}
let makeStyle theme =
  let open Css in
    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;

  • RE
  • ML 
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))
    ])
  );
let bounce =
  let open Css in
    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 =
  let open Css in
    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.

Project

Made with

Reason