Deprecated
Design system
WIP: The design system fractal instance is a wrapper for 2 Co-op dependancies. The SCSS and HTML exist in separate repositories so they can be included in projects as needed.
- SCSS: Co-op foundations - https://github.com/coopdigital/coop-frontend-foundations
- HTML: Co-op components - https://github.com/coopdigital/coop-frontend-components
Installation
Fractal component library
Requirements: NodeJS 4.4.7+ / npm 6.0.0
First, check out repository (https://github.com/coopdigital/design-system) on your machine, and navigate to the repository root in a terminal window.
$ npm install
This will get the toolkit SCSS and the component HTML.
Linking the SCSS and HTML for working locally
The Design system is set up to allow easy development work on the Toolkit and HTML components. In order to reflect changes made to your local versions directly in your local version of the Design system, you must first link the NPM dependency to your local versions.
First clone the Toolkit repository:
git clone git@github.com:coopdigital/coop-frontend-foundations.git
Create a reference to the local NPM package from the Toolkit directory:
cd coop-frontend-foundations
npm link
From the Design system directory, link the NPM package to the local version:
cd ../design-system
npm link coop-frontend-foundations
Then clone the Components repository:
git clone git@github.com:coopdigital/coop-frontend-components.git
Create a reference to the local NPM package from the Components directory:
cd coop-frontend-components
npm link
From the Design system directory, link the NPM package to the local version:
cd ../design-system
npm link coop-frontend-components
Any changes made to the local version of the Foundations or Components will now automatically be reflected in the local version of the Design system.
Start local server
Start Fractal & webpack locally.
This triggers file watching and browser syncing
$ npm run watch
Navigate to http://localhost:3000/
Deploy
The Design system deploys the /build folder to Heroku using https://github.com/paulmsmith/heroku-buildpack-static
You have to commit the /build folder and run:
$ npm run build
Before pushing.