/Rivet-components

Lightweight set of assets for specific components (HTML, CSS, JS) adapted from IU's Rivet Design System. Use to install up-to-date branding and other Rivet-based components in already exising applications.

Primary LanguageNunjucksBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

Rivet components for IUL

Lightweight set of assets for specific components (HTML, CSS, JS) adapted from IU's Rivet Design System. Use to install up-to-date branding and other Rivet-based components in already exising applications.

DIST directory

  • Updated to Rivet v.2.6
  • Use "dist" components for plug-n-play HTML (more components will be added as needed)
  • Add relevant "css" file to your application's "head". This CSS uses a "rvt" prefix on classes and is designed so that it will NOT override any other application components.
  • Add Rivet javascript to your code (usually just before the closing "body" tag). Be sure to include 'Rivet.init' as shown.
  <script src="local/path/to/javascript/rivet-header.min.js"></script>
  <script>Rivet.init();</script>

In most cases do not use Rivet-provided CDN URLs for CSS & JS. This will risk collision with other elements in your application.

For an interactive view of seperate components, see https://rivet.iu.edu/components/
Fonts
  • UPDATE: each stylesheet includes IU spec fonts

CSS

Examples of build details using NPM 'rivet-source' SASS

NPM package at https://www.npmjs.com/package/rivet-core

// header.css compiled from  
@use 'header-system';  
@use 'grid';
@use 'disclosure';    
@use 'dropdown';  

// footer.css compiled from
@use 'footer-system';   
@use 'grid';   

// card.css compiled from
@use 'card';
@use 'grid';

JS

Examples of build details using NPM 'rivet-source' JS

Download and NPM install https://github.com/indiana-university/rivet-source

// header-rivet.min.js
import Disclosure from './components/disclosure'
import Dropdown from './components/dropdown'

// sidenav-rivet.min.js     
import Disclosure from './components/disclosure'    
import Dropdown from './components/dropdown'    
import Sidenav from './components/sidenav'

PROD directory

Dist components (e.g., header, footer) with prepopulated links and content to be used as "universal" branding components across IUL websites.

SRC directory