bs-bem-cl

4.0.0 • Public • Published

bs-bem-cl

Simple reimplementation of BEM class name generator in ReScript.

Installation

# npm
npm install --save bs-bem-cl

# yarn
yarn add bs-bem-cl

Then add it to bsconfig.json:

"bs-dependencies": [
  "bs-bem-cl"
]

Usage

Get BemCl instance

let b = Bc.make("button")

Create BEM block

b() /* => "button" */

Create BEM elements

b(~elem="icon", ()) /* => "button__icon" */

b(~elem="text", ()) /* => "button__text" */

Create BEM block with key/value modifiers

b(~mods=[Bc.KeyValue("theme", "green")], ()) /* => "button button_theme_green" */

b(
    ~mods=[
        Bc.KeyValue("theme", "green"),
        Bc.KeyValue("size", "m")
    ],
    ()
) /* => "button button_theme_green button_size_m" */

Create BEM block with bool modifiers

b(~mods=[Bc.Bool("loading", true)], ()) /* => "button button_loading" */

b(~mods=[Bc.Bool("loading", false)], ()) /* => "button" */

b(
    ~mods=[
        Bc.Bool("loading", true),
        Bc.Bool("disabled", true)
    ],
    ()
) /* => "button button_loading button_disabled" */

b(
    ~mods=[
        Bc.Bool("loading", false),
        Bc.Bool("disabled", true)
    ],
    ()
) /* => "button button_disabled" */

Create BEM element with key/value modifiers

b(
    ~elem="icon",
    ~mods=[Bc.KeyValue("theme", "green")],
    ()
) /* => "button__icon button__icon_theme_green" */

b(
    ~elem="text",
    ~mods=[
        Bc.KeyValue("theme", "green"),
        Bc.KeyValue("size", "m")
    ],
    ()
) /* => "button__text button__text_theme_green button__text_size_m" */

Create BEM element with bool modifiers

b(
    ~elem="icon",
    ~mods=[Bc.Bool("loading", true)],
    ()
) /* => "button__icon button__icon_loading" */

b(
    ~elem="icon",
    ~mods=[Bc.Bool("loading", false)],
    ()
) /* => "button__icon" */

b(
    ~elem="text",
    ~mods=[
        Bc.Bool("loading", true),
        Bc.Bool("disabled", true)
    ],
    ()
) /* => "button__text button__text_loading button__text_disabled" */

b(
    ~elem="text",
    ~mods=[
        Bc.Bool("loading", false),
        Bc.Bool("disabled", true)
    ],
    ()
) /* => "button__text button__text_disabled" */

You can mix key/value and bool modifiers

b(
    ~mods=[
        Bc.KeyValue("theme", "green"),
        Bc.Bool("loading", true)
    ],
    ()
) /* => "button button_theme_green button_loading" */

b(
    ~elem="icon",
    ~mods=[
        Bc.KeyValue("theme", "green"),
        Bc.Bool("loading", false),
        Bc.Bool("disabled", true)
    ],
    ()
) /* => "button__icon button__icon_theme_green button__icon_disabled" */

You can mix different classes

b(~elem="icon", ())
->Bc.mix("some__class") /* => "button__icon some__class" */

Package Sidebar

Install

npm i bs-bem-cl

Weekly Downloads

240

Version

4.0.0

License

MIT

Unpacked Size

7.1 kB

Total Files

6

Last publish

Collaborators

  • an-tu