Skip to content
/ bs-css Public
forked from giraud/bs-css

statically typed DSL for writing css in reason.

License

Notifications You must be signed in to change notification settings

ctbucha/bs-css

 
 

Repository files navigation

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=px(3), ~blur=px(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=Styles.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.

About

statically typed DSL for writing css in reason.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.3%
  • OCaml 7.7%