tfstyleguide

Thinkful Style Guide

The style guide contains common elements (core.less) as well as shared variables and mixins (vars.less) used by Thinkful apps.

Usage

This style guide is available on NPM. In your package.json file, add this:

dependencies: {
  ...
  'tfstyleguide': '^v6.1.0'

To use the styleguide, you need two imports into your own LESS files. In your entry-point (the file that references all your other LESS files), add this line at the top. core.less includes a CSS reset and default typography & input styles. It should not be imported more than once, or the styles will be duplicated.

import "../../node_modules/tfstyleguide/core";

In most of your other files, you will want to start with this line. You can import vars.less more than once:

import "../../node_modules/tfstyleguide/vars";

This will let you use the styleguide's media queries, color variables, and mixins in your app's LESS files.

Updating

To keep the styleguide up-to-date, run npm update tfstyleguide before your asset-building scripts like gulp. This will download and install the latest version.

Long-term-support (LTS) version

Occasionally we release a version of the style guide for sites that do not use LESS. The current version is available at:

https://tf-assets-prod.s3.amazonaws.com/styleguide_lts/styleguide_4.0.9_LTS.min.css

Updating LTS file:

Update your local LESS and run

lessc core.less > release/styleguide_vN.N.N_LTS.css
lessc -x core.less > release/styleguide_vN.N.N_LTS.min.css

Then upload those to S3 under the folder styleguide_lts

Demo

https://www.thinkful.com/styleguide-demo

Copyright 2018 Thinkful Inc.