Citizens Advice Design System
||Key packages for cads, DOES NOT include the components.|
||Typography packages that are key to stying text.|
||Form packages that are fundamental to form styling|
||A package to allow rich content to utilise cads type styling|
Using your package manager of choice...
$ npm install @citizensadvice/cads
Then bring into your stylesheets with...
You can make use of the unpkg service, try adding the link below to the head of your
<link src="https://unpkg.com/@citizensadvice/cads@latest/build/cads.css" />
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.
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
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.
||Groups other packages together||
||Some configuration or scaffolding||
||A single resposiblity package||
||An isolated package||