Generator-fronty NPM

Generator-fronty. v5.0.0

Frontend boilerplate built on yeoman, bower and grunt.

It's something like Atomic Design and BEM principles I use in HTML\CSS part:

Blocks can contain own elements and other blocks.
Elements can contain elements of parent's block or other blocks.
Block modificators can change own block elements and other child blocks.
Styles depend on classes, not tags or ids.
No cascades! (just if one block changes while entering another or modificator changes block\element and it's blocks\elements)
No global modificators, just with blocks and elements, except parent modificators (see Option 2 in "Block to block modificators")
For reusable styling use particles (atoms — mixins\placeholders).
Separate styles and scripts, use data-* attributes and IDs for logic and classes for styling. (But if DOM manipulation perfomance matters, you know what to do by yourself)
Every reusable component should be separate block

Naming:

.block-name {};
.block-name__element-name {};
.block-name_modificator {};
.block-name__element-name_modificator {};
.block-name {
  &._modificator {}
};
.block-name__element-name {
  &._modificator {}
};

Block to block modificators:

// Option 1.
// parent-block.scss
.parent-block {
  &._reverse-color {
    background: black;

    .child-block {
      background: white;
    }
    .child-block__element {
      color: black;
    }
  }
}
// child-block.scss
.child-block {}


// Option 2.
// parent-block.scss
.parent-block {
  &._reverse-color {
    background:black;
  }
}
// child-block.scss
._reverse-color {
  .child-block {
    background:white;
  }
  .child-block__element {
    color: black;
  }
}

Particles (atoms) concept:

@mixin particle-name () {
    margin: 1em 0
};
%particle-name {};

.block-name {
  @include %particle-name();
  // or
  @extend %particle-name;
}

Install:

npm install -g generator-fronty
cd myProjectFolder
yo fronty
grunt serve
grunt build

Commands:

grunt [build] # build project
grunt build:server # build and load server
grunt serve # connect server with livereload for prototyping
grunt pre # fast build with no minification for debugging
grunt wPre # prebuild with watch
grunt wPre:server # prebuild with watch and server
grunt block:name # add block with html,sass files and add it to styles/_blocks.sass
grunt rBlock:name # remove block
grunt uBlocks # updates blocks.sass
grunt render # renders all .mustache templates to html files

Templates navigation:

Ctrl+SHift+X
3 double taps with two fingers

Dependencies:

Node.js:
- Grunt-cli
- Bower
- Yeoman

Files and folders explanation

app/ - source folder
dist/ - production folder
index.html - source index file
production.html - production index file
other .html in root - templates from "grunt render" command

app/bower - vendor files installed from bower
app/scripts/dev/ - files for development purposes only
dist/templates/render/ - rendered templates from "grunt render" command