A prototyping kit for designing in the browser
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.
:zap: View the demo :zap:
brew install yarn
)Get started with a new project by running the following commands:
$ git clone https://github.com/SimonDEvans/design-boilerplate.git
$ cd design-boilerplate
$ yarn
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 assets ready for production:
$ yarn build
src/assets/styles
components
directorysrc/assets/scripts
main.js
src/assets/images
src/data
src/templates
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:
example.dploy.yaml
and name it dploy.yaml
host
user
and path.remote
variablesyarn deploy
to start the deployment processA window resize panel is available, but not by default and must be created on a page-by-page basis. To use it:
src/templates/pages/resize-default.html
into a new pages
fileurl
data field to match the filename of the page you wish to view in resize modepages/homepage.html
, copy the resize-default.html
example into a new file called homepage-resizer.html
(or something sensible) and set url
to homepage