https://github.com/remithomas/rebem-helper
Simple BEM helper with ReasonMl
https://github.com/remithomas/rebem-helper
Last synced: 8 months ago
JSON representation
Simple BEM helper with ReasonMl
- Host: GitHub
- URL: https://github.com/remithomas/rebem-helper
- Owner: remithomas
- Created: 2018-03-03T16:50:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-04T13:09:45.000Z (over 7 years ago)
- Last Synced: 2025-08-10T22:57:13.704Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reBEM Helper [](https://circleci.com/gh/remithomas/rebem-helper)
[](https://www.npmjs.com/package/rebem-helper) [](https://coveralls.io/github/remithomas/rebem-helper?branch=reorder_readme)
> A simple BEM helper using [ReasonMl](http://reasonml.github.io)
## How to install
1. Install `reBEM Helper`
```bash
npm install rebem-helper
```
or
```bash
yarn add rebem-helper
```
2. Add `rebem-helper` to "bs-dependencies" section of bsconfig.json
## How to use
```reason
open ReBemHelper;
/* Write my-block my-block--active */
let isActive = true;
let myBemClassNames = bem(~block="my-block", ~modifiers=[Boolean("active", isActive)], ());
```
```reason
open ReBemHelper;
/* Write class names: my-block my-block--small */
let mySizeBemClassNames = bem(~block="my-block", ~modifiers=[String("small")], ());
```
```reason
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)
],
()
);
```
```reason
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", ());
```
### 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](./examples):
## Development
Install and code.
```bash
yarn install
yarn start
```
Run tests
```bash
yarn test
```
Run tests (on watch)
```bash
yarn test:dev
```
## How to contribute
Please feel free to write an issue/PR if you see/want somethings.