Introduction
It was created so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences.
It consists of 3 main assets:
- 1.
- 3.
CivicTheme is a true design system, based on atomic design principles.
UI kit is a Figma file that provides a visual representation of components and templates. It follows the same versions as the Component Library and Drupal theme.
Atomic design is breaking common website components into a finite set of elements such as:
- Atoms - these are the smallest building blocks on a site. They are usually the basic HTML elements such as Buttons, Links, Tables, Labels, Checkboxes and Text fields. Breaking these down any smaller will make them non-functional.
- Molecules - these can consist of a simple grouping of atoms to form slightly bigger and common UI reusable components such as Accordions, Attachments, Calls to Action (CTAs or Callouts), and Tables of Contents.
- Organisms - These are slightly more complex groupings of molecules that form even bigger (and common) components on a site. They mostly form distinct sections of the site. Examples are Alerts, Back to Top, Banner, Footer, Header, List, Navigation and Sliders.
Each of these elements plays a key role in the hierarchy of the interface design system.
The components have been built and assessed to comply with WCAG accessibility standards 2.1 AA out-of-the-box.
The theme contains all necessary configurations and code to connect the CMS data with the components.
Last modified 26d ago