Barebones

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:

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.

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.