Components
The Rivet components are a well-documented set of HTML, CSS, and JavaScript assets.
Stay up to date
Join the email list to get updates on releases, new features, examples, and how-to guides.
Get started
The Rivet components documentation contains examples, code snippets, and guidance on UX best-practices. There are several ways you can use Rivet in your project. The following instructions will help you get started.
Download Rivet
You can download a ZIP file that contains the compiled and minified CSS and JavaScript, images, and a starter HTML file.
Download RivetDownload contents
The download contains the following files:
- Compiled CSS (expanded and minified versions)
- Compiled JavaScript (expanded and minified versions)
- Sass source files
- Starter
index.htmlfile
css/
|—— rivet.css
|—— rivet.min.css
js/
|—— rivet.js
|—— rivet.min.js
sass/
|—— components/
|—— core/
|—— libs/
|—— utilities/
|—— rivet.scss
index.html
Axure UI and Wireframe kit
We've created an Axure wireframe kit with accurate representations of all the Rivet components. Download the Axure kit to help you create prototypes that will translate to Rivet components.
Download Axure kitNPM dependency
Rivet is also available to include in as a dependency in your app via NPM. These instructions assume that you are already using NPM in your project. If not, you can read these instructions on the NPM website about how to start.
Installing via NPM
Once you have a package.json file configured in the root of your project, you can run the following command to install Rivet.
npm install rivet-uits@1.1.0 --save-dev
Updating the Rivet NPM package
When there is a new version of Rivet released it will be publish to the NPM registry. You can check for updates by running the npm outdated command. To actually update your NPM dependency you can run the following command at the same level as your project’s package.json.
npm install rivet-uits@<version> --save-dev
In this example <version> would be the new version of Rivet you want to install.
Hosted CSS and JavaScript
The quickest way to get started with Rivet is using the centrally-hosted CSS and JavaScript files. Copy and paste this <link> element to <head> of your document. Make sure it is placed before any other stylesheets.
<link rel="stylesheet" href="https://assets.uits.iu.edu/css/rivet/1.1.0/rivet.min.css">Rivet has a minimal amount of JavaScript that is required for some components, like the header. Copy and paste this link and add to the end of your document, just before the closing </body> tag.
<script src="https://assets.uits.iu.edu/javascript/rivet/1.1.0/rivet.min.js"></script>Starter template
Here’s a basic starter template with the hosted CSS and JavaScript hooked up. Copy and paste into your favorite editor to start using Rivet.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://assets.uits.iu.edu/css/rivet/1.1.0/rivet.min.css">
<title>Rivet starter file</title>
</head>
<body>
<header class="rvt-header" role="banner">
<a class="rvt-skip-link" href="#main-content">Skip to content</a>
<div class="rvt-header__trident">
<svg class="rvt-header__trident-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 48" aria-describedby="iu-logo" aria-hidden="true">
<title id="iu-logo">Indiana University Logo</title>
<rect width="41" height="48" fill="#900"/>
<polygon points="24.59 12.64 24.59 14.98 26.34 14.98 26.34 27.78 22.84 27.78 22.84 10.9 24.59 10.9 24.59 8.57 16.41 8.57 16.41 10.9 18.16 10.9 18.16 27.78 14.66 27.78 14.66 14.98 16.41 14.98 16.41 12.64 8.22 12.64 8.22 14.98 9.97 14.98 9.97 30.03 12.77 33.02 18.16 33.02 18.16 36.52 16.41 36.52 16.41 39.43 24.59 39.43 24.59 36.52 22.84 36.52 22.84 33.02 28 33.02 31.01 30.03 31.01 14.98 32.78 14.98 32.78 12.64 24.59 12.64" fill="#fff"/>
</svg>
</div>
<span class="rvt-header__title">
<a href="#0">Application Title</a>
</span>
</header>
<main role="main" id="main-content">
<!-- **************************************************************
Start building here!
*************************************************************** -->
</main>
<footer class="rvt-footer m-top-xxl" role="contentinfo">
<div class="rvt-footer__copyright-lockup">
<div class="rvt-footer__trident">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="25" viewBox="0 0 20 25" aria-labelledby="footer-trident" aria-hidden="true">
<title id="footer-trident">IU Trident Logo</title>
<polygon points="13.33 3.32 13.33 5.21 14.76 5.21 14.76 15.64 11.9 15.64 11.9 1.9 13.33 1.9 13.33 0 6.67 0 6.67 1.9 8.09 1.9 8.09 15.64 5.24 15.64 5.24 5.21 6.67 5.21 6.67 3.32 0 3.32 0 5.21 1.43 5.21 1.43 17.47 3.7 19.91 8.09 19.91 8.09 22.76 6.67 22.76 6.67 25.13 13.33 25.13 13.33 22.76 11.9 22.76 11.9 19.91 16.1 19.91 18.56 17.47 18.56 5.21 20 5.21 20 3.32 13.33 3.32" fill="#900"/>
</svg>
</div>
<p><a href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2018 The Trustees of <a href="https://www.iu.edu/">Indiana University</a></p>
</div>
<ul class="rvt-footer__aux-links">
<li class="rvt-footer__aux-item">
<!-- You can learn more about privacy policies and generate one
for your site here:
https://protect.iu.edu/online-safety/tools/privacy-notice/index.html -->
<a href="#">Privacy Policy</a>
</li>
<li class="rvt-footer__aux-item">
<a href="https://accessibility.iu.edu/">Accessibility help</a>
</li>
</ul>
</footer>
<script src="https://assets.uits.iu.edu/javascript/rivet/1.1.0/rivet.min.js"></script>
</body>
</html>
Using Sass
If you are using Sass in your project you can import the Rivet Sass files directly:
@import "./node_modules/rivet-uits/sass/rivet.scss"
Using Rivet with other frameworks
Currently Rivet does not support the use of additional CSS frameworks like Bootstrap, Foundation, etc. If you choose to use one of these frameworks alongside Rivet it is up to you to resolve any conflicts that arise.
On this page
