- Node >=4.4.0
- NPM >=3.0.0
It's recommended that you use a node version manager, like nvm.
nvm install
nvm use
First, install your dependencies:
npm install
To start a Browsersync server:
npm run dev
or to build, cachebust, and minify all assets for production:
npm run build
nconf is used to handle configuration and 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.
- Required trailing commas.
- 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 hierarchical selectors.
- Required empty line between nested selectors, except first nested.
- No browser hacks.
- No unsupported browser features.
Generated by mo static.