[Not maintained] Front-end boilerplate.
CSS JavaScript
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
test
.editorconfig
.gitattributes
.gitignore
.jshintrc
.travis.yml
LICENSE
README.md
package.json

README.md

[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.