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 4+ is a platform built on JavaScript runtime for easily building fast, scalable network applications.
• Git Bash if you use Windows OS.

Note: If your operating system is Windows, you must run the following commands in Git Bash with administrator rights. Make sure that you launch Git Bash as an administrator.

Supported browsers

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

Note: Internet Explorer 8.0 is not supported by default. To support IE8 you must follow the recomendations.

Installation

It's as easy as...

git clone https://github.com/bem/project-stub.git --depth 1 my-bem-project
cd my-bem-project
npm install

Note: Do not use root rights to install npm dependencies.

Usage

You could use ENB to build the project.

You can run enb commands via ./node_modules/.bin/enb.

Build the project

./node_modules/.bin/enb make

or

./node_modules/.bin/gulp

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 gulp from any point of your project.

enb make

or

gulp

The basic commands

Execute the following commands in your terminal.

Start the dev server

./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

The development 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 new-block

Add a page

mkdir -p desktop.bundles/page
touch desktop.bundles/page/page.bemjson.js

And add following content:

module.exports = {
    block: 'page',
    title: 'page',
    head: [
        { elem: 'css', url: 'page.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'page.min.js' }],
    content: [
       {
           block: 'new-block',
           content: [
               'block content'
           ]
       }
    ]
};

Docs

• Static page quick-start
• Starting your own BEM project
• Tutorial for BEMJSON template-engine
• Tutorial on BEMHTML
• Tutorial on i-bem.js

Project-stub based projects

• SSSR (Social Services Search Robot) — study app with BEM full-stack

Videos

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