RPF Design System - Core

Markup and styles for the Raspberry Pi Foundation Design System

Design System links:

Usage

npm install --save @raspberrypifoundation/design-system-core

Development

Dependencies:

• asdf (https://asdf-vm.com/)

asdf install

Install packages:

npm i

Run Storybook:

npm run storybook

Testing

Run the tests with npm run test.

If you get an error about Playwright not being installed, you can install it with npx playwright install.

Building

You can build a version of the compiled CSS by running npm run build.

Development and production builds

The CSS is built as part of the CD process, deploying to https://static.raspberrypi.org/styles/design-system-core/branches/**insert branch name here**/design-system-core.css. For example, the main branch will get built at

• https://static.raspberrypi.org/styles/design-system-core/branches/main/design-system-core.css

And tagged releases will get built to versioned URLs of the following form, allowing downstream projects to track individual releases of the design system.

• https://static.raspberrypi.org/styles/design-system-core/releases/vx.y.z/design-system-core.css

Releasing a version

To find the current version, run npm version (manual)

• To update the npm side of things, run npm version x.y.z, where x, y and z is a semantically versioned release number. You can also run npm version patch, for example.
• Create a tag by running git tag v$version - note the tag starts with a v
• Then run git push and the tag will be pushed
• Create a release on GitHub and generate the default release notes
• This will trigger GitHub actions to build and release the new version.
• It will also deploy a built version of the CSS to https://static.raspberrypi.org/styles/design-system-core/releases/**tag**/design-system.css

Docker

To Do