A barebones boilerplate for getting started on a bespoke front end.

• Environment agnostic; setup your own backend and component templating.
• A minimalist component architecture with some (easily removed) examples.
• NPM and Yarn for dependancies and tools.
• webpack for builds.
• ES6 via Babel. babel-preset-env applies only the nessesary transforms for your level of browser support.
• DOM4 polyfills modern DOM and Animation Frames functionalities.
• JS linting with ESLint and extended JavaScript Standard Style config. A handy fix script can correct most issues across the entire project.
• CSS linting with stylelint and extended stylelint-config-standard config.
• PostCSS, CSSNext and Autoprefixer take care of vendor prefixes and allow cutting edge CSS syntax. A faster, standards aligned alternative to preprocessors such as Sass.
• Handle icons the modern way with polyfilled SVG symbols and external references.
• Includes http-server as an optional zero-config dev server.
• Browser support: > 2% in AU.
• MIT license.

Setup

For development tools and building:

1. Install the latest Node.js and NPM.
2. Install the latest Yarn.
3. Run yarn within the project root directory in Terminal.
4. Run yarn run build:watch.
5. Run yarn run start in another tab. Tada!

Ensure your editor supports:

• EditorConfig. Atom users install editorconfig.
• ESLint live JS linting, respecting package.json config. Atom users install linter-eslint.
• stylelint live CSS linting, respecting package.json config. Atom users install linter-stylelint.

After inspecting the example components:

1. Remove Barebones examples and references. Within the project directory in Terminal run yarn run init. This script also deletes itself.
2. Customize the meta in /index.html.
3. Customize the icons in /content.
4. Customize the Browserslist browser support queries in /package.json for build tools.
5. Edit /readme.md to be about your project.
6. Re-run the build and start scripts. A clean slate!

Structure

• /components contains a sub-directory for each component, holding source JS, styles and image assets. Avoid nesting component directories as a flat structure guarantees unique component names, makes paths less complex and encourages reuse.
• /components/app is the top component for the entire site and is the JS and CSS entrypoint; from here components are recursively imported and initialized. Import polyfills here.
• /bundle is the compiled JS, CSS and sourcemaps.
• /content is where actual content such as images live. This is analogous to a CMS uploads folder and can be organized however you like. Never place content assets or hardcode content text anywhere in /components!

Scripts

Tips

• Use NPM with Yarn to manage 3rd party dependencies.
• Avoid adding already minified assets for better sourcemap assisted debugging.
• Use JSDoc when writing JS.
• Don't vendor prefix CSS rules that are on a standards track; Autoprefixer will take care of it.
• Don't reset, normalize or otherwise declare styles globally; all variables and rules should be scoped to a component. html and body are an exception as they form the top app component.
• Only refer to the UI and not content when naming things in /components. For example, icon-link is more versatile than contact-us-link.

Helpful projects

• See Fix.css for taming common elements.
• Use svgsymbolviewer.io to view symbols in SVG files.
• Install Hurdler to setup component URL hash interactions.
• Install scroll-animator to reliably scroll to elements, even when the page is still loading.