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.
- 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.
For development tools and building:
- Install the latest Node.js and NPM.
- Install the latest Yarn.
yarnwithin the project root directory in Terminal.
yarn run build:watch.
yarn run startin another tab. Tada!
Ensure your editor supports:
- EditorConfig. Atom users install editorconfig.
- ESLint live JS linting, respecting
package.jsonconfig. Atom users install linter-eslint.
- stylelint live CSS linting, respecting
package.jsonconfig. Atom users install linter-stylelint.
After inspecting the example components:
- Remove Barebones examples and references. Within the project directory in Terminal run
yarn run init. This script also deletes itself.
- Customize the meta in
- Customize the icons in
- Customize the Browserslist browser support queries in
/package.jsonfor build tools.
/readme.mdto be about your project.
- Re-run the build and start scripts. A clean slate!
/componentscontains 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/appis 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.
/bundleis the compiled JS, CSS and sourcemaps.
/contentis where actual content such as images live. This is analogous to a CMS
uploadsfolder and can be organized however you like. Never place content assets or hardcode content text anywhere in
||Remove Barebones examples and references.|
||Lint JS (see
||Lint JS and automatically fix issues.|
||Lint CSS (see
||Compile JS and CSS to
||Build, rebuilding on source file changes.|
||Start a dev server and open in browser.|
- 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.
bodyare an exception as they form the top
- Only refer to the UI and not content when naming things in
/components. For example,
icon-linkis more versatile than