ideyuta / Nbem
Licence: mit
π nbem is for intuitively write the class name of BEM method. React and others.
Stars: β 28
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Projects that are alternatives of or similar to Nbem
Unifi Api Client
A PHP API client class to interact with Ubiquiti's UniFi Controller API
Stars: β 602 (+2050%)
Mutual labels: class
Boilerform
Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
Stars: β 679 (+2325%)
Mutual labels: bem
Mam mol
$mol - fastest reactive micro-modular compact flexible lazy ui web framework.
Stars: β 385 (+1275%)
Mutual labels: bem
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: β 578 (+1964.29%)
Mutual labels: bem
Koa Dec Router
An ES6 decorator + class based router, support inherit, override, priority, auto load controllers, etc.
Stars: β 19 (-32.14%)
Mutual labels: class
Reclass.net
More than a ReClass port to the .NET platform.
Stars: β 766 (+2635.71%)
Mutual labels: class
Es6 Class Bind All
Automaticlly bind 'this' scope of all methods in es6 class
Stars: β 10 (-64.29%)
Mutual labels: class
Tentcss
πΏ A CSS survival kit. Includes only the essentials to make camp.
Stars: β 400 (+1328.57%)
Mutual labels: bem
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
Stars: β 627 (+2139.29%)
Mutual labels: bem
Mcdowell Cv
A Nice-looking CV template made into LaTeX
Stars: β 855 (+2953.57%)
Mutual labels: class
nbem
nbem is for intuitively write the class name of BEM method.
Installation
npm i nbem
Usage
Use with node.js, browserify, webpack:
var nbem = require(nbem);
var bem = nbem();
'&' is indicates the nests.
bem('header'); // => "header"
bem('&nav'); // => "header__nav"
bem('&&item'); // => "header__nav__item"
':' is indicates the modifier.
bem('header:global'); // => "header--global"
bem('&nav'); // => "header--global__nav"
Join classnames:
Add a string or string[] at second argument.
bem('header'); // => "header"
bem('&nav', 'isActive'); // => "header__nav isActive"
bem('&nav', ['isActive', 'isHover']); // => "header__nav isActive isHover"
bem('&&item'); // => "header__nav__item"
Customize separator:
var config = require(nbem).config;
config.setSeparator('-', '_'); // element, modifier
bem('header:global'); // => "header-global"
bem('&title') // => "header-global_title"
Example
in React of ES6
import React from 'react';
import nbem from 'nbem';
export default class Header extends React.Component {
render() {
const bem = nbem();
return (
<header className={bem('header')}>
<h1 className={bem('&title')}>Title</h1>
<p className={bem('&description')>Description</p>
</header>
);
}
}
Render:
<header class="header">
<h1 class="header__title">Title</h1>
<p class="header__description">Description</p>
</header>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].