Awesome Open Source
Awesome Open Source


Github release Github issues Github stars

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


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:

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 / to be about your project.
  6. Re-run the build and start scripts. A clean slate!


  • /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!


Command Purpose
yarn run init Remove Barebones examples and references.
yarn run lint:js Lint JS (see eslintConfig 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. 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 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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,419
babel (357
eslint (258
postcss (172
yarn (157
webpack2 (109
stylelint (57