Home

CSS Framework 1.1.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";