[Generator-fronty] (https://github.com/Oikio/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

Release History

• 5.0.0 some rethinking of core concepts.
• 4.1.0 grunt render task and production.html added, collector.html deprecated.
• 4.0.0 Static pages deprecated, all dependencies updates.
• 3.0.0 New HTML\CSS methodology, major updates and bug fixes.
• 2.3.0 Watch expanded with browser-sync.
• 2.2.0 Collector.html helps you construct static layout from mustache templates.
• 2.1.0 Compass and Ruby Sass changed to node-sass (it's really fast 5-10x).
• 2.0.0 Foundation 5 is here and set by default.