holy-grail-markup

holy-grail-markup implementation on BEM Platform

Based on project-stub.

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.

Build the project

npm install
enb make

or

npm install
gulp

There’s no preferred way: both Gulp and ENB can build a project to get final HTML, CSS and JavaScript bundles. It’s up to users to decide which module and config syntax they like.

Additional files generated by ENB as cache to reuse between rebuilds. Also they may be useful for debug.

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