README
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.