Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

trussle-style

Package Overview
Dependencies
Maintainers
8
Versions
55
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

trussle-style

Frontend elements for Trussle sites

latest
npmnpm
Version
10.6.1
Version published
Weekly downloads
179
17800%
Maintainers
8
Weekly downloads
 
Created
Source

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

Style

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.

FAQs

Package last updated on 12 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts