open-index/open-npm huggingface dataset:
npm package: @sphweb/rivet-sphb
Description: Indiana University School of Public Health-Bloomington rivet extensions
Latest version: 1.0.10

# Rivet-SPHB
Like the [IU Rivet Design System](https://rivet.iu.edu/), which it builds on and extends, Rivet-SPHB is a design system built with plain HTML, CSS, and JavaScript and adds styles and components that help the Indiana University-Bloomington School of Public Health web group create familiar and accessible experiences across platforms.

## Start using Rivet-SPHB in your project.

### Hosted assets

The quickest way to get started with Rivet-SPHB is to use the CDN-hosted versions of the CSS and JavaScript files.

### CSS
Copy and paste this link into your document after the Rivet stylesheet and before any other stylesheets:

```html
<link rel="stylesheet" href="https://unpkg.com/@sphweb/rivet-sphb@1.0.6/css/sph.css">
```

### Client-side code 
Copy and paste the script tags below into your document right before the closing `</body>` tag:

```html
<script src="https://unpkg.com/@sphweb/rivet-sphb@1.0.6/js/sph.min.js"></script>
<script>Sph.init();</script>
```

## Use with the Web Framework back-end

If you're using the PHP `Page` class from the `iusphb/libraries` Composer package, and the default `LayoutTemplate`, then you're already using Rivet-SPHB! It automatically includes the CSS and Javascript files for you.

If you've written your own custom `LayoutTemplate`, then be sure to include the CSS and JavaScript as described above.

## Learn more

There are a lot of ways Rivet-SPHB can help you. Read the project wiki to learn more about [components](https://github.com/sphweb/rivet-sphb/blob/main/doc/1--Components.md) and [built-in HTML5 validation](https://github.com/sphweb/rivet-sphb/doc/1.1--HTML5-Built%E2%80%90in-Validation.md).