Rivet

Indiana University's open-source system, built so hundreds of separately-run university sites can share one accessible, recognizable foundation.

Why we like it

Rivet is a good argument for restraint. It's plain HTML, CSS and JavaScript with no framework dependency, kept deliberately lean, and distributed by both CDN and npm, so a unit on React, Rails, PHP or static HTML can all share the same accessible base.

The origin story is refreshingly clear: IU evaluated Bootstrap and turned it down because it wasn't built for their experience, didn't document good UX patterns and didn't meet the university's accessibility policy out of the box. Accessibility is the reason Rivet exists, and issues get fixed as they're found, which is why Stark features it among the better accessibility-focused systems.

Where it fits

Rivet fits large, federated organizations, a university's many independently-run departments and apps, that need one accessible, on-brand foundation but can't standardize on a single framework. Its community footprint is small and university-first, so it's a model to learn from as much as a dependency.

Ideas to borrow

  1. 01.

    Architecture

    Ship the foundation as framework-agnostic HTML, CSS and JS (CDN and npm), so heterogeneous teams share one accessible base without being forced onto a framework.

  2. 02.

    Documentation

    Write down why you built your own instead of taking an off-the-shelf kit; the decision doubles as governance rationale and sets accessibility as the system's reason to exist.

Screenshots

Fig. 1Rivet's page layout gallery, each template shown as a desktop and mobile wireframe pair, tagged for applications, sites, or any context.
Fig. 2Billboard usage guidance as paired Do and Don't columns, each item naming the specific modifier class that applies.
Fig. 3Rivet's tutorials index: three guided walkthroughs covering a first page, building a component from utilities, and handling component events.

Further reading

Related