bs-glamour

    0.1.3 • Public • Published

    bs-glamor – BuckleScript bindings for glamor

    The API is still experimental. Only the css function from glamor is exposed (with its result slightly incorrectly typed as a string); no other functions such as renderStatic are supported yet.

    Installation

    npm install --save bs-glamor

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

    Usage

    The following examples (in Reason syntax) assume that Glamor is included in the namespace:

    open Glamor;
    • Simple styling:

      css [
          color "red",
          border "1px solid black"
      ]
    • Styling with selectors (@media, :hover, &, etc.):

      css [
          color "red",
          Selector "@media (min-width: 300px)" [
              color "green"
          ]
      ]
    • Selectors can be nested:

      css [
          color "red",
          Selector "@media (min-width: 300px)" [
              color "green",
              Selector "& .foo" [
                  color "blue"
              ]
          ]
      ]

    You can isolate inclusion of the Glamor namespace in the following way:

    Glamor.(css [color "red"])

    The result of the css function can be assigned to a class name, e.g. in JSX:

    <div className=(css [color "red"]) />

    Example

    See reason-react-tictactoe for a live example.

    Development

    npm run start

    Tests

    There are some simplistic tests using bs-jest.

    npm run test

    Thanks

    Thanks to reason-react-example, reason-react, and bs-jest for inspiration how to create a Reason library, and of course, thanks to glamor.

    Install

    npm i bs-glamour

    DownloadsWeekly Downloads

    3

    Version

    0.1.3

    License

    ISC

    Last publish

    Collaborators

    • acierto