Certify Design System
Welcome to the certify.SBA.gov design system. Here you will find guidance on components used in the certify.SBV.gov application. These components are built with the U.S. Web Design Standards. The design system was heavily influenced by design.cms.gov
The design system is created to be used simultaneously with legacy systems. For instance, you may still use components and features that are built with the U.S. Web Design Standards and existing Certify components. The goal is to get all defined platform components into the design system. Once those items are properly incorporated, their legacy versions may be removed as well as any corresponding code. This is expected to happen gradually.
Naming conventions
The certify.SBA.gov design system uses a strict naming convention. This helps identify what is part of the design system, what role it plays, and what it pertains to.
sba-
u-
item--modifier
Every part of the design system must be name-spaced with sba-, prefixed with its role, and a BEM syntax convention.
| Prefix | Description |
|---|---|
l- |
Indicates layout, generally for building the grid. |
c- |
Indicates a component. Components are built specific to the needs of certify.SBA.gov |
u- |
Indicates a utility. Utilities pertain to CSS properties. |
js- |
Hooks into javascript functionality. MUST NOT be used as CSS selector. |
These prefixes can sometimes be followed by a "breakpoint prefix".
About using the design system
The design system provides a large amount of flexibility for prototype and development for production. At the moment, the design system is constructed in Jekyll, but will eventually be packaged as a gem and a node module.
Contributing
At the moment, and while the core is still undergoing an initial buildout, the design system is to centrally owned. Please tag any GitHub issues with jaredcunha-usds.