Navigate to template folder and run 'sudo npm install'. If this fails, delete node_modules folder and run 'sudo npm cache clean', then try again.
Open /gulp/config.js and fill in variables with accurate information about files/folder structure (This should already work off the bat with this template.) Different features and tasks can be enabled or disabled here.
Unless adding a new task, the config file is the only file that should be changed with each project. If adding a new task/plugin which proves useful and reusable, consider setting up properly in the config file and saving to this repository.
Navigate to templates folder and run 'gulp'
Used to sync user input across multiple browsers as well as auto-inject css changes
Minification and browserify
Minification, autoprefixer, CMQ (Collect media queries), pixrem (Rem fallback)
Based on ITCSS by Harry Roberts https://speakerdeck.com/dafed/managing-css-projects-with-itcss
- Settings - Variables, config.
- Tools - Mixins, functions
- Generic - Normalize, reset, * {}
- Base - Unclassed HTML rules
- Objects - Cosemetic-free design patterns
- Components - Chunks of UI
- Trumps - Helpers and overrides
The goal of this architecture is to minimise waste and avoiding 'undoing' any css rules.
Organised around the CommonJS format, using browserify to build the final js. All app and setup scripts should go in the main 'script.js'. Custom built modules should be written in the CommonJS format and stored in the /js/modules folder, where they can be 'required' within the main script.js. Any 3rd party plugins or libraries should go in /js/plugins.