• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

bem-tools

Create BEM HTML, CSS and JSON faster
  • #bem
  • #bemjson
  • #html
  • #css
  • #sass
pvoznyuk
0.1.15 822
4
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

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> 

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by