/atom-bem-tools

BEM Serializers for Atom

Primary LanguageJavaScriptMIT LicenseMIT

BEM Tools for Atom

Some handy tools to make developing BEM HTML code in Atom even more faster. It can convert BEM JSON, HTML, CSS/SCSS and some Pug-like code into each other.

Installing

apm install bem-tools

Show Usages

Default shortcut: ctrl+alt+b. All the commands are also available with context menu.

HTML to CSS/SCSS

HTML to CSS

Pug-like code to HTML/SCSS

Pseudocode to HTML/CSS

Pug-like code to BEMJSON

Pseudocode to BEMJSON

HTML to BEMJSON

HTML to BEM JSON

BEMJSON to HTML/SCSS

BEMJSON to HTML/SCSS

Some pug-like pseudocode cases

Pseudocode

spaceship
  cabin
    span.pilot--awake
    span.pilot--copilot--asleep
  cargo

Turns to HTML

<div class="spaceship">
  <div class="spaceship__cabin">
    <span class="spaceship__pilot spaceship__pilot--awake"></span>
    <span class="spaceship__pilot spaceship__pilot--copilot spaceship__pilot--asleep"></span>
  </div>
  <div class="spaceship__cargo"></div>
</div>

Pseudocode

spaceship
  a.section*3 CONTENT

Turns to HTML

<div class="spaceship">
  <a class="spaceship__section" href="#">CONTENT</a>
  <a class="spaceship__section" href="#">CONTENT</a>
  <a class="spaceship__section" href="#">CONTENT</a>
</div>