Stencila's visual design resources and style guide

This is the place for Stencila's visual design resources (e.g. CSS, icons, logos) and style guide. The resources here will be reused across a number of other repositores including our main website (stencila/website) and the hub (stencila/hub).

To get started with development, clone this repo:

git clone [email protected]:stencila/style.git

Then install the necessary Node packages:

npm install

Build SASS into CSS using the watch NPM script:

npm run watch

In a separate console, run Storybook and refresh your browser when you make changes to the CSS (Storybook automatically refreshes when you make changes to the stories):

npm run storybook

When you want to use this style from another repo, but do active dev here, npm link can be very useful. Setup this repo to be linked to from other repos:

sudo npm link

Then in the other repo link to this repo:

npm link @stencila/style

When you have finished making the changes you need in this repo, commit with a feat or fix commit so that a new version gets published on NPM:

git add .
git commit -m 'fix:....'

Wait for the CI build to finish and the new version to be published (click the NPM badge above), then reinstall @stencila/style in the other repo so that the link is broken and the new version added to your package.json:

npm install --save @stencila/style

Please use conventional changelog style commit messages e.g. docs(readme): fixed spelling mistake. semantic-release is enabled to automate version management: minor version releases are done if any feat(...) commits are pushed, patch version releases are done if any fix(...) commits are pushed. See the specifications for full details.

Package builds and Storybook generation are done on Travis CI. Releases are made to NPM and Github Releases.