Front End Stack
A boilerplate used by the Front End team at Pixel Fusion, a Product Design studio based in Auckland, New Zealand.
Further documentation around the architecture, techniques and best practices used in this boilerplate can be found in the Front End Stack Wiki.
- Node.js > 7.3.0 (
brew install node)
- NPM > 4.0.0 (installed as part of Node.js)
- Yarn > 0.18.0 (
brew install yarn)
The repository is divided into three branch categories: Feature, Hotfix, Iteration, Test. Both Feature and Hotfix branches should be directly linked to an open issue: FESt/issues
- Feature: Should be used for developing any feature e.g
- Hotfix: Used for bug fixing in either iteration or feature branches e.g
- Iteration: Used for different build iterations but keep the same CSS Architecture e.g
- Test: Create testing branches in either root or iterations for shared experiments.
Note: For Iteration branches create a
sass/test.scss file to house any custom styling. This is to avoid conflicts when merging the CSS Architecture (
sass/*) from Develop.
yarn install to install the project.
- Babel, to provide ES6 support.
- PostCSS, to allow us to use:
- Autoprefixer, to take care of those pesky prefixes...which are being phased out!
View the Style Guide at
yarn build to create a production ready
public folder with all necessary assets.
To run both linters, use the following command:
yarn run lint
yarn run lint-js
To just run the SASS/CSS linter:
yarn run lint-scss
To run the Jest unit tests, use the following command:
Supported and tested in the following browsers:
- Internet Explorer (10-11)
- Safari 9
- Edge 14
- babel-polyfill - Adds modern ES6 language support to older browsers (including Promises).
- SVG4Everybody - Adds the ability to implement
<use></use>SVG element in older browsers (IE10), for use with external SVG loading.
- whatwg-fetch - Adds
fetch()support to older browsers.
- Always set width and height on elements which implement external
<use>elements, otherwise Internet Explorer does not display them.
Our base HTML is inspired by:
front-end-scripts build --linked
front-end-scripts start --linked