thoughtbot design system (tbds)

A design system for thoughtbot websites.

Purpose

The purpose of the thoughtbot design system is to…

• Learn about design systems so that we establish our skillset in the space and provide services to our clients.
• Support our internal and external websites and set a minimum standard of design, accessibility, maintainability, and quality.

Applications using tbds

• Hub
• thoughtbot.com
• thoughtbot search
• tbot
• Vellum

Installation for Ruby on Rails

tbds is available through npm and requires Rails 5.1+. Yarn is used to support Heroku deployment.

1. Make sure you have the Yarn package manager installed: https://yarnpkg.com/en/docs/install

2. Install the design system package and save it as a dependency:

   yarn add @thoughtbot/design-system

3. Import the system in your Sass manifest:

   @import "@thoughtbot/design-system/src/index";

Alternatively, you can assign an alias to the package for more terse usage:

1. Install the design system package with an alias

   yarn add tbds@npm:@thoughtbot/design-system

2. Import the system using the alias

   @import "tbds/src/index";

To import assets using the Rails asset pipeline:

1. Add node_modules to the asset path.

   # assets.rb
   Rails.application.config.assets.paths << Rails.root.join('node_modules')

2. Use the assets in *.rb and *.erb.

   image_tag "@thoughtbot/design-system/src/logo/horizontal.svg", title: "thoughtbot"

Deploy Ruby on Rails app with tbds to Heroku

1. Add webpacker to your Gemfile and install:

   gem "webpacker", require: false

   bundle install

2. Add the Node.js Buildpack to your Heroku app.

   Note: You'll need to order the buildpacks to have Node.js first, followed by Ruby.

Compiled CSS

Each version of tbds (starting with v0.7.0) is available as a minified CSS file through the unpkg CDN. While this method is not recommended for production usage, it can be useful for adding tbds as an external stylesheet to CodePen’s or static sites to quickly prototype ideas.

https://unpkg.com/@thoughtbot/[email protected]/dist/tbds.css

Browser support

tbds supports:

• Latest versions of Chrome, Firefox, and Safari
• Edge 15+

License

thoughtbot/design-system is Copyright (c) 2020 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

thoughtbot/design-system is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.