npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rivet-stickers

v0.2.0

Published

Stickers for Indiana University's Rivet Design System

Downloads

50

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

levimcglevimcg

Keywords

Readme

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.