A barebones boilerplate for getting started on a bespoke front end.
Clone or download
jaydenseric Reconfigured Babel to use babel-preset-env, moved browserslist config…
… into package.json and updated docs.

By not unnecessarily transpiling language features that run natively in the browsers we support the bundle JS shrinks from ~19kb to ~15kb .

Closes #18.
Latest commit 531d8c6 Jan 19, 2017

readme.md

Barebones

Github release Github issues Github stars

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

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:

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

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.

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.