Pattern Library Overview
Last Updated: August 23, 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:
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.
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.
Code Examples & Variations
This section displays all the available variations of an element and defines how each is coded in html.
Provides a bulleted list of articles for further reading related to the specific element.