3
65%
MIT
rebem-helper
2.1.0
Simple BEM helper with ReasonMl
librarycssutilities
homepagerepositorynpmissuesdocumentation

reBEM Helper CircleCI

npm version Coverage Status

A simple BEM helper using ReasonMl

How to install

  1. Install reBEM Helper
npm install rebem-helper

or

yarn add rebem-helper
  1. Add rebem-helper to "bs-dependencies" section of bsconfig.json

How to use

  • RE
  • ML 
open ReBemHelper;

/* Write my-block my-block--active */
let isActive = true;
let myBemClassNames = bem(~block="my-block", ~modifiers=[Boolean("active", isActive)], ());
open ReBemHelper
let isActive = true
let myBemClassNames =
  bem ~block:"my-block"
    ~modifiers:[((Boolean ("active", isActive))[@explicit_arity ])] ()
  • RE
  • ML 
open ReBemHelper;

/* Write class names: my-block my-block--small */
let mySizeBemClassNames = bem(~block="my-block", ~modifiers=[String("small")], ());
open ReBemHelper
let mySizeBemClassNames =
  bem ~block:"my-block" ~modifiers:[((String ("small"))[@explicit_arity ])]
    ()
  • RE
  • ML 
open ReBemHelper;
/* Write class names: my-block my-block--active my-block--small my-block--disable */
let mySizeBemClassNames = bem(
  ~block="my-block",
  ~modifiers=[
    String("small"),
    Boolean("active", isActive),
    Switch("enable", "disable", false)
  ],
  ()
);
open ReBemHelper
let mySizeBemClassNames =
  bem ~block:"my-block"
    ~modifiers:[((String ("small"))[@explicit_arity ]);
               ((Boolean ("active", isActive))[@explicit_arity ]);
               ((Switch ("enable", "disable", false))[@explicit_arity ])] ()
  • RE
  • ML 
open ReBemHelper;
/* Write class names: my-block__element my-block__element--small some-other-class */
let mySizeBemClassNames = bem(~block="my-block", ~element="element", ~modifiers=[String("small")], ~others="some-other-class", ());
open ReBemHelper
let mySizeBemClassNames =
  bem ~block:"my-block" ~element:"element"
    ~modifiers:[((String ("small"))[@explicit_arity ])]
    ~others:"some-other-class" ()

Modifier list

  • String(modifierName) String(string)
  • Boolean(modifierName, shouldShowModifierName) Boolean(string, bool)
  • Switch(activeModifierName, unactiveModifierName, isActiveModifierName) Switch(string, string, bool)

Examples

See more examples in examples folder:

Development

Install and code.

yarn install
yarn start

Run tests

yarn test

Run tests (on watch)

yarn test:dev

How to contribute

Please feel free to write an issue/PR if you see/want somethings.

Project

Made with

Reason