rebem / Rebem
Licence: other
React ❤️ BEM
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rebem
Bem React
A set of tools for developing user interfaces using the BEM methodology in React
Stars: ✭ 382 (+310.75%)
Mutual labels: bem
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (+521.51%)
Mutual labels: bem
Hint.css
A CSS only tooltip library for your lovely websites.
Stars: ✭ 8,158 (+8672.04%)
Mutual labels: bem
Tentcss
🌿 A CSS survival kit. Includes only the essentials to make camp.
Stars: ✭ 400 (+330.11%)
Mutual labels: bem
Boilerform
Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
Stars: ✭ 679 (+630.11%)
Mutual labels: bem
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (+252.69%)
Mutual labels: bem
Mam mol
$mol - fastest reactive micro-modular compact flexible lazy ui web framework.
Stars: ✭ 385 (+313.98%)
Mutual labels: bem
Webpack Es6 Sass Setup
A basic setup for Webpack with ES6, Babel, Sass and stylelint
Stars: ✭ 63 (-32.26%)
Mutual labels: bem
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+264.52%)
Mutual labels: bem
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
Stars: ✭ 627 (+574.19%)
Mutual labels: bem
Bemskel
A lightweight CSS framework written in BEM and SASS for building scalable component-based user interfaces
Stars: ✭ 89 (-4.3%)
Mutual labels: bem
Bemgo
Quick start of developing projects using Gulp build system and BEM methodology.
Stars: ✭ 66 (-29.03%)
Mutual labels: bem
Nbem
💎 nbem is for intuitively write the class name of BEM method. React and others.
Stars: ✭ 28 (-69.89%)
Mutual labels: bem
Overview
There are two ways to use rebem
— with jsx (a separate babel plugin) and without it (out of the box), like this:
import { Component } from 'react';
import { render } from 'react-dom';
import { BEM } from 'rebem';
class BeepClass extends Component {
render() {
return BEM(
{
...this.props,
block: 'beep',
tag: 'span',
mods: {
type: 'simple',
...this.props.mods
}
},
this.props.children
);
}
}
const Beep = React.createFactory(BeepClass);
class BoopClass extends Component {
render() {
return BEM(
{
...this.props,
block: 'boop'
},
Beep(
{
mix: {
block: 'boop',
elem: 'hello'
},
mods: {
size: 'xl'
}
},
'hello'
)
);
}
}
const Boop = React.createFactory(BoopClass);
render(
Boop({
mods: {
disabled: true
}
}),
document.body
);
<div class="boop boop_disabled">
<span class="beep beep_type_simple beep_size_xl boop__hello">hello</div>
</div>
Install
npm i -S rebem
Usage
BEM(props, ...children)
is almost the same as
React.createElement(tag/ReactClass, props, ...children)
but tag
and props.className
are made from special props:
BEM PropTypes
block
BEM({
block: 'beep'
})
<div class="beep"></div>
elem
BEM({
block: 'beep',
elem: 'boop'
})
<div class="beep__boop"></div>
mods
Simple
BEM({
block: 'beep',
mods: {
foo: 'bar'
}
})
<div class="beep beep_foo_bar"></div>
Boolean
BEM({
block: 'beep',
mods: {
foo: true,
bar: false
}
})
<div class="beep beep_foo"></div>
Element
BEM({
block: 'beep',
elem: 'boop',
mods: {
foo: 'bar'
}
})
<div class="beep__boop beep__boop_foo_bar"></div>
mix
Simple
BEM({
block: 'beep',
mix: {
block: 'boop',
elem: 'foo'
}
})
<div class="beep boop__foo"></div>
Multiple
BEM({
block: 'beep',
mix: [
{
block: 'boop',
elem: 'foo'
},
{
block: 'bar',
elem: 'baz',
mods: {
test: true
}
}
]
})
<div class="beep boop__foo bar__baz bar__baz_test"></div>
tag
div
by default.
BEM({
tag: 'span'
})
<span></span>
className
If className is specified, it will be preserved along with BEM classNames.
BEM({
block: 'boop',
className: 'beep'
})
<div class="boop beep"></div>
blockFactory
blockFactory
can save you a couple of bytes when you have a lot of BEM-entities in the component:
import React from 'react';
import { render } from 'react-dom';
import { blockFactory } from 'rebem';
const Block = blockFactory('beep');
class Beep extends React.Component {
render() {
return Block(this.props,
Block({ elem: 'hello', mods: { size: 'xl' } },
'hello'
),
Block({ elem: 'jack', mix: { block: 'man' } },
'Jack'
)
);
}
}
render(
React.createElement(Beep),
document.body
);
<div class="beep">
<div class="beep__hello beep__hello_size_xl">hello</div>
<div class="beep__jack man">hello</div>
</div>
React PropTypes
References:
BEM({
block: 'image',
tag: 'img',
src: 'http://funkyimg.com/i/26jtf.gif',
alt: 'kitten'
})
<img class="image" src="http://funkyimg.com/i/26jtf.gif" alt="kitten"/>
Notes
Environment
process.env.NODE_ENV
must be available. For example in webpack you can do this with DefinePlugin
:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
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].