https://github.com/getbem/awesome-bem

Links, articles, layers for BEM
https://github.com/getbem/awesome-bem

List: awesome-bem

Last synced: about 1 month ago
JSON representation

Links, articles, layers for BEM

• Host: GitHub
• URL: https://github.com/getbem/awesome-bem
• Owner: getbem
• Created: 2014-08-29T06:32:50.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-03-11T07:17:41.000Z (almost 10 years ago)
• Last Synced: 2024-05-31T15:24:30.021Z (7 months ago)
• Size: 274 KB
• Stars: 164
• Watchers: 9
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• fucking-lists - awesome-bem
• awesomelist - awesome-bem
• collection - awesome-bem
• lists - awesome-bem

README

        
# [Awesome](https://github.com/jnv/lists) BEM [![Gitter chat](http://img.shields.io/badge/gitter-bem--talk-brightgreen.svg?style=flat)](https://gitter.im/bem/talk)

> [Tools](#tools), [sites](#sites), [articles](#articles) about BEM (frontend development method)

## Articles

 * [MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) – getting your head ’round BEM syntax

 * [CSS guidelines](http://cssguidelin.es/#bem-like-naming)

 * [BEM methodology for small projects](http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/)

 * [BEM It! for Brandwatch](http://www.slideshare.net/MaxShirshin/bem-it-for-brandwatch)

 * [Used and Abused](http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/) – CSS Inheritance and Our Misuse of the Cascade.

 * [Objects in Space](https://medium.com/objects-in-space/objects-in-space-f6f404727) — A style-guide for modular SASS development using SMACSS and BEM

 * [How to Scale and Maintain Legacy CSS with Sass and SMACSS](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/)

 * [Building a modular My Health Skills with BEM and Sass](http://www.bluegg.co.uk/building-my-health-skills-part-3/)

## Tools

### Building

 * [enb](https://github.com/enb-make/enb) – build system with lots of bundled plugins and complex dependency system.

 * [kabem](https://github.com/viewbook/dev-kabem) - quick scaffolding and tweaking of HTML with BEM CSS.

 * [gulp-bem](https://github.com/floatdrop/gulp-bem) – build helpers for working with layers, dependencies and blocks.

 * [gulp-bem-pack](https://github.com/floatdrop/gulp-bem-pack) – pack JavaScript files with layers support.

### JQuery plugins

 * [jquery-bem](https://github.com/hoho/jquery-bem)

 * [jquery-bemhelpers](https://github.com/ingdir/jquery-bemhelpers)

### Layers

These layers does not rely on building system you use. They often contain CSS files, that written in BEM methodology and templates to generate HTML.

 * [bem-bootstrap](https://github.com/matmuchrapna/bem-bootstrap) – [Bootstrap](http://getbootstrap.com/) framework.

 * [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids) – simple, fluid, nestable, flexible, Sass-based, responsive grid system.

### Template engines

 * [bemto](https://github.com/kizu/bemto) – mixins for writing BEM-style code for [Jade](http://jade-lang.com/).

 * [beml](https://github.com/zenwalker/node-beml) – super simple HTML postprocessor to handle BEM.

 * [bh](https://github.com/enb-make/bh) – declarative BEMJSON to HTML processor.