trussle-style

Deprecated

We move the styles tokens to external-components for front end applications. This is no longer maintained, and does not contain the latests design system tokens.

Trussle Style: Elements and Style Guide

This repository contains some fabulous things to make your project super-stylish:

• trussle-style.css: A CSS file with classes that together make up the Trussle front-end style.
• Style Guide: A website that demonstrates each element to show what they're made of.

Using Trussle Style

There are two ways to use Trussle Style: via an NPM package (recommended) or via a CDN.

trussle-style assumes 1rem = 16px. It is advised not to set the font size on the html or body elements, as this will affect font scaling for users that set a different default font size via their browser preferences.

Via an NPM package

The NPM package is the only option for SASS styles and is recommended if you're bundling your own CSS.

npm install trussle-style

SASS styles will then be available to you at ./node_modules/trussle-style/scss. Importing ./node_modules/trussle-style/scss/trussle-style will make all trussle-style variables and mixins available for use.

Note: You will also need to include the typefaces.css file (see below).

Via a CDN

The CDN allows you to get up and running with CSS styles quickly, but doesn't provide any customisation, unlike the NPM package.

As of version 8, each version of Trussle Style is hosted on the CDN at:

https://02.cdn.trussle.com/trussle-style/${packageVersion}/trussle-style.css

By including this file, you get access to all Trussle Style CSS classes globally. (They're prefixed with tsl- to avoid conflicts.)

You will also need typefaces.css, a font loader:

https://02.cdn.trussle.com/trussle-style/${packageVersion}/typefaces.css

Viewing the Style Guide

To view the style guide, clone this repository and then npm start.

Creating New Styles

Enter development mode with npm run watch. This will auto-build any changes to SASS or Pug files.