/rivet-stickers

Illustration library for Indiana University's Rivet Design System

Primary LanguageJavaScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

Rivet Stickers

Stickers for Indiana University's Rivet Design System.

Contents

  1. Usage
  2. HTML API
  3. Request a new sticker

Usage

Development

This approach is recommended for development, prototyping, or restrictive production environments.

Link to:

  • The Rivet Sticker Element styles (./dist/rivet-sticker-element.css)
  • The bundle containing all the stickers (./dist/rivet-stickers.js)

These files can be linked from a service like UNPKG.

<!doctype html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="https://unpkg.com/rivet-stickers/dist/rivet-sticker-element.css">
		<script type="module" src="https://unpkg.com/rivet-stickers/dist/rivet-stickers.js"></script>
	</head>
	<body>
		<rvt-sticker name="tulip"></rvt-sticker>
	</body>
</html>

Production

For production, install the npm package.

npm install --save rivet-stickers

Create a custom module which imports only the stickers needed. The sticker module name (such as ./dist/tulip.js) matches its corresponding SVG file name (such as ./src/stickers/tulip.svg).

// ./src/stickers.js
import 'rivet-stickers/dist/tulip.js';
import 'rivet-stickers/dist/t-shirt-iu.js';

Link to:

  • The Rivet Sticker Element styles (./dist/rivet-sticker-element.css)
  • The custom module (for example, ./src/stickers.js)
<!doctype html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="./node_modules/rivet-stickers/dist/rivet-sticker-element.css">
		<script type="module" src="./src/stickers.js"></script>
	</head>
	<body>
		<rvt-sticker name="tulip"></rvt-sticker>
		<rvt-sticker name="t-shirt-iu"></rvt-sticker>
	</body>
</html>

Accessibility

By default, stickers are considered decorative images and hidden from screen reader users.

Ask this question to test if alternative text is needed: "Would this content still make sense to sighted users if the sticker was removed?" If no, then add alternative text using the Rivet class rvt-sr-only. For example:

<rvt-sticker name="t-shirt-iu"></rvt-sticker>
<span class="rvt-sr-only">T-shirt printed with Indiana University logo</span>

Testing

Download or clone this repo, then install dependencies.

npm install

Start the server to launch the local test environment.

npm run start

HTML API

name attribute

Use the name attribute to declare the sticker to be rendered. The name of a sticker matches its corresponding SVG file name (./src/stickers/*.svg).

<rvt-sticker name="tulip"></rvt-sticker>
<rvt-sticker name="t-shirt-iu"></rvt-sticker>

size attribute

Use the size attribute to select the size of the sticker.

<rvt-sticker name="tulip" size="lg"></rvt-sticker>

Size options:

  • xs (48px square)
  • sm (64px square)
  • md (80px square, default)
  • lg (96px square)
  • xl (128px square)

theme attribute

Use the theme attribute to select a color theme. Sticker shapes are filled with white, outlined in a dark color, and centered on a circular background with a complementary light color.

<rvt-sticker name="tulip" theme="crimson"></rvt-sticker>

Theme options:

  • black (default)
  • blue
  • crimson
  • gold
  • green
  • orange
  • purple

Request a new sticker

Submit a Rivet support request to request a new sticker.