bem-bootstrap

BEM with Bootstrap

Usage

npm i -D bem-bootstrap

Add .bem/enb-make.js:

const nodeConfigSetup = require('bem-bootstrap');
const isProd = process.env.YENV === 'production';
const levels = [
    { path: 'node_modules/bem-bootstrap/components', check: false }
];
 
module.exports = function (config) {
 
    config.nodes('bundles/*', function (nodeConfig) {
        nodeConfig.addTechs(nodeConfigSetup(levels, isProd));
 
        nodeConfig.addTargets([
            '?.html',
            '?.min.js',
            '?.min.css'
        ]);
    });
};
 

Add bundles/index/index.bemjson.js:

module.exports = {
    block: 'page',
    title: 'Title of the page',
    favicon: '/favicon.ico',
    head: [
        { elem: 'meta', attrs: { name: 'description', content: '' } },
        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
        { elem: 'css', url: 'index.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'index.min.js' }],
    content: [
        {
            block: 'container',
            mods: {
                fluid: true
            },
            content: [
                {
                    block: 'alert',
                    mods: {
                        success: true,
                        dismissible: true
                    },
                    content: '<strong>Holy guacamole!</strong> You should check in on some of those fields below.'
                }
            ]
        }
    ]
};

npm start

Docs

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

Videos

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