/design-system

Primary LanguageJavaScriptOtherNOASSERTION

CMS Design System Build Status

The design system is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design Standards and extends it to support additional CSS and React components, utility classes, and a grid framework to allow teams to quickly prototype and build accessible, responsive, production-ready websites.

Packages

You're currently at the root of a monorepo which contains multiple NPM packages in the packages/ directory. The following packages located in the packages directory of this repo. View the README.md in each of these for additional details.

Name Description
Core The core CSS and React components for the design system. Includes the Support package.
@cmsgov/design-system-core
Layout A responsive flexbox grid framework.
@cmsgov/design-system-layout
Support Sass variables, mixins, and functions. Included in the Core package.
@cmsgov/design-system-support

Internal packages

These packages are project dependencies, mostly focused around the design system's developer tooling and documentation.

Name Description
Documentation site This directory contains code related to the documentation website. Unless you're a contributor, this directory isn't that interesting to you.
ESLint config The ESLint rules we use to lint the design system's JS and React components
@cmsgov/eslint-config-design-system
Stylelint config The Stylelint rules we use to lint the design system's Sass
@cmsgov/stylelint-config-design-system
Yeoman generator A Yeoman generator used in the development process. Again, unless you're a contributor, this directory isn't that interesting to you.

Examples

Examples of the design system in use can be found in the examples directory.

Contributing

Please read the CONTRIBUTING.md document to learn about setting up a local development environment, contributing to the design system, and our coding guidelines.