6.1.4 • Public • Published

Thinkful Style Guide

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


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.


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:

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


Copyright 2018 Thinkful Inc.



Package Sidebar


npm i tfstyleguide

Weekly Downloads





Copyright (c) 2016 Thinkful, Inc.

Unpacked Size

112 kB

Total Files


Last publish


  • 8l4v4
  • ievgenmaj
  • rafaelfragosom
  • wmorganchegg
  • ruyguerra
  • jmutale.chegg
  • elunsford
  • eatthoselemons2
  • smgonzales
  • akinnard_chegg
  • jasonfariachegg
  • thinkful-admin
  • chrisjpowers
  • spschnell
  • katscott
  • mikechegg
  • abaylis
  • tholex
  • benjaminwhite
  • saool
  • ripleyaffect
  • tatianatylosky
  • seanohue
  • mikebranski
  • zoeheins