V&A Visual Style Guide

View online at vam-design-guide.surge.sh.

Requirements

This visual style guide is built on top of Fractal, a project by Clearleft. For active development Node.js must be installed.

The documentation for Fractal is super useful. Have a read through the Core Concept documentation before modifying.

Including in your project

Add the following to your package.json file, replacing the version number with the version that you want to use:

"vam-fractal": "vanda/vam-fractal#0.1.0"

You can then import the Sass directly into your stylesheet either by directly referencing the node_modules folder or by creating a symlink.

@import 'vam-fractal/dist/css/vam-style';

Create a symlink:

ln -s node_modules/vam-fractal/dist/css/vam-style.css assets/css
ln -s node_modules/vam-fractal/dist/svg/vamicons.svg assets/svg

Fonts are also included in this project too but in a different location:

ln -s node_modules/vam-fractal/src/fonts assets/

TODO: Get gulp to create a relative symlink from fonts in the the dist folder

Development

If you haven't read the documentation for Fractal yet, get over there now.

Each time you create a new Fractal component with a SCSS file in it, you will need to also include that within src/assets/styles/vam-style.scss.

1. $ npm install
2. $ npm run dev
3. Open your browser to localhost:8000

Deployment

Ensure that you have access to deploy to Surge first.

1. $ npm run deploy
2. Open your browser to vam-design-guide.surge.sh

Acknowledgements

• Clearleft
• This set up has been heavily inspired by Bits of 24 ways by Paul Robert Lloyd. Thank you.