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:

• bem-core
• bem-components

Installation requirements

• Node.js 0.12+ is a platform built on Chrome JavaScript runtime for easily building fast, scalable network applications.
• 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.6.0 my-bem-project
cd my-bem-project
npm install # Do not use root privilege 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 as bem-tools just calls ENB under the hood.

You can run any enb commands via node_modules/.bin/enb and the bem-tools commands with node_modules/bem/bin/bem.

Build the project

node_modules/.bin/enb make

or

node_modules/.bin/bem make

To be able to run 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 or bem from any point of your project.

enb 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

and

bem -h

Start the dev server

node_modules/.bin/enb server

or

node_modules/.bin/bem server

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

npm start

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

You may also specify different port if 8080 is already taken by some other service:

npm start -- --port=8181

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

If you want to use bem-tools to create new blocks, you should install additional dependencies:

npm i ym --save-dev

Now it's possible to create blocks with bem create command:

bem create -l desktop.blocks -b newBlock

Add a page

bem create -l desktop.bundles -b page

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.

• generator-bem-stub

Docs

• Full stack quick start
• Static quick-start
• Tutorial for BEMJSON template-engine
• Tutorial on BEMHTML
• Tutorial on i-bem.js
• JavaScript for BEM: main terms
• Commands bem-tools

Project-stub based projects

• Creating BEM application on Leaflet and 2GIS API
• Creating a menu of geo objects collections with Yandex.Maps API and BEM
• SSSR (Social Services Search Robot) — study app with BEM full-stack

Useful tools

• borschik — borschik is a simple but powerful builder for text-based file formats

Videos

• BEM - Building 'em modular
• BEM for JavaScript Talk on Camp JS