Citizens Advice Design System

Name	Type	Version
@citizensadvice/cads	Meta

Dependencies

Name	Description
@citizensadvice/core	Key packages for cads, DOES NOT include the components.
@citizensadvice/typography	Typography packages that are key to stying text.
@citizensadvice/forms	Form packages that are fundamental to form styling
@citizensadvice/rich-content	A package to allow rich content to utilise cads type styling

Installation

Using your package manager of choice...

$ npm install @citizensadvice/cads

Then bring into your stylesheets with...

@import "@citizensadvice/cads/index.scss";

OR

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/cads@latest/build/cads.css" />

Introduction

This is a meta package that contains all packages within the Citizens Advice Design System.

From the perspective of a developer building a product/service using the Citizens Advice Design System, you'll need to understand that we split our code into two concepts.

Utilities

Utilties provide the building blocks for common layout and styling, to avoid writing custom classes. They adhere to the "Single Responsibility Principle" theory that states that every module, class or function should have one responsibility and that the responsibility should be entirely encapsulated by the class.

utilities
├── background-colors
├── background-position
├── background-size
├── border-colors
├── border-radius
├── border-style
├── border-width
├── borders
├── box-sizing
├── cursor
├── display
├── flexbox
├── floats
├── focus
├── font-family
├── font-size
├── font-style
├── font-weight
├── gutters
├── heights
├── hovers
├── letter-spacing
├── line-height
├── line-limit
├── margins
├── outlines
├── overflow
├── padding
├── positioning
├── text-align
├── text-colors
├── text-decoration
├── widths
└── z-index

Components

These can be either:

• made of a series of utility classes,
• or a custom class that encapsulates the component properties.

components
├── buttons
├── links
├── lists
├── rich-content
├── radios-checkboxes
├── selects
├── text-inputs
├── typesetting
└── validation

Design system maintenance

If you're a developer maintaining the Design System repo then there are a few things worth noting.

All packages are seperated out to make it easier to create smaller CSS bundle sizes when releasing code into a production environment. To make it easier on developers we have a few different types of package to help with making the decision of where to put new code.

Package type	Description	Examples
Meta	Groups other packages together	forms, core, etc
Foundation	Some configuration or scaffolding	support, normalize
Utility	A single resposiblity package	box-sizing, padding, etc
Module	An isolated package	buttons, selects, etc