https://github.com/reason-in-barcelona/jsoo-css

CSS Typed functional interface in jsoo, bindings to inline styles and emotion
https://github.com/reason-in-barcelona/jsoo-css

css css-in-js js-of-ocaml jsoo ocaml reason

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/reason-in-barcelona/jsoo-css
• Owner: ml-in-barcelona
• License: mit
• Created: 2021-03-08T11:33:23.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-09T09:24:52.000Z (about 1 year ago)
• Last Synced: 2024-04-13T19:02:52.520Z (7 months ago)
• Topics: css, css-in-js, js-of-ocaml, jsoo, ocaml, reason
• Language: Reason
• Homepage:
• Size: 289 KB
• Stars: 14
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - jsoo-css - in-barcelona | 10 | (Reason)

README

        
# jsoo-css

jsoo-css gives a complementary API for dealing with styles in jsoo. Provides implementations to inline styles or use [emotion.sh](https://emotion.sh) to enable CSS-in-JS mechanism. Plays really well with [jsoo-react](https://github.com/ml-in-barcelona/jsoo-react) but not only.

## Example

```reason

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 = () => {

    


      
 {React.string({|Hello OCamler 🐫|})} 

      


        {React.string("Welcome to the world of React & CSS-in-JS")}

      

      


        {React.string("This is a title styled with emotion.sh")}

      

    
;

  };

};


React.Dom.renderToElementWithId(, "demo");

```

## Instalation

1. Install from from github (not published on opam)

```sh

opam pin add -y jsoo-css https://github.com/ml-in-barcelona/jsoo-css.git

```

2. Add `jsoo-css` library on your executable stanza with `modes js`

```dune

(executables

(names index)

(modes js)

(libraries jsoo-css))

```

3. For emotion, need to provide global dependency with `(js_of_ocaml (javascript_files globals.js))`

```js

// globals.js

joo_global_object.emotion = require("@emotion/css");

```

### Acknowledgements

This project is based on [bs-css](https://github.com/reasonml-labs/bs-css), so, many thanks to [@giraud](https://github.com/giraud).

Thanks to [bs-declaredom](https://github.com/Risto-Stevcev/bs-declaredom) for such a precise HTML and CSS implementation for BuckleScript.

Thanks to [elm-css](https://github.com/rtfeldman/elm-css) for being an inspiration to overall API design.