Developers

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.

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

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

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.

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.

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.

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.

In some cases, like an experiment or a permanent one-off variation, you may want to change the appearance or behavior of Thumbprint component in an unsupported way. In this case you should avoid altering the Thumbprint SCSS or React components in your project and instead create a custom component. This is because future changes to the Thumbprint component could break altered instances.

All released and unreleased changes to our React, SCSS, and Atomic packages are tracked in their respective CHANGELOG.md files and is the best resource to determine the current status of the package.

Unreleased changes are often published to npm within a day or two of merging into their packages.

In most cases Design Systems team will update the package in our primary website, thumbtack.com, within a day or two of being published to npm. We handle this task because there are often migrations of varying complexity that we have the best context on. However, on occasion we may ask developers to do the update if the package’s changes are closely tied to a project they are working on.