Earlier in the year Morpht was hard at work on the new GovCMS8 UI-Kit Starter theme. That work has come to fruition and has now been released as open source. The theme will come installed with the upcoming GovCMS8 distro.
The GovCMS team is currently working on the new release of GovCMS, GovCMS8, an open source content management system based on Drupal 8. The Digital Transformation Agency (DTA) has also been developing the Design System, a set of components for use on Federal government websites designed for accessibility and consistency. The Ui-Kit project is the DTA's implementation of the Design System This new Design System is an excellent match for a platform such as GovCMS as it provides a common style guide which can be reused across builds on the platform.
Morpht was engaged by GovCMS in June 2018 to build the GovCMS8 UI-Kit Starter theme, an implementation of the Design System inside Drupal. Morpht was engaged for its technical abilities as well as to integrate some of the editor tools it has pioneered for build flexible pages with no developer intervention.
At the start of the project Morpht surveyed many of the best-of-breed Federal Government sites for emerging best practices. We were on the lookout for components and approaches which were being used and could be generalized for other sites. In particular we focussed on sites which had already adopted UI-Kit in some form. We looked closely at the following sites;
The Health Campaign sites were the most influential as they best represented a common type of site which may by hosted on GovCMS. The main driver here was allowing editors to easily apply colors for mood, tone and branding. The ability to build out pages in "layers" was also a common pattern.
From these sites we collected a number of components which were used to augment what has been produced in the Design System. We identified the following:
- common view modes such as teasers and cards,
- layout options for lists of content on landing pages
- approaches to backgrounds and edge-to-edge designs
- ability to brand sites in sympathy with the primary color.
These components then formed the basis of what was implemented into the GovCMS Starter theme. A number of new modules were added:
- Entity Class Formatter allows editors to select classes to be applied to content, pulling in styles.
- Entity Reference Display allows editors to customise the view mode content will be displayed as - very handy for node lists on landing pages.
- Modifiers allows editors to alter the presentation of content through the addition of backgrounds and the like.
These modules allowed a recipe which was very strongly oriented around:
- paragraphs
- layouts
- view modes
- classes
- modifiers.
The end result is a theme which implements UI-Kit, provides a strong foundation for building pages whilst making very few commitments to custom design hard-wired into them.
You can download the code from here.
