Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.