EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

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.

Build Status

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

Installation requirements

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 may use ENB or gulp 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 the root 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 while the terminal is your active window to stop the server.

Add a block

It is 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

Project-stub based projects

Videos