Frontend-starter default bundle

This is a bundle for Frontend-starter with default directory structure.

Installation

Before start you need:

• Bower or npm
• Git, e.g. Github desktop

Install Frontend-starter, then unpack this repo to the desired project location (if you clone, you'd rather want to remove the .git directory, because as it is just a kind of template, it won't be under version control). Remember not to use a directory containing an exclamation mark (!) - it breaks glob patterns used by the tasks.

• Bower

  Run:

  bower install
  

  On Windows, remember to run Bower from Git Shell. Bower files are by default placed in bower_components - to change this, edit the .bowercc file and change dirs.bower config definition.

• npm

  First, uncomment webpack support in the frs.config.js file and move dependencies from bower.json to the package.json file; change sass-core to sass-starter there (the same package, but different name in npm) and in src/styles/style.scss.

  Finally, run:

  npm install
  

Then use the Frontend-starter gulp tasks. For example, for the first init, use:

frs start

To fully customize directory structure and other parameters, see the docs config section.

Directory structure of the src/:

Fonts: /fonts

Font files for font-face generation.

Images: /img

Your images, that will be optimized and saved in the dist directory.

Sprites: /sprites

Image sprites, see more in the Sprites section.

Javascript: /js

All your JavaScript files (including those installed with Bower) are by default concatenated into one file: app.js. Thanks to this, you don't have to change markup when adding/removing any files or packages.

By default, jQuery@2 is installed.

/vendor/js contains third-party scripts, that you can't or don't want to install via Bower - they are watched and handled separately and prepended to the app.js file.

If you want to skip any of the Bower packages, you have 2 options:

• create a comp that uses selected packages, set its filename to null and excludeIn to true
• use the overrides option in bower.json file or edit configuration config.js.mainBowerFiles.overrides value (see main-bower-files docs).

Styles: /styles

A simple directory structure for BEM methodology implementation:

• style.scss: contains only imports of included files
• modules: project-specific config (common variables, fonts, colors) and mixins
• components: block styling

By default, the following libraries are included:

• reset-css - provides CSS reset (by Eric Meyer)
• Breakpoint for convenient media queries handling
• SASS-core - mixins and functions such as: automatic rem/vw/percentage unit converters for dimensions and fonts, responsive sprites, grids

If you don't need any of them:

• remove the dependency from the bower.json/package.json file (depending on the package manager you use)
• remove import from styles/style.scss

Place any third-party scripts that you can't or don't want to install via package manager into /vendor/styles.

Sprites

Sprites are generated automatically by gulp-spritesmith for all images placed in the /sprites directory. To use a sprite, use the mixin @include sprite($filename). See more in Frontend-starter sprite docs and SASS-core docs.

Views: /views

See examples to enable Swig support.