# Comic Relief Pattern Lab [![NPM version][npm-image]][npm-url] [![Build Status][concourse-image]][concourse-url] > A Node-based project to supply Sass components and a styleguide generator. ## The idea To have a centralised hub supply common styling across Comic Relief products. ## Quicklinks [Styleguide](#styleguide) [Workflow](#import-styling-to-a-project) [Semantic Release Process](#semantic-release-process) [Visual Regression](#visual-regression) ## Styleguide * generated by [kss-node](https://github.com/kss-node/kss-node) * support twig template * multiple entries * view on - `/dist/index.html` - `/dist/[project_name]/index.html` ## Import styling to a project * run `npm install @comicrelief/pattern-lab --save` * on local scss file, add `@import '~pattern-lab';` (or use `includePaths: ['node_modules']` in grunt-sass `options` configuration) * or copy css file straight to your project ## Contribute styling to pattern-lab ### Development workflow #### Get it up and running in another project * Clone this repository to a directory at the root level of your CR dev, alongside the other project. e.g. `git clone https://github.com/comicrelief/pattern-lab ~/cr_root/pattern-lab` * Go to the npm root level of the project you want to use it in. E.g. for payin: `cd ~/cr_root/payin/web` * If that project has a link script, just `yarn link-patternlab` * Or if it doesn't, `npm install npm-link-local --global` and then e.g. `npm-link-local ~/cr_root/pattern-lab` Either of the last 2 steps creates a symlink in the other project's `node_modules`, pointing to your local copy of `pattern-lab`. #### Make code changes * it follows same development process: create feature branch -> commit and push changes -> create pull request for code review * run `yarn watch` to liveload file changes * run `yarn build` to generate all themes in the styleguide * run `yarn build-base` to only generate the base theme in the styleguide * run `yarn build-cr17` to only generate the cr17 theme in the styleguide * run `yarn build-frost` to only generate the frost theme in the styleguide * run `yarn build-payin` to only generate the payin theme in the styleguide * run `yarn build-rnd17` to only generate the rnd17 theme in the styleguide * run `yarn build-sr18` to only generate the sr18 theme in the styleguide #### Dev server * run `yarn dev-server` or `yarn watch` * go to `http://localhost:1337` to view styleguide ## Semantic Release Process Git commit messages are used to automatically publish a new version of npm package. To achieve this, **every commit message** should have a **type** and a **message** in the format described below. Travis CI will run a job automatically after PR is merged and analyze all commit messages since last npm release. Then semantic-release plugin will calculate new version according to this result. To avoid commit loops, version numbers are not committed back to `package.json`. Versions are listed on [GitHub releases](https://github.com/comicrelief/pattern-lab/releases) and used in the modified package.json [published to npm](https://www.npmjs.com/package/@comicrelief/pattern-lab). Commit messages are expected to be in this format: ``` ():