GovCMS8 UI-Kit Starter Theme

The GovCMS8 UI-Kit Starter theme ships with GovCMS8 distribution and is enabled when new sites are spun up. It has been designed to implement the Design System and to provide editors with a flexible system to build attractive pages.

The Client

GovCMS is the team behind the GovCMS8 distribution and platform. An approach was made to market to deliver the new theme. Morpht was selected to deliver the project.

The Challenge

The GovCMS8 UI-Kit Theme needed to fulfill a number of goals:

  • Implement the Design System, the DTA's style guide for federal agencies.
  • Provide flexible content editing tools for constructing attractive pages
  • Avoid hardcoding styles which would not translate across new sites
  • Provide a set of patterns which could be extended upon.

The Approach

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 generalised for other sites. In particular we focussed on sites which had already adoped 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 colours 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
  • approches to backgrounds and edge to edge designs
  • ability to brand sites in sympathy with the primary colour.

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 editrs 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 comitments to custom design hardwired into the them.

The Outcome

The theme was released was released in September 2018.

Morpht has gone on the extend the base theme with JumpStarter, a feature packed platform which incorporates more best practice patterns.

The projects and code are available here.