Table of Content

CSS Framework 0.8.1

A CSS framework for developing Riverty web experiences.

This package ships as one CSS file that bundles and makes use of the Riverty design tokens. In other words, there is no need to install @riverty/design-tokens separately when using the CSS framework.

The CSS framework provides web font definitions and font files. This means you will self-host the fonts by default for maximum performance. The @riverty/fonts package is used behind the scenes, and you don’t need to install that manually either.

Installation

Before moving further, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

Installing using NPM

Run in your project or website root directory.

npm install --save-dev @riverty/css-framework

Usage

Usage instructions will be updated to cater for different types of build tool.

After incorporating the CSS Framework package into your application, simply paste the provided stylesheet <link> tag into the <head> section of your app, making sure it comes after all other stylesheets.

Import CSS Framework

You can import or copy riverty.css as needed in you styling workflow.

// Adjust path relative to your source file
@import "../node_modules/@riverty/css-framework/lib/riverty.css";

Example

<!-- Apply CSS framework styles where appropriate -->
<h2 class="r-type-headline-m">Check out. Log in. Chill out.</h2>

Some build tools, like Webpack, allow you to reference packages in node_modules easily:

@import "~@riverty/css-framework/lib/riverty.css";

Some build tools allow you to reference package names directly:

@import "@riverty/css-framework/lib/riverty.css";

Utilities

Below there is a set of pre-defined and reusable classes that can be applied directly to elements. These utility classes are designed to help developers quickly apply consistent styling and behavior to UI components without having to write custom CSS for every instance.


Typography utilities

Riverty’s CSS Framework provides text styles for consistent application of the brand typeface. The text styles include CSS properties such as font-size, font-weight, line-height and font family.

Headlines

DesktopMobile
StyleDescriptionClass
XXL HeadlineGT Ultra Median - Light - 56px/1.2
XL HeadlineGT Ultra Median - Light - 46px/1.2
L HeadlineGT Ultra Median - Light - 36px/1.2
M HeadlineGT Ultra Median - Light - 28px/1.2
S HeadlineGT Ultra Median - Light - 22px/1.2
XS HeadlineGT Ultra Median - Light - 16px/1.2
StyleDescriptionClass
XXL HeadlineGT Ultra Median - Light - 42px/1.2
XL HeadlineGT Ultra Median - Light - 30px/1.2
L HeadlineGT Ultra Median - Light - 28px/1.2
M HeadlineGT Ultra Median - Light - 24px/1.2
S HeadlineGT Ultra Median - Light - 20px/1.2
XS HeadlineGT Ultra Median - Light - 16px/1.2

Body Text

DesktopMobile
StyleDescriptionClass
L BodySystem UI - Regular - 22px/1.1
M BodySystem UI - Regular - 16px/1.5
M SemiboldSystem UI - Semibold - 16px/1.5
M UppercaseSystem UI - Regular - 16px/1.1
S BodySystem UI - Regular - 14px/1.5
S SemiboldSystem UI - Semibold - 14px/1.5
S UppercaseSystem UI - Regular - 14px/1.2
XS bodySystem UI - Regular - 13px/1.2
XS SemiboldSystem UI - Semibold - 13px/1.2
XS UppercaseSystem UI - Regular - 13px/1.2
StyleDescriptionClass
L BodySystem UI - Regular - 20px/24px
M BodySystem UI - Regular - 16px/1.5
M SemiboldSystem UI - Semibold - 16px/1.5
M UppercaseSystem UI - Regular - 16px/1.1
S BodySystem UI - Regular - 14px/1.5
S SemiboldSystem UI - Semibold - 14px/1.5
S UppercaseSystem UI - Regular - 14px/1.2
XS bodySystem UI - Regular - 13px/1.2
XS SemiboldSystem UI - Semibold - 13px/1.2
XS UppercaseSystem UI - Regular - 13px/1.2
DesktopMobile
StyleDescriptionClass
L LinkSystem UI - Regular - 22px/1.1
M LinkSystem UI - Regular - 16px/1.5
M Link SemiboldSystem UI - Regular - 16px/1.5
M Uppercase LinkSystem UI - Regular - 16px/1.1
S LinkSystem UI - Regular - 14px/1.5
S Link SemiboldSystem UI - Semibold - 14px/1.5
S Uppercase LinkSystem UI - Regular - 14px/1.2
XS LinkSystem UI - Regular - 13px/1.2
XS Link SemiboldSystem UI - Semibold - 13px/1.2
XS Uppercase LinkSystem UI - Regular - 13px/1.2
StyleDescriptionClass
L LinkSystem UI - Regular - 20px/24px
M LinkSystem UI - Regular - 16px/1.5
M Link SemiboldSystem UI - Regular - 16px/1.5
M Uppercase LinkSystem UI - Regular - 16px/1.1
S LinkSystem UI - Regular - 14px/1.5
S Link SemiboldSystem UI - Semibold - 14px/1.5
S Uppercase LinkSystem UI - Regular - 14px/1.2
XS LinkSystem UI - Regular - 13px/1.2
XS Link SemiboldSystem UI - Semibold - 13px/1.2
XS Uppercase LinkSystem UI - Regular - 13px/1.2