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.
For development tools and building:
- Install the latest Node.js and NPM.
- Install the latest Yarn.
- Run
yarnwithin the project root directory in Terminal. - Run
yarn run build:watch. - Run
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
/index.html. - Customize the icons in
/content. - Customize the Browserslist browser support queries in
/package.jsonfor build tools. - Edit
/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 CMSuploadsfolder and can be organized however you like. Never place content assets or hardcode content text anywhere in/components!
| Command | Purpose |
|---|---|
yarn run init |
Remove Barebones examples and references. |
yarn run lint:js |
Lint JS (see e
6FDC
slintConfig in package.json). |
yarn run lint:js:fix |
Lint JS and automatically fix issues. |
yarn run lint:css |
Lint CSS (see stylelint in package.json). |
yarn run clean |
Delete /bundle. |
yarn run build |
Compile JS and CSS to /bundle. |
yarn run build:watch |
Build, rebuilding on source file changes. |
yarn run start |
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.
htmlandbodyare an exception as they form the topappcomponent. - Only refer to the UI and not content when naming things in
/components. For example,icon-linkis more versatile thancontact-us-link.
- 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.