You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@cmsgov/design-system

Package Overview
Dependencies
Maintainers
53
Versions
152
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cmsgov/design-system

CMS Design System Sass/CSS and React assets

12.4.1
latest
Source
npmnpm
Version published
Weekly downloads
6.2K
50.82%
Maintainers
53
Weekly downloads
 
Created
Source

This package contains the following design system assets:

  • Base styles
  • Utility classes
  • Sass/CSS and React components
  • Responsive flexbox grid framework
  • Fonts and images
  • Sass mixins and variables

Installation

npm install --save @cmsgov/design-system

Usage

The source files included are written in Sass (.scss). You can add your node_modules directory to your Sass includePaths and import the file like this:

@import '@cmsgov/design-system/dist/scss/index';

or import the transpiled CSS:

@import '@cmsgov/design-system/dist/css/index';

Please view the documentation site for additional information.

Examples

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

Bugs and contributions

Please submit an issue on GitHub for any bugs or feature requests.

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

File Structure

The design system follows a variation of ITCSS (Inverted Triangle architecture for CSS). The goal is to write CSS in specificity order.

└── @cmsgov/design-system/dist
    ├── components/
    │   └── index.js        Compiled JS entry point (CommmonJS)
    ├── css/
    │   ├── index.css       Compiled CSS rules
    │   └── core-theme.css  Core-theme tokens as CSS variables
    ├── scss/
    │   ├── core-theme.scss Sass version of core-theme tokens
    │   ├── *-tokens.scss   Copy of core-theme.scss for backwards compatability
    ├── fonts/
    │   └── *               Fonts referenced by the design system CSS
    ├── images/
    │   └── *               Images referenced by the design system CSS
    ├── {preact,react}-components/
    │   ├── bundle/         Bundled version of JavaScript components
    │   ├── cjs/            CommonJS compiled version of JavaScript components
    │   ├── esm/            ES Modules compiled version of JavaScript components
    │   └── types/          TypeScript definition files for JavaScript components
    └── web-components
        └── bundle/
            ├── all.js      All web components bundled together (standalone file)
            ├── base.js     Base code necessary for loading individual web component bundles
            └── ds-*.js     Individual web component bundles

FAQs

Package last updated on 02 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts