Barebones: A JavaScript repository from jaydenseric

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.

Setup

For development tools and building:

Ensure your editor supports:

EditorConfig. Atom users install editorconfig.
ESLint live JS linting, respecting package.json config. Atom users install linter-eslint.
stylelint live CSS linting, respecting package.json config. 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.json for build tools.
Edit /readme.md to be about your project.
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.

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.