• Stars
    star
    103
  • Rank 333,046 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

BEM class name formatter

b_

NPM Version Build Status

BEM class name formatter

Example

Simple

var b = require('b_');

// blocks
b('button', {size: 'xl'}) === 'button button_size_xl';

// block elements
b('modal', 'close', {size: 'xl'}) === 'modal__close modal__close_size_xl';

// boolean modifiers
b('button', {hidden: false}) === 'button';
b('button', {hidden: true}) === 'button button_hidden';

Alternative BEM syntax

var B = require('b_').B;
var b = B({
    tailSpace: ' ',
    elementSeparator: '-',
    modSeparator: '--',
    modValueSeparator: '-',
    classSeparator: ' '
});

b('block', 'elem', {mod1: true, mod2: false, mod3: 'mod3'}) ===
'block-elem block-elem--mod1 block-elem--mod3-mod3 ';

BEViS syntax

var B = require('b_').B;
var b = B({isFullModifier: false});

b('button_call-for-action', {disabled: true, focused: 'yes'}) ===
'button_call-for-action _disabled _focused_yes';

Full bool values in modifiers

var B = require('b_').B;
var b = B({isFullBoolValue: true});

b('button', {disabled: true, focused: false}) ===
'button button_disabled_true button_focused_false';

React example

var b = require('b_').with('b-button');
// or
var b = require('b_').lock('b-button');
// which is `require('b_').bind(null, 'b-button');` but much convenient

function render() {
    return (
        <div className={b()}>
            <span className={b('icon', {type: 'add'})}></span>
            <span className={b('text')}></span>
        </div>
        <div className={b({size: 'small'})}>
            <span className={b('icon', {type: 'add'})}></span>
            <span className={b('text')}></span>
        </div>
    );
}

More Repositories

1

autopolyfiller

Autopolyfiller — Precise polyfills. This is like Autoprefixer, but for JavaScript polyfills.
JavaScript
552
star
2

lmd

LMD - JavaScript Module-Assembler for building better web applications ⚠️ Project is no longer supported ⚠️
JavaScript
449
star
3

relocating-to-berlin

Q&A about relocating to Berlin, Germany
271
star
4

jquery.notification

Webkit Notification API wrapper
JavaScript
154
star
5

node-mc

nmc – Midnight Commander written in React/Node stack.
JavaScript
140
star
6

gulp-autopolyfiller

Gulp plugin for autopolyfiller
JavaScript
53
star
7

html-tui

HTML to TUI (Text user interface) renderer. It is like TurboVision but in pure HTML, CSS and JavaScript
JavaScript
50
star
8

scalable-js-app

Scaleable JavaScript Application Architecture Example
JavaScript
49
star
9

rivets-backbone-adapter

Backbone.js adapter for Rivets.js data-bind with nested models and collections support
HTML
49
star
10

javascript-ecdc

JavaScript Elastic Cloud for Distributed Computing - framework for creating browser-based distributed computing applications based on Node.js
JavaScript
39
star
11

node-request-as-curl

It serializes http.ClientRequest as curl(1) command string
JavaScript
39
star
12

1css

1CSS - CSS dialect made for fun
JavaScript
27
star
13

grunt-autopolyfiller

Grunt plugin for autopolyfiller
JavaScript
25
star
14

phonegap-tumblr-reader

Simepe Tumblr Reader applicaiotn for Android, iOS and BlackBerry based on PhoneGap
JavaScript
14
star
15

event-source-chat

Simple chat based on EventSource SSE
JavaScript
13
star
16

talk-back-to-text-ui

React Europe Back to Text UI talk
HTML
9
star
17

dart-http

dart http server
9
star
18

lodash-template

_.template without full lodash source
JavaScript
6
star
19

ninjs

Ninja JavaScript Builder - JavaScript project builder without any extra global variables
JavaScript
6
star
20

image-ambilight

Ambilight effect on image
JavaScript
6
star
21

gitmodules-bower

.gitmodules to bower.json translator
JavaScript
5
star
22

grunt-lmd

It builds LMD
JavaScript
5
star
23

visual-dof-calc

Visual Depth of Field Calculator
JavaScript
4
star
24

shower-remote

Shower Remote - "Keynote Remote" for Shower presentation template
JavaScript
3
star
25

talk-better-js

Even Better JavaScript (ru)
CSS
2
star
26

talk-promises

Доклад Promise - это не больно!
JavaScript
2
star
27

talk-solid

SOLID - Курс по паттернам
JavaScript
2
star
28

node-jet

Jet - tiny, fast jQuery-style Node.js framwork
JavaScript
2
star
29

promise-attempt

Attempt tries to resolve promises
JavaScript
2
star
30

autopolyfiller-stable

Stable polyfills for Autopolyfiller
JavaScript
2
star
31

console-blame

It highlights and helps to find forgotten console.log calls in runtime
JavaScript
2
star
32

lmd-gui

GUI for LMD
JavaScript
1
star
33

pinterest-auto-layout-pdf-image-downloader

Pinterest board image downloader and auto-layout pdf generator
JavaScript
1
star
34

speed-dial

A minimalistic chrome extension implementing old good Opera's Speed Dial. Clean. Personalized. Performant. Flicker free.
HTML
1
star
35

talk-components-now

Components Now!
JavaScript
1
star
36

talk-404fest

Backbone в Яндексе
CSS
1
star
37

dart-star

jQuery-like Dart Library
1
star
38

azproduction.github.com

HTML
1
star
39

loader-test

loader-test
JavaScript
1
star
40

bravequest

Simple HTML-based RPG. Non Canvas. Only DOM, only hardcore!
JavaScript
1
star
41

node-reader-starred-grabber

Google Reader starred grabber for Node.js
JavaScript
1
star
42

jquery-mobile-markdown

Markdown for jQuery Mobile
1
star