Gulp starter

• npm install
• gulp(gulp dev) - run dev environment
• gulp build - build project, same as gulp dev but without running dev server
• gulp deploy - deploy project to ftp server
• --prod - use this flag to minify css / js, reduce images size and other differences for production, ex. gulp build --prod, gulp deploy --prod
• gulp sasslint - scsslint, rules
• gulp eslint - eslint, rules. You can use --fix flag to automatically fix problems.

Config file - ftp credentials and paths to files.

Proposed technologies / approaches

HTML

• NUNJUCKS template engine. Optional: EJS or PUG.
• BEM

CSS

• Choose between reset.css and normalize.css
• SCSS
• BEM
• Properties order:
  • Layout: The position of the element in space. Eg.: position, top, z-index.
  • Box: The element itself. Eg.: display, overflow, box-sizing.
  • Visual: Design of the element. Eg.: color, border, background.
  • Type: Typesetting of the element. Eg.: font-family, text-transform.

Code Sample:

  .button {
    position: relative;
    z-index: 2;

    display: inline-block;
    margin: 0 12px;
    padding: 12px 24px;

    background: #3f55aa;
    border-radius: 5px;
    border: 1px solid tomato;
    color: tomato;
    transition: background-color .3s ease-out;

    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
  }

JavaScript

• ES6
• Browserify (CommonJS modules)

File structure

  /* Global code, heplers, utils, etc. */
  common/
    njk/
    scss/
    js/

  /* Reusable components */
  components/
    Component/
      Component.njk
      Component.scss
      Component.js

  /* Pages */
  pages/
    page/
      page.njk
      page.scss
      page.js

Linters

• SCSS-Lint, NOTE: You need to install Ruby.
• ESLint