Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tadatuta/bem-project-stub-he
BEM project-stub HTML edition
https://github.com/tadatuta/bem-project-stub-he
Last synced: 30 days ago
JSON representation
BEM project-stub HTML edition
- Host: GitHub
- URL: https://github.com/tadatuta/bem-project-stub-he
- Owner: tadatuta
- Created: 2014-01-21T00:02:58.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-06-07T10:19:30.000Z (over 7 years ago)
- Last Synced: 2024-10-05T08:41:22.803Z (about 1 month ago)
- Language: JavaScript
- Size: 45.9 KB
- Stars: 11
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
[](https://travis-ci.org/bem/project-stub)
There are two main BEM libraries are linked here by default:
* [bem-core](https://en.bem.info/libs/bem-core/)
* [bem-components](https://en.bem.info/libs/bem-components/)
## Installation requirements
* [Node.js 4+](https://nodejs.org) is a platform built on JavaScript runtime for easily building fast, scalable network applications.
* [Git Bash](https://git-for-windows.github.io/) if you use Windows OS.
**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](https://en.bem.info/libs/bem-core/current/#supported-browsers) and [bem-components](https://en.bem.info/libs/bem-components/current/#supported-browsers) library versions.
**Note:** Internet Explorer 8.0 is not supported by default. To support IE8 you must follow the [recomendations](https://en.bem.info/libs/bem-components/current/#support-for-internet-explorer-8).
## Installation
It's as easy as...
```bash
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](https://en.bem.info/toolbox/enb/) or `gulp` to build the project.
You can run `enb` commands via `./node_modules/.bin/enb`.
### Build the project
```bash
./node_modules/.bin/enb make
```
or
```bash
./node_modules/.bin/gulp
```
To be able to run commands without typing a full path to an executable file (`./node_modules/.bin/enb`), use:
```bash
export PATH=./node_modules/.bin:$PATH
```
Now you can use `enb` or `gulp` from the root of your project.
```bash
enb make
```
or
```bash
gulp
```
### The basic commands
Execute the following commands in your terminal.
#### Start the dev server
```bash
./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`.
```bash
npm start
```
The development server is running. To check it out, navigate to [http://localhost:8080/desktop.bundles/index/index.html](http://localhost:8080/desktop.bundles/index/index.html).
You may also specify different port if `8080` is already taken by some other service:
```bash
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:
```bash
bem create new-block
```
#### Add a page
```bash
mkdir -p desktop.bundles/page
touch desktop.bundles/page/page.bemjson.js
```
And add following content:
```js
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
- [Static page quick-start](https://en.bem.info/platform/tutorials/quick-start-static/)
- [Starting your own BEM project](https://en.bem.info/platform/tutorials/start-with-project-stub/)
- [Tutorial for BEMJSON template-engine](https://en.bem.info/platform/bemjson/)
- [Tutorial on BEMHTML](https://en.bem.info/platform/bem-xjst/)
- [Tutorial on i-bem.js](https://en.bem.info/platform/tutorials/i-bem/)
## Project-stub based projects
- [SSSR (Social Services Search Robot)](https://github.com/bem/sssr) — study app with BEM full-stack
## Videos
- [BEM - Building 'em modular](https://www.youtube.com/watch?v=huQp7gr3WPE)
- [BEM for JavaScript Talk on Camp JS](https://en.bem.info/talks/campjs-melbourne-2014/)