Skip to content

siimonevans/design-boilerplate

Repository files navigation

Design boilerplate

A starting point for designing and prototyping in the browser with an emphasis on speed and simplicity. The aim is to cater for designers with varying front-end skillsets, while still offering the latest features for those who want them.

View the demo

Features

  • Superfast live reload
  • Dynamic component imports
  • Sass compilation, autoprefixing, minification and linting
  • Mildly-opinionated CSS structure
  • JS module bundling, optimisation and linting
  • 'Easy' JS usage (you don't have to use ES6, modules, etc)
  • YAML data imports
  • Image optimisation
  • Automated upload to staging

Dependencies

  • Yarn (on OS X install brew then brew install yarn)

Quick Start

Get started with a new project by running the following commands:

$ git clone https://github.com/SimonDEvans/design-boilerplate.git
$ cd design-boilerplate
$ yarn

Local development

Start a local development environment:

$ yarn start

This will compile files, then start a server at http://localhost:3000 that will live-reload when changes are detected.

Build for production

Build assets ready for production:

$ yarn build

Assets

CSS

  • Add and modify styles in src/assets/styles
  • Normalize included by default, along with some useful mixins and base styles
  • Most styles should live in the components directory

JS

  • Add and modify JS in src/assets/scripts
  • Scripts can be imported as modules or listed in main.js
  • Linting available but not enabled by default

Images

  • Add and modify images in src/assets/images
  • Automatically optimised when production build command is run

Data

  • Add and modify globally-available data in src/data
  • Uses the YAML format

Templating

  • Add and modify templates in src/templates
  • Handlebars syntax
  • Includes support for partials, helpers, etc
  • Example page and component provided by default

Deploying

You can take advantage of the nodejs package dploy and upload the dist directory to a staging environment. To do so you will need to:

  • Make a copy of example.dploy.yaml and name it dploy.yaml
  • Modify the host user and path.remote variables
  • Run yarn deploy to start the deployment process

Window resize

A window resize panel is available, but not by default and must be created on a page-by-page basis. To use it:

  • Copy and paste the contents of src/templates/pages/resize-default.html into a new pages file
  • Change the url data field to match the filename of the page you wish to view in resize mode
  • For example, to create a resizable version of pages/homepage.html, copy the resize-default.html example into a new file called homepage-resizer.html (or something sensible) and set url to homepage