BEM Calendar

This is the assignment for entering Frontend Developer School by hh.ru.

Project based on ideas of Nikolas Zakas and developed using BEM methodology.

See my blog post for more information.

View demo

What is inside?

Features

• Static code analyser and codestyle checking with jsint and jscs
• More than 100 unit tests with mocha and phantomjs
• Auto sorting css rules with csscomb
• Using git hooks to lint your code, run tests, and auto sorting css rules before each commit
• CI using travis: lint javascript code and run tests after each push, then publish a new version of calendar to gh-pages if all tests has been passed

Methodologies, libraries, and frameworks

• BEM — a Block-Element-Modifier methodology for developing frontend
• bem-core — a base library for web interface development
• bh — a templates engine for BEM methodology
• ymaps modules — a modules system
• inherit — an inheritance syntax sugar

Tools

• enb — the fastest builder for BEM projects
• borschik — an extendable builder for text-based file formats (css and javascript, for example)
• jshint-groups — a JSHint wrapper allowing validate filesets with different jshint options
• jscs — a code style checker for javascript
• csscomb — a coding style formatter for CSS
• git-hooks — a tool for git hooks managment
• mocha + chai + sinon + phantomjs — testing client javascript

Project structure

.bem                ENB config for building project
.git-hooks          Git hooks
docs                Documentation
blocks              Code
blocks/common       Visual blocks for building components
blocks/core         Core of application
blocks/components   Modules
blocks/interfaces   Description of Interfaces
blocks/vendors      Vendor libraries and helpers
pages               Pages
test                Special page for building/running tests

How to develop?

Requirements

• nodejs >= 0.8.0
• npm >= 1.2.0

Installation

git clone git@github.com:tarmolov/bem-calendar.git
cd bem-calendar
make

Then open the link in your favorite browser:

http://localhost:8080/pages/calendar/calendar.html

Build project and run enb server

make

Static code analyser and codestyle checking

make lint

Run tests

In console:

make test

In browser:

make

Then open the link in your favorite browser:

http://localhost:8080/test/test.html

Or you can look at screenshoots generated using BrowserStack:

• The start screen.
• With opened popups.

Contribution

See Contribution guide for more information.