Rivet-SPHB

Like the IU Rivet Design System, 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:

<link rel="stylesheet" href="https://unpkg.com/@sphweb/[email protected]/css/sph.css">

Client-side code

Copy and paste the script tags below into your document right before the closing </body> tag:

<script src="https://unpkg.com/@sphweb/[email protected]/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 and built-in HTML5 validation.