Comment on page
Introduction
It was created so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences.
It consists of 3 main assets:
- 1.Design theme
- 2.UI kit
- 3.Drupal theme
Design System 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.
https://default.civictheme.io/ - latest stable build. Use "Generated content" menu item to view components in multiple variants.
https://higher-education-university.civictheme.io/ - example of CivicTheme with the higher education industry content
Last modified 2mo ago