• Stars
    star
    275
  • Rank 149,796 (Top 3 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 11 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

BEM Core Library

bem-core library Build Status GitHub Release devDependency Status

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 browsers
  • desktop.blocks β€” should be used for desktop browsers
  • touch.blocks β€” implement some touch-platforms specifics

Blocks

  • 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
  • events β€” JS-events
  • querystring β€” helpers for work with querystring
  • tick β€” global timer
  • idle β€” IDLE event
  • next-tick β€” polyfill for nextTick/setTimeout(0, ...)
  • inherit β€” OOP helpers
  • jquery β€” jQuery
  • 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

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/platform/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

  1. Get the needed version code (e.g., v4):

    $ git clone -b v4 git://github.com/bem/bem-core.git
    $ cd bem-core
  2. Install the dependencies:

    $ npm install

    You need export PATH=./node_modules/.bin:$PATH or an alternative way to run locally-installed npm dependencies.

  3. Install all necessary libraries:

    $ npm run deps
  4. Build and run tests (specs):

    $ npm test
  5. 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.

More Repositories

1

bem-react

A set of tools for developing user interfaces using the BEM methodology in React
TypeScript
440
star
2

yandex-ui

Yandex UI Kit build on React and bem-react
TypeScript
352
star
3

bem-components

Set of components for sites development
JavaScript
332
star
4

project-stub

deps
JavaScript
313
star
5

html-differ

Π‘ompares two HTML
JavaScript
211
star
6

bem-bl

Base BEM library
JavaScript
197
star
7

bem-xjst

bem-xjst (eXtensible JavaScript Templates): declarative template engine for the browser and server
JavaScript
115
star
8

bem-sdk

BEM SDK packages
JavaScript
88
star
9

next-global-css

A preset for nextjs allowing using 3d party libraries with global css
JavaScript
86
star
10

themekit

Build system of design-tokens for any platforms
TypeScript
73
star
11

bh

BH template engine
JavaScript
68
star
12

bem-express

BEM project-stub with BEMTREE and express
JavaScript
43
star
13

bh-php

PHP port of https://github.com/bem/bh. It's cool thing but better use this:
PHP
33
star
14

bem-react-boilerplate

DEPRECATED! A bare minimum frontend boilerplate based on create-react-app and bem-react-core.
TypeScript
31
star
15

sssr

Master class for BEMup
JavaScript
30
star
16

bem-react-components

Components library for develop with React and BEM methodology
JavaScript
29
star
17

bem-mvc

Yet another MVC for i-bem
JavaScript
29
star
18

web-platform

React SDK for building modern, accessible and cross-platforms interfaces
TypeScript
28
star
19

gulp-bem

Usefull gulp modules and plugins to work with BEM methodology
JavaScript
25
star
20

webpack-bem-loader

Webpack BEM loader
JavaScript
24
star
21

bem-history

BEM wrap for History API
JavaScript
22
star
22

bem-identity

BEM brand identity
20
star
23

bem-calendar

calendar based on bem-components
JavaScript
16
star
24

storybook-to-figma

The tool for importing Storybook components to Figma
TypeScript
15
star
25

yandex-ui-icons

TypeScript
13
star
26

yandex-ui-themer

A simple way to create your theme for @yandex/ui with Themekit
TypeScript
12
star
27

babel-plugin-bem-import

BEM import resolver
JavaScript
9
star
28

eslint-plugin-bem-xjst

ESLint environments for bem-xjst
JavaScript
9
star
29

bem-components-php

Set of bh.php templates for bem-components library
PHP
9
star
30

figma-extractor

TypeScript
8
star
31

bem-components-dist

Prebuilt version of bem-components library
JavaScript
8
star
32

jscs-bem

jscs bem preset and some tasty rules
JavaScript
6
star
33

bem-forum

BEM forum on top of github issues
JavaScript
6
star
34

bem-core-dist

Prebuilt version of bem-core library
JavaScript
6
star
35

bem-core-php

bh.php templates for bem-core
PHP
5
star
36

babel-plugin-bem

Babel plugin BEM
JavaScript
5
star
37

ts-docgen-next

Webpack loader for generating documentation from typescript files.
TypeScript
4
star
38

jsd

JSDoc parser
JavaScript
4
star
39

cra-template-yandex-ui

TypeScript
2
star
40

bem-jsdoc3-plugin

Plugin for http://usejsdoc.org/ for documenting bem enteties
JavaScript
2
star
41

es5-shims

es5 shims moved from bem-core
JavaScript
2
star
42

webpack-bem-plugin

JavaScript
1
star
43

design-system

TypeScript
1
star
44

webpack-bem-i18n-loader

JavaScript
1
star
45

bem-jsd

Wrapper for use JSD with BEM plugins
JavaScript
1
star