CSS Framework 1.0.2
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
| Style | Description | Class |
|---|---|---|
| XXL Headline | GT Ultra Median - Light - 56px/1.2 | |
| XL Headline | GT Ultra Median - Light - 46px/1.2 | |
| L Headline | GT Ultra Median - Light - 36px/1.2 | |
| M Headline | GT Ultra Median - Light - 28px/1.2 | |
| S Headline | GT Ultra Median - Light - 22px/1.2 | |
| XS Headline | GT Ultra Median - Light - 16px/1.2 | |
| Style | Description | Class |
|---|---|---|
| XXL Headline | GT Ultra Median - Light - 42px/1.2 | |
| XL Headline | GT Ultra Median - Light - 30px/1.2 | |
| L Headline | GT Ultra Median - Light - 28px/1.2 | |
| M Headline | GT Ultra Median - Light - 24px/1.2 | |
| S Headline | GT Ultra Median - Light - 20px/1.2 | |
| XS Headline | GT Ultra Median - Light - 16px/1.2 | |
Body Text
| Style | Description | Class |
|---|---|---|
| L Body | System UI - Regular - 22px/1.1 | |
| M Body | System UI - Regular - 16px/1.5 | |
| M Semibold | System UI - Semibold - 16px/1.5 | |
| M Uppercase | System UI - Regular - 16px/1.1 | |
| S Body | System UI - Regular - 14px/1.5 | |
| S Semibold | System UI - Semibold - 14px/1.5 | |
| S Uppercase | System UI - Regular - 14px/1.2 | |
| XS body | System UI - Regular - 13px/1.2 | |
| XS Semibold | System UI - Semibold - 13px/1.2 | |
| XS Uppercase | System UI - Regular - 13px/1.2 | |
| Style | Description | Class |
|---|---|---|
| L Body | System UI - Regular - 20px/24px | |
| M Body | System UI - Regular - 16px/1.5 | |
| M Semibold | System UI - Semibold - 16px/1.5 | |
| M Uppercase | System UI - Regular - 16px/1.1 | |
| S Body | System UI - Regular - 14px/1.5 | |
| S Semibold | System UI - Semibold - 14px/1.5 | |
| S Uppercase | System UI - Regular - 14px/1.2 | |
| XS body | System UI - Regular - 13px/1.2 | |
| XS Semibold | System UI - Semibold - 13px/1.2 | |
| XS Uppercase | System UI - Regular - 13px/1.2 | |
Link Text
| Style | Description | Class |
|---|---|---|
| L Link | System UI - Regular - 22px/1.1 | |
| M Link | System UI - Regular - 16px/1.5 | |
| M Link Semibold | System UI - Regular - 16px/1.5 | |
| M Uppercase Link | System UI - Regular - 16px/1.1 | |
| S Link | System UI - Regular - 14px/1.5 | |
| S Link Semibold | System UI - Semibold - 14px/1.5 | |
| S Uppercase Link | System UI - Regular - 14px/1.2 | |
| XS Link | System UI - Regular - 13px/1.2 | |
| XS Link Semibold | System UI - Semibold - 13px/1.2 | |
| XS Uppercase Link | System UI - Regular - 13px/1.2 | |
| Style | Description | Class |
|---|---|---|
| L Link | System UI - Regular - 20px/24px | |
| M Link | System UI - Regular - 16px/1.5 | |
| M Link Semibold | System UI - Regular - 16px/1.5 | |
| M Uppercase Link | System UI - Regular - 16px/1.1 | |
| S Link | System UI - Regular - 14px/1.5 | |
| S Link Semibold | System UI - Semibold - 14px/1.5 | |
| S Uppercase Link | System UI - Regular - 14px/1.2 | |
| XS Link | System UI - Regular - 13px/1.2 | |
| XS Link Semibold | System UI - Semibold - 13px/1.2 | |
| XS Uppercase Link | System UI - Regular - 13px/1.2 | |