All of the Patterns source is organized into four directories: Elements, Components, Objects, and Utilities. This naming convention is influenced by “BEMIT: Taking the BEM Naming Convention a Step Further.” Our four buckets included Elements, Components, Objects, and Utilities. If you are familiar with Brad Frost’s Atomic Design Methodology, this structure will sound very familiar. All patterns are based on design tokens that define visual properties on a micro scale.

Tokens

Design Tokens are the variables that store visual properties such as color, spacing, typography styling, etc. They are shared from JavaScript to Sass files. They are also passed to the Utility configuration for customization of CSS utilities.

Elements

Elements are the smallest building blocks and include colors, icons, buttons, links, layouts, and more. They can be seen within Components and Utilities. They are often customized default HTML tags (<button>, <table>, <ul>, <a>, etc.). They require smaller amounts of markup and styling to customize.

Components

Components are smaller patterns that require more complex markup and styling than elements. They may appear more than once in a single view. Often, they include multiple elements such as buttons, lists, links, etc.. Component CSS classes are denoted with the .c- prefix.

Objects

Objects are the most complex patterns and require more custom styling, markup, and JavaScript to function. They may only appear once in a single view. They can be global elements (<footer>) or appear only in certain views. Object CSS classes are denoted with the .o- prefix.

Utilities

Utilities are reusable single-attribute styles used to customize markup so that fewer patterns need to be written. They are not tied to any element, component, or object, but they can help override styling in certain contexts and build views more efficiently. It is recommended to use the Tailwindcss Utility Framework for creating utilities based on design tokens, however, it is optional.