Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Simple BEM project example
JavaScript

README.md

Stub to start a new BEM project

Project-stub is a template project repository used for BEM projects creation. It contains the minimal configuration files and folders you will need for quick start from scratch.

There are two main BEM libraries are linked here by default:

Installation requirements

  • Node.js 0.10+ is a platform built on Chrome JavaScript runtime for easily building fast, scalable network applications. Or you could use io.js as an alternative platform to Node.js.
  • Git Bash if you use Windows OS.

Supported browsers

The list of supported browsers depends on the bem-core and bem-components library versions.

NB Internet Explorer 8.0 is not supported by default. To support IE8 you must follow the recomendations or use the alternative way — a generator-bem-stub that ensures an optimal config file for your project creation.

Installation

So, how easy is it to get started with BEM? — Super easy!

It's as easy as...

git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.0.0 my-bem-project
cd my-bem-project
npm install # Do not use root rights to install npm and bower dependencies.

bower dependencies are installed in the libs directory by npm postinstall.

Usage

You could use the following tools to build the project: ENB(only in Russian) or bem-tools. The result files are the same in both cases.

You can run any enb commands from a node_modules/.bin/enb directory and the bem-tools commands from node_modules/bem/bin/bem.

Build the project with ENB

node_modules/.bin/enb make

To be able to run enb commands without typing a full path to an executable file (node_modules/.bin/enb), use:

export PATH=./node_modules/.bin:$PATH`

Now you can use enb from any point of your project.

enb make

Build the project with bem-tools

To be able to run bem-tools commands without typing a full path to an executable file (node_modules/bem/bin/bem), use bem-cli npm package:

npm install -g bem-cli

The alternative method:

export PATH=./node_modules/.bin:$PATH`

Now you can use bem-tools from any point of your project.

bem make

The basic commands

Execute the following commands in your terminal.

You could use help option to get information about the basic commands of enb and bem-tools:

enb -h

и

bem -h

Start the server with ENB

node_modules/.bin/enb server

You could use the npm start command to start the enb server without specifying the full path to the node_modules.

npm start

Start the server with bem-tools

bem server

The bem server is running. To check it out, navigate to http://localhost:8080/desktop.bundles/index/index.html.

Stop the server

Press Ctrl + C or + C (for MAC devices) while the terminal is your active window to stop the server.

Add a block

bem create -l desktop.blocks -b newBlock

Add a page

bem create -l desktop.bundles -b page

You could add aliases for super easy use:

echo "alias 'bemblock'='bem create -l desktop.blocks -b'" >> ~/.bashrc
echo "alias 'bempage'='bem create -l desktop.bundles -b'" >> ~/.bashrc

Generator of BEM projects for Yeoman

project-stub is a multipurpose template project that covers the most common tasks of the BEM project. If you want to create the most suitable configuration to build your project, use the generator-bem-stub.

This generator provides you the ability to get the base of BEM project in few minutes by answering the simple questions.

Docs

Project-stub based projects

Useful tools

  • bem-cli — run bem-tools locally
  • borschik — borschik is a simple but powerful builder for text-based file formats

Videos

Something went wrong with that request. Please try again.