Rivet

Rivet is the modern pluggable platform-agnostic design system from Indiana University that can be dropped-into any web project. It comes with a Figma UI kit and a rich set of original iconography.

The Rivet theme for Drupal is an implementation and adaptation of the Rivet Design System for Drupal 10+. A conscious effort is made to style as many Drupal features as faithfully as possible to the original system, for all-encompassing consistency on the UX, design, and code levels. This theme is intended to be used alongside many core Drupal features, tooling, and best practices, including Configuration Management, Rich text editing with CKEditor5, Blocks, Views, and Site Search to satisfy the 80% use case of most higher-education department, unit, and institution websites. When coupled with Drupal's modular code architecture, swapping in powerful add-on features like ElasticSearch or Solr, SAML/Single Sign-On, is a breeze. It has a companion module IU Paragraphs that implements many of the useful components from Rivet using Drupal Paragraphs for complex page layouts. The long-term roadmap will potentially introduce a Drupal Recipe to provide Rivet components as Block types for use with Drupal CMS and Experience Builder.

Code features include:

• StarterKit generated; StarterKit ready
  Drupal 10 StarterKit themes are a new way to get your site up-and-running with a "fork" of the upstream theme. Don't worry, if this is not for you, you can still sub-theme Rivet — it works fine as a base theme.
• Vanilla Javascript & minimal dependencies
  No jQuery required! The Rivet JS library assets are included from CDN per best practice, but also included in node packages for ease of extending styles from design tokens and maintaining parity with upstream.
• SCSS
  Rivet itself leverages the SASS (dart-sass) npm package.

Requirements

There are no special requirements outside of Drupal core.

Installation

Install as you would normally install a contributed Drupal theme. For further
information, see Installing Drupal Themes.

Configuration

1. To test the theme, you may visit /admin/appearance and select "Enable and set as default".
2. Alternatively, you may wish to create a sub-theme for your project by creating a theme and setting base theme: rivet in your sub-theme's info.yml file.

Updating

The Rivet Base Theme was created for Drupal 10 using the new starterkit theme generation. The theme will be maintained up-to-date with Drupal core's starterkit_theme theme according to the documentation for Tracking upstream changes.

Maintainers

Credits

This theme uses Sass variables and mixins from the Rivet Design System (BSD-3-Clause License) to compile Rivet-compatible custom CSS components, but does not redistribute Rivet code. Rivet's core CSS and JS assets are pulled directly from CDN into all rendered website pages.