How to code with Thumbprint.

Thumbprint provides code in a number of technologies. React and SCSS components, design tokens, mixins, atomic CSS, and custom SCSS are all available as tools to build UIs. But knowing what to use and when to use them isn’t always clear, especially to those new to Thumbprint. We’ve put together this guide to help make those decisions.

React projects

Here’s the order of Thumbprint technologies to try when building React projects.

  1. React components
  2. Atomic CSS
  3. Tokens in JS and Sass
  4. Custom Sass/CSS

1. React

First check if a Thumbprint React component is available for your needs. A component may also already exist in your project.

2. Atomic CSS

If your layout requires tweaks not available in the React component, look to our Atomic library for the classes you need. This is a large collection of responsive classes to help build a UI without needing to write custom CSS. It’s especially helpful for adding color, spacing, borders, and constructing common flexbox layouts.

3. Tokens

There will be layouts where using Atomic is too cumbersome or incomplete. In these cases Thumbprint Tokens can be used to retain visual consistency. You’ll be using the same variables used in Thumbprint React and Sass components and the Atomic library. Available as JS and SCSS variables, you can be confident that any future updates to token values will be applied to your code.

4. Custom Sass/CSS

Lastly, there are the occasional layouts where values must be hardcoded. For instance, if an image needs to be absolutely positioned in a unique way. In these situations it’s okay to use hardcoded values. But leave a comment explaining why so code reviewers and future developers will understand.

Non-React projects

If you cannot use React but want to include Thumbprint styling, for example, integrations with third party tools or HTML prototyping, we have a CSS-only option. Contact us on Slack and we’ll determine how best to help.