Have ideas to improve npm?Join in the discussion! »

    bs-bem-cl

    2.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" */

    Install

    npm i bs-bem-cl

    DownloadsWeekly Downloads

    147

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    7.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar