• Node 6.3.x
• nvm

$ nvm install
$ npm install

$ nvm use
$ npm run dev

First, install your dependencies:

npm install

To start a Browsersync server and watch files for development:

npm run dev

or to build, cachebust, and minify all assets for production:

npm run build

You can also optimize PNG and JPEG images using tinify:

npm run tinify

nconf is used to handle configuration which lives in config.js.

All configuration variables should be defined in the nconf.defaults and it should be indicated if they are required.

The configuration is passed to envyify for transforming with browserify. This means you can use process.env.FOO in your browserified JavaScript files and the appropriate environment variable will be substituted during the build process to be shipped in the browser.

🔐 TIP: Don't leak secret keys, neither by commmitting them nor by passing them to browserify. If the var you are using should be kept secret, you should not add it to config.js.

⏱ TIP: If the config var is an amount of time, specify the units in the var name:

nconf.defaults({
  TIMEOUT_MS: 2000,
  EXPIRATION_S: 3
})

Foundation Sites 6.2.0 is included with a small set of components enabled by default. There is a list of everything you can add at Foundation's Kitchen Sink. To add more, uncomment the appropriate includes from the app.scss file along with the appropriate settings section for the component in the _.settings.scss file. This is described in detail at Foundation's Sass docs.

Browserify-shim is used to bundle individual Foundation JavaScript plugins. When adding new plugins, you will need to update the shim configuration in package.json with the appropriate Foundation files.

Foundation's documentation can be found at foundation.zurb.com. To get started with what's included by default, read these docs:

• Global styles
• Flex Grid and Media Queries
• Typography and Helper Classes
• Forms and Buttons
• Button Group
• Visibility Classes
• Float Classes
• Flexbox Classes
• JavaScript

ESlint is used for static analysis of JavaScript files. By default, the .eslintrc is configured to extend Airbnb's base configuration, with a few small modifications:

• 2 spaces for indentation.
• No semicolons.
• Only single quotes.
• Unix linebreaks.

If you use global variables that are already defined in the DOM, add them to the globals object in the .eslintrc to register them with the linter.

Stylelint is used for static analysis of SASS files. By default, the .stylelintrc is configured to extend stylelint-config-standard and uses stylelint-selector-bem-pattern, with a few small modifications:

• 4 spaces for indentation.
• Only single quotes.
• No vendor prefixes (autoprefixer is preferred).
• Max of 2 adjacent empty lines.
• Required empty line between nested selectors, except first nested.
• No browser hacks.
• No unsupported browser features.

Generated by mo static.