arnihermann / bs-css

statically typed DSL for writing css in reason.

bs-css

statically typed DSL for writing css in reason.

Bs-css is a statically typed interface to Glamor

Installation

npm install --save bs-css

In your bsconfig.json, include "bs-css" in the bs-dependencies.

Usage

module Styles = {
  /*Open the Css module, so we can access the style properties below without prefixing them with Css.*/
  open Css;
  
  let card = style([
    display(flexBox),
    flexDirection(column), 
    alignItems(stretch),
    backgroundColor(white),
    boxShadow(~y=3, ~blur=5, rgba(0, 0, 0, 0.3)),
    padding(Theme.basePadding)
  ]);

  let title = style([
    fontSize(rem(1.5)),
    color(Theme.textColor),
    marginBottom(Theme.basePadding)
  ]);
  let actionButton = disabled =>
    style([
      background(disabled ? darkGray : white),
      color(black),
      border(px(1) solid black),
      borderRadius(px(3)),
    ])
};

<div className=Style.card>
  <h1 className=Styles.title> (ReasonReact.stringToElement("Hello")) </h1>
  <button className=Styles.actionbutton(false)>
</div>

Global css

You can defined global css rules with global

Css.(
  global("body", [margin(px(0))])
);

Css.(
  global("h1, h2, h3", [color(rgb(33, 33, 33))])
);

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 styles = style([
  animationName(bounce),
  animationDuration(2000),
  width(px(50)),
  height(px(50)),
  backgroundColor(rgb(255, 0, 0))
]);

// ...
<div className=styles>
  (ReasonReact.stringToElement("bounce!"))
</div>

Development

npm run start

Where is the documentation?

Its on its way! until then you can check out css.rei.

Thanks

Thanks to glamor which is doing all the heavi lifting. Thanks to bs-glamor which this repo was forked from. Thanks to elm-css for dsl design inspiration.