Additive styling with Crayons

In this post, we are going to take a look at the CSS utilities feature provided by the Crayons Component Library from Freshworks. The CSS utilities is a bunch of CSS rules, especially class definitions, that are simplified for the developers to consume at ease with an intuitive and easy to remember, naming conventions. The most common example we can relate to, would be Tailwind CSS.

Before diving into the main topic, let's have a brief introduction about the various technologies and tools surrounding the CSS utility class ecosystem.

Utility Classes

In the front-end toolkit, CSS is a vital part, but it's increasingly becoming hard to manage, especially in large projects. The style definitions you write in your CSS files are usually written in a global scope, which is narrowed through complex selectors. And since this is an inherently problematic approach, we are faced with a lot of issues like specificity, redundancy, bloat, and maintenance can become a nightmare.

And then came Atomic CSS.

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function
-- John Polacek on CSS Tricks

The term Atomic CSS itself applies to the architectural philosophy, not any one particular variation like static or programmatic approach.

Utilities are simple HTML classes typically scoped to a single CSS property, like border-style or background-color. They can be used additively to style an HTML element from scratch or to override a style defined in component CSS. They are the static approach of an architectural philosophy referred by Atomic CSS.

They allow designers and developers to build and test new designs and components without abstracting their work into traditional semantic names or altering production CSS.

They also make it possible to create element-specific overrides without writing high-specificity variants into component CSS.

Crayons

Freshworks Crayons is a library of UI components that are the building blocks to help create an intuitive and uniform user interface for all your apps. Crayons helps developers build apps that adhere to the UX standards set by the Freshworks Design System. The utility classes provided by Crayons will help you to style your HTML elements inside your Marketplace apps for Freshworks products.

Installation

The CSS Utils library is available as a standalone CSS file, which you can include in your projects by simply using a link tag through a CDN like unpkg.com. No need for installing any npm packages and build or compilation required to use it.

<link
  rel="stylesheet"
  href="https://unpkg.com/@freshworks/crayons@v3/css/crayons-min.css"
/>

Usage

The below is a simple example of the utility classes provided by Crayons.

<article class="fw-mx-16">
    <div class="fw-card-1 fw-p-20 fw-flex fw-flex-column" style="width: 200px">
      <section>
      <div class="fw-flex fw-flex-row">
        <p class="fw-flex-grow fw-type-h7 fw-mb-0">Booking ID</p>
        <span class="fw-type-xs"><fw-icon name="arrow-right"></fw-icon></span>
      </div>
      <a href="#">
        <span class="fw-type-h6 fw-color-azure-800">#1237483</span>
      </a>
      </section>

      <section class="fw-mt-20">
        <p class="fw-type-h7 fw-mb-0">Hotel</p>
        <a href="#">
          <span class="fw-type-h6 fw-mt-4 fw-color-azure-800">Leela Palace</span>
        </a>
      </section>

      <section class="fw-mt-20">
        <p class="fw-type-h7 fw-mb-0">Customer Name</p>
        <a href="#">
          <span class="fw-type-h6 fw-mt-4 fw-color-azure-800">David</span>
        </a>
      </section>
    </div>
  </article>

You can see the example in action in Codepen:

Conventions

The Crayons CSS utils follows a standard convention for the class names. All the class names are prefixed with fw- which is a shorthand notation for Freshworks. Apart from this it follows a simple pattern for the class names like p for padding, m for margin and so on. It is something similar to other css utility libraries like Tailwind, Tachyons and the others.

Comparison with Tailwind

This is a short comparison between the Crayons CSS utils class names and Tailwind.

Closing thoughts

The Team behind Crayons have put in great effort for the v3 release of Crayons by adding more components, bringing in CSS utility classes, standardizing documentation and many more improvements overall for the library. Please do try out the new v3 components and let the team know for any issues or feedback.

The Crayons is an open-source library, so anyone can contribute to the library. The source code is located in Github. The team has started doing Community Hours sessions from last month so that the developers and the outside world can get in touch with team to clarify any queries and provide feedback. You can find the session recording of the last Community Hours here.

References

• Utility First
• Let’s Define Exactly What Atomic CSS is
• Crayons
• Freshworks Developer Community