In your command line, run npm run setup
and give it a few minutes.
- gulp watch - watch files and compile/reload/inject when changes are detected
- gulp watch --styleguide - same as above, but builds styleguide as well
- gulp - once-off build of all assets
- gulp --styleguide - once-off build of all assets including styleguide
- gulp styles - compile styles
- gulp styles:watch - watch styles for changes and compile
- gulp critical - generates critical css for pages specified in gulpfile.js
- gulp scripts - compile JS
- gulp scripts:watch - watch JS for changes and compile
- gulp images - optimise images in /src/images and move to /assets/images
- gulp wiredep - inject Bower dependencies
- gulp build-styleguide - build the styleguide with KSS Node
If you're using Atom, then you can add this to your Snippets (Atom > Snippets) to build a comment for your styles to translate to the styleguide:
'.source.scss':
'KSS Comment':
'prefix': 'ksscom'
'body': '// ${1:Name}\n//\n// ${2:Description}\n//\n// .modifier - modifier description\n//\n// Markup: ${3:Markup}\n//\n// Style guide: ${4:component.name}\n'
You can see the existing files for examples on how it works.
This boilerplate makes heavy use of awesome things done by other people:
- Normalize.css
- HTML5 Boilerplate
- ITCSS
- BEM (For a clear explanation, see Extra Material below)
- KSS Node
.editorconfig
- Most editors pick this up, and it lets you specify a consistent coding styles. Search foreditorconfig
and install it for your editor of choice.eslintrc
- Rules for ESLint.babelrc
- Setup to transpile ES2015 to ES5.bowerrc
- Instructions for Bowerkss-config.json
- Config for creating a styleguide
This project can use Husky to help lint your code. To enable this, go to your package.json
file, and rename precommit-eg
to precommit
.
This will also attempt to fix any issues in your JS that doesn't line up with the rules in .eslintrc
.
assets/css
- Compiled CSSassets/images
assets/lib
- Typically vendor files that aren't part of the asset pipelineassets/scripts
- compiled JavaScript
src/scripts/
- JavaScript files/modulessrc/scss/
- Sass files, see themain.scss
file for structure information