Skip to content

CSS Typed functional interface in jsoo, bindings to inline styles and emotion

License

Notifications You must be signed in to change notification settings

ml-in-barcelona/jsoo-css

Repository files navigation

jsoo-css

jsoo-css gives a complementary API for dealing with styles in jsoo. Provides implementations to inline styles or use emotion.sh to enable CSS-in-JS mechanism. Plays really well with jsoo-react but not only.

Example

module App = {
  open Jsoo_css;

  let app =
    Emotion.make([|
      display(`flex),
      width(px(1050)),
      flexDirection(`column),
      alignItems(`center),
      padding(px(80)),
    |]);

  let h2 =
    Inline.style([|padding2(~v=`px(10), ~h=`px(5)), color(Colors.grey)|]);

  let h1 = Inline.style([|color(`rgb((123, 123, 123)))|]);

  let box =
    Emotion.make([|
      color(`hex("333")),
      backgroundColor(`hex("C0FFEE")),
      padding(px(45)),
      borderRadius(px(8)),
      fontSize(px(22)),
      fontWeight(`bold),
    |]);

  [@react.component]
  let make = () => {
    <div className=app>
      <h1 style=h1> {React.string({|Hello OCamler 🐫|})} </h1>
      <h2 style=h2>
        {React.string("Welcome to the world of React & CSS-in-JS")}
      </h2>
      <div className=box>
        {React.string("This is a title styled with emotion.sh")}
      </div>
    </div>;
  };
};

React.Dom.renderToElementWithId(<App />, "demo");

Instalation

  1. Install from from github (not published on opam)
opam pin add -y jsoo-css https://github.com/ml-in-barcelona/jsoo-css.git
  1. Add jsoo-css library on your executable stanza with modes js
(executables
(names index)
(modes js)
(libraries jsoo-css))
  1. For emotion, need to provide global dependency with (js_of_ocaml (javascript_files globals.js))
// globals.js
joo_global_object.emotion = require("@emotion/css");

Acknowledgements

This project is based on bs-css, so, many thanks to @giraud. Thanks to bs-declaredom for such a precise HTML and CSS implementation for BuckleScript. Thanks to elm-css for being an inspiration to overall API design.

About

CSS Typed functional interface in jsoo, bindings to inline styles and emotion

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published