Velcro

A CSS and web component library providing the design system for ARUP R&I.

Using Velcro in a project

Install

npm install @arup-ri/velcro

CSS

Import the stylesheet once in your project's entry point:

import '@arup-ri/velcro/dist/velcro.css';

Or via a <link> tag:

<link rel="stylesheet" href="node_modules/@arup-ri/velcro/dist/velcro.css">

Icons

Import the icon web component once to register <velcro-icon> globally:

import '@arup-ri/velcro/icons';

Then use it anywhere in your HTML or templates:

<velcro-icon name="check" size="20px" color="var(--green-100)"></velcro-icon>

See ICONS.md for the full list of available icons and attributes.

Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

npm install

Run Storybook

npm run storybook

Opens at http://localhost:6006. Storybook runs a full build first so the CSS and icon assets are up to date before the dev server starts.

Build

npm run build

Copies icons from bootstrap-icons into dist/icons/ and compiles css/index.css into dist/velcro.css.

Build Storybook (static)

npm run build-storybook

Outputs a static Storybook site to storybook-static/.

Publishing

The package is published to npm under @arup-ri/velcro. Bump the version in package.json before publishing:

npm version patch   # or minor / major
npm publish

Only the dist/ and js/ directories are included in the published package.