Git Product home page Git Product logo

bem_starter_app's Introduction

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:

Installation requirements

  • Node.js 0.10+ is a platform built on Chrome JavaScript runtime for easily building fast, scalable network applications. Or you could use io.js as an alternative platform to Node.js.
  • Git Bash if you use Windows OS.

Supported browsers

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

NB Internet Explorer 8.0 is not supported by default. To support IE8 you must follow the recomendations or use the alternative way — a generator-bem-stub that ensures an optimal config file for your project creation.

Installation

So, how easy is it to get started with BEM? — Super easy!

It's as easy as...

git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.3.1 my-bem-project
cd my-bem-project
npm install # Do not use root privilege to install npm and bower dependencies.

bower dependencies are installed in the libs directory by npm postinstall.

Usage

You could use the following tools to build the project: ENB(only in Russian) or bem-tools. The result files are the same in both cases as bem-tools just calls ENB under the hood.

You can run any enb commands from a node_modules/.bin/enb directory and the bem-tools commands from node_modules/bem/bin/bem.

Build the project

node_modules/.bin/enb make

or

node_modules/.bin/bem make

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

enb make

The basic commands

Execute the following commands in your terminal.

You could use help option to get information about the basic commands of enb and bem-tools:

enb -h

and

bem -h

Start the dev server

node_modules/.bin/enb server

or

node_modules/.bin/bem 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 bem server is running. To check it out, navigate to http://localhost:8080/desktop.bundles/index/index.html.

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

bem create -l desktop.blocks -b newBlock

Add a page

bem create -l desktop.bundles -b page

You could add aliases for super easy use:

echo "alias 'bemblock'='bem create -l desktop.blocks -b'" >> ~/.bashrc
echo "alias 'bempage'='bem create -l desktop.bundles -b'" >> ~/.bashrc

Generator of BEM projects for Yeoman

project-stub is a multipurpose template project that covers the most common tasks of the BEM project. If you want to create the most suitable configuration to build your project, use the generator-bem-stub.

This generator provides you the ability to get the base of BEM project in few minutes by answering the simple questions.

Docs

Project-stub based projects

Useful tools

  • borschik — borschik is a simple but powerful builder for text-based file formats

Videos

bem_starter_app's People

Watchers

James Cloos avatar Kostiantyn Pidlisnyi avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.