bem-core library
Documentation on bem-core
in a much more informative way is also available at bem.info. It is also available in Russian.
What is this?
bem-core
is a base library for web interface development.
It provides the minimal stack for coding client-side JavaScript and templating.
Use
The easiest way to run a project with bem-core
is to use
the project-stub.
You can use any other way you are familiar with to include the library into the project.
Inside
Levels
common.blocks
— suited for any devices and browsersdesktop.blocks
— should be used for desktop browserstouch.blocks
— implement some touch-platforms specifics
Blocks
i-bem
— base block with helpers for JS and HTMLstrings
— helpers for JS-stringsobjects
— helpers for JS-objectsfunctions
— helpers for JS-functionsevents
— JS-eventsquerystring
— helpers for work with querystringtick
— global timeridle
— IDLE eventnext-tick
— polyfill fornextTick
/setTimeout(0, ...)
inherit
— OOP helpersjquery
— jQueryclearfix
— CSS clearfix trickidentify
— identify JS-objectscookie
— helpers for work with browser cookiesvow
— Promises/A+ implementationdom
— helpers for work with DOMloader
— loader for JS filesua
— browser features detectionkeyboard
— keyboard helperspage
— html/head/body scaffold
Technologies
vanilla.js + browser.js
bemhtml
bemtree
API
The autogenerated JSDoc API can be found on bem.info. E.g. JSDoc for i-bem
is here https://en.bem.info/libs/bem-core/current/desktop/i-bem/jsdoc/
Changelog
You can check the changelog at the Changelog page.
Migration
If you used BEM before, check the migration instructions.
Development
Working copy
Get the needed version code (e.g.,
v2
):$ git clone -b v2 git://github.com/bem/bem-core.git $ cd bem-core
Install the dependencies:
$ npm install
You need
export PATH=./node_modules/.bin:$PATH
or an alternative way to run locally-installednpm
dependencies.Install all necessary libraries:
$ npm run deps
Build and run tests (specs):
$ npm test
Run development server:
$ npm start
How to contribute
Please refer to How to contribute guide.
Modular testing
A default test bundle for functions__debounce
:
$ magic make desktop.specs/functions__debounce
You can see the results of the tests in the terminal after the building process finishes.
You can also watch them in a browser loading desktop.specs/functions__debounce/spec-js+browser-js+bemhtml/spec-js+browser-js+bemhtml.html
.
Run tests for other BEM entities in the same way. This will work for those which are equipped with .spec.js
file.
Code coverage
To build code coverage report add ISTANBUL_COVERAGE=yes
environment variable to the tests run command:
$ ISTANBUL_COVERAGE=yes magic make desktop.specs && istanbul report html
You can run modular testing with coverage as well by using more concrete build target as was described above.
$ ISTANBUL_COVERAGE=yes magic make desktop.specs/functions__debounce && istanbul report html
After tests finish, you can view coverage HTML report by opening coverage/index.html
in your favorite
browser.
The whole code coverage statistics can be found on the bem-core profile page on Coveralls.
Tests are built with a enb-bem-specs library. Check the details (available in Russian only).
Supported browsers
Our browser support policy is based on statistics we get from Yandex services.
Browsers with more than 2% users get full compliant support, more than 0.5% — partially compliant (which means that data is accessible but not necessary 100% functional). New features testing is not provided by us for browsers with less than 0.5% users.
Desktop
Fully compliant
Google Chrome 29+
Firefox 24+
Yandex 1.7+
Opera 12.16
MSIE 10.0
MSIE 9.0
MSIE 8.0
Opera 12.15
Partially compliant
Opera 17.0
Opera 16.0
Opera 12.14
Opera 12.2
Firefox 23
Touch
Fully compliant
iOS 6+
Android 2.3+
Opera Mobile 12+
Windows Phone 7+
Partially compliant
iOS 5
Android 2.2
License
Code and documentation copyright 2012 YANDEX LLC. Code released under the Mozilla Public License 2.0.