Pattern Library Overview

Last Updated: December 4, 2018

The pattern library is a comprehensive reference guide containing the technical documentation of our CSS framework, and guidelines for usage and accessibility of each design element within our framework. Although primarily created for developer use, it has also been set up with graphic designers, content creators, stakeholders, and webmasters in mind.

How It's Organized

The pattern library follows Brad Frost's Atomic Design principles for logical, and easy to follow organization of elements by order of increasing complexity:

• Atoms are the most basic building blocks of our websites
• Molecules are built using multiple atoms
• Organisms are built using multiple molecules
• Layouts are the available methods for laying out all pages
• Utilities are custom utility classes that can be added to html tags for additional styling or to override the default styling

How to Use

Each element within this guide contains one or more of the following sections:

Accessibility Considerations

Our goal is to ensure all of our sites are usable by everyone, regardless of device used or individual abilities and/or limitations. This section details special considerations that need to made for accessible devices, such as screen readers, or for users with special needs, such as color blindness, motor control issues, etc.

Use

This section outlines how to use an element and all its available variations. When needed, it will be broken down into examples of good use and bad use.

Recommended 👍

Not Recommended 👎

Code Examples & Variations

This section displays all the available variations of an element and defines how each is coded in html.

External Resources

Provides a bulleted list of articles for further reading related to the specific element.