What is this?
bem-core is a base library for web interface development.
The easiest way to run a project with
bem-core is to use
You can use any other way you are familiar with to include the library into the project.
common.blocks— suited for any devices and browsers
desktop.blocks— should be used for desktop browsers
touch.blocks— implement some touch-platforms specifics
i-bem— base block with helpers for JS and HTML
strings— helpers for JS-strings
objects— helpers for JS-objects
functions— helpers for JS-functions
querystring— helpers for work with querystring
tick— global timer
idle— IDLE event
next-tick— polyfill for
inherit— OOP helpers
clearfix— CSS clearfix trick
identify— identify JS-objects
cookie— helpers for work with browser cookies
vow— Promises/A+ implementation
dom— helpers for work with DOM
loader— loader for JS files
ua— browser features detection
keyboard— keyboard helpers
page— html/head/body scaffold
- vanilla.js + browser.js
The autogenerated JSDoc API can be found on bem.info. E.g. JSDoc for
i-bem is here https://en.bem.info/platform/libs/bem-core/current/desktop/i-bem/#jsdoc
You can check the changelog at the Changelog page.
If you used BEM before, check the migration instructions.
Get the needed version code (e.g.,
$ git clone -b v4 git://github.com/bem/bem-core.git $ cd bem-core
Install the dependencies:
$ npm install
export PATH=./node_modules/.bin:$PATHor an alternative way to run locally-installed
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.
A default test bundle for
$ 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
Run tests for other BEM entities in the same way. This will work for those which are equipped with
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
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.
- Google Chrome 29+
- Firefox 24+
- Yandex 1.7+
- Opera 12.16
- MSIE 10.0
- MSIE 9.0
- MSIE 8.0
- Opera 12.15
- Opera 17.0
- Opera 16.0
- Opera 12.14
- Opera 12.2
- Firefox 23
- iOS 6+
- Android 2.3+
- Opera Mobile 12+
- Windows Phone 7+
- iOS 5
- Android 2.2
Code and documentation copyright 2012 YANDEX LLC. Code released under the Mozilla Public License 2.0.