by jaydenseric

jaydenseric /Barebones

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

128 Stars 7 Forks Last release: over 3 years ago (v9.0.0) 171 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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
    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
  3. Customize the icons in
  4. Customize the Browserslist browser support queries in
    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
    folder and can be organized however you like. Never place content assets or hardcode content text anywhere in




yarn run init
| Remove Barebones examples and references.
yarn run lint:js
| Lint JS (see
yarn run lint:js:fix
| Lint JS and automatically fix issues.
yarn run lint:css
| Lint CSS (see
yarn run clean
| Delete
yarn run build
| Compile JS and CSS to
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.
    are an exception as they form the top
  • Only refer to the UI and not content when naming things in
    . For example,
    is more versatile than

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.