Frontend-starter default bundle

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

Installation

Before start you need:

• Bower
• 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.

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

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 is taken from SASS-starter.

By default, the following libraries are included:

• meyer-reset - provides CSS reset
• 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 file
• remove import from styles/style.scss

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

Sprites

Sprites are generated automatically by gulp-spritesmith for all images placed in the /sprites directory. To use a sprite, you have to uncomment the line in style.scss with sprite sheet import and then 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.