Using Atomic

Atomic CSS leans on small, tersely named, single-purpose classes that are combined in the HTML to build up UIs. This approach can speed development time, reduce complexity, and increase consistency by limiting, and in some cases eliminating, the need to author new CSS.

If you’re unfamiliar with Atomic CSS here are a few resources.

The list of classes in Thumbprint Atomic are based primarily on Tachyons, easily the most popular of the Atomic libraries, with some syntax changes.

Classes that have no space between the letters and numbers reference a scale that grows exponentially. Our spacing units go from 4px, 8px, 16px and so on and is used by the margin and padding classes. Note that different concepts use different scales.

Classes where a dash separates the letter and number reference literal values.

Nearly all classes have variations that will apply styling at breakpoints. These classes are prefixed with s_, m_, and l_. In the this example a different padding-bottom value is applied at each breakpoint.

…
<div class="pb2 s_pb3 m_pb4 l_pb5">…</div>

For backwards compatibility with previous utility classes and to ensure that the Atomic class takes precedence in the CSS, every declaration includes the !important rule.

Thumbprint Atomic classes are available to all React and Twig pages on thumbtack.com.

Atomic is included in Layout.jsx which means all React pages will include Atomic classes by default. The recommended usage is to contain the classes in the JSX by using the Atomic classes directly, or as variables, and write any custom CSS not covered by Atomic classes in a Sass file.

CSS Modules

Do not add Atomic classes using the composes functionality that’s available in CSS Modules. Due to the specificity and the built-in responsiveness of Atomic classes, unexpected behavior can result.

JSX

<div className={`${styles.card} pb6 pt7 bg-gray-200 l_pt3`}>…</div>

Sass

This CSS is not included in our current Atomic library. Custom Sass must be written.

.card {
    box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);

    @include tp-respond-above($tp-breakpoint__large) {
        min-height: 300px;
    }
}

Atomic is included on every page using the legacy-angular-global-harness. Classes should be used in the HTML similar to the approach above: use Atomic classes wherever possible and add a custom class when needed.

HTML

…
<div class="card pb6 pt7 bg-gray-200 l_pt3">…</div>

Sass

As with the previous Sass example above, since this CSS is not included in our current Atomic library, custom Sass must be written.

.card {
    box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);

    @include tp-respond-above($tp-breakpoint__large) {
        min-height: 300px;
    }
}

We occasionally get requests to add new classes to the Atomic library. In an effort to balance the library’s completeness with its bundle size, we’ve adopted the approach that there should be at least 10 instances of a property in Thumbtack's website codebase before we add it to Atomic.

If the Atomic class you’d like is not available please write the custom CSS in your Sass file as shown the usage examples above. You can can also open an issue if you would like us to consider adding it.

Although Atomic can significantly reduce the amount of CSS you write it won’t cover every use case. At times you’ll have to use other approaches.