Getting Started Creating a static page

Lesson description

Creating a simple static page will help you understand the structure of a BEM project. This document describes the basics of working with BEM technology, redefinition levels, and BEM libraries.

You will learn how to:

Completing all the steps will result in a page with an input field, a button, and a user greeting, as shown in the figure below. The name entered in the field will be displayed in the greeting when the button is clicked.

Welcome page

Working with the examples laid out in this document requires basic skills in:

Important: This document does not contain information about the build procedure for a BEM project.

Minimum requirements

To begin, you will need to install:

Important: Windows OS users must install Git Bash.

We will be using

Cloning a BEM project

To quickly deploy a BEM project, use a local copy of the project-stub template repository, which contains the minimum configuration files you'll need to get started. The main Bem libraries are connected to project-stub by default:

A copy of project-stub can be made using Git.

Please note: In OS X or Linux, all commands are executed in the terminal. Windows users must run commands in Git Bash. Make sure that Git Bash is launched from an administrator login.

To create a local copy of project-stub, do the following:

After building and setting all dependencies, the project file structure will look like this:

    .enb/                 # Configuration files for ENB compiler
    common.blocks/        # Basic block implementations
    desktop.blocks/       # Project block directory
    desktop.bundles/      # Project bundle directories
    node_modules/         # Installed Node modules (packets)
    .bemrc                #
    .editorconfig         # EditorConfig configuration to support various editors and IDEs
    .gitignore            # Exclusion of files and directories in Git
    .travis.yml           # Automatic launch of linters in Continuous Integration
    favicon.ico           #
    gulpfile.js           # Configuration file for the Gulp compiler
    package.json          # Project description for npm
    README.md             # Text description of project

Creating a page

The desktop.bundles project directory contains files obtained as a result of the build procedure. These files are called bundles in BEM. In the simplest instance, bundles are compiled for each page. In this case, one project page will correspond to one bundle directory. By default, the project has an index page.

To add a new page:

Describing the page in a BEMJSON file

To create a page description, you'll need to define its structure. In this case, we're placing the hello block on the page. It will contain a greeting (greeting element of block hello), a text box (input block) and a button (button block). The input and button blocks can be taken from the bem-components library.

More info about the BEMJSON input data format.

To define the page scructure, edit desktop.bundles/hello/hello.bemjson.js:

Full code of the BEMJSON file

To make sure that all the defined blocks and elements appear on the page, open the hello page in your browser: http://localhost:8080/desktop.bundles/hello/hello.html.

Creating blocks

Blocks from the library have appeared on the page, but they do not interact with each other. We will now create the hello block, which will take data from the input field and insert them it into the greeting. To do this:

Describing the block behavior

Creating the block template

BEMHTML is a technology that converts input data from a BEMJSON file into HTML.

To create a template:

Adding block styles

Complete code of the desktop.bundles/hello/hello.bemjson.js file.


Refresh the page to check the results. A full rebuild of the project isn't necessary. A server mode that automatically rebuilds only the modified parts of the project was launched while the project was being developed.

Go to Creating a static project in BEM to see how to create a more complex static project.