Getting the most out of the UI-Kit

Project objectives

Toby from GovCMS opened the session, discussing the objectives of GovCMS8 and the starter theme. The project objectives were:

• To provide a much easier experience for first-time Drupal users

• To reduce the time to a MVP

• To allow agencies to build GovCMS sites without skills in Java Script or Cascading Style Sheets

They wanted agencies to be able to go in and set something up that looks like their site on day 1, without having to worry about more technical stuff. The UI-Kit starter is a base theme and it’s extendable. It can be forked and altered, and is a place where agencies can start.

Project discovery

At this point Murray from Morpht took over and explained how the solution was built, starting with key influencers. For their base, they looked at the DTA’s Design System and expanded on this using best practice from other government websites. The Design System contains lots of components ranging from very simple HTML elements to more complex items like menus and accordions. One of the benefits of the UI-Kit and the Design System is the use of colour and the palette system. They also looked at some Department of Health campaign sites, which were more graphical in nature. This set of campaign sites was influential in terms of the use of full width designs, background images, cards, teasers, etc. For structural elements like headers, footers and search, they used the DTA site, Beta Health and immunisation handbook as reference points.

Approach

The goal was to create a theme that would support site builders and editors without limiting them. The concept uses layers, with the GovCMS code underneath, then a set of code called configuration, and then the theme on top of that.

The theme contains style components that agencies can use to build their pages. It uses page layouts, view modes, fields, and modifiers, steering clear of content types (content types are already in GovCMS). The focus was on a pure configuration plus theme model.

To supplement the UI-Kit Starter theme, they also built a style guide, using KSS node. The style guide showcases various templates and how they work across all colour combinations.

There’s also a test page in the starter kit, which shows the various components (e.g. view modes, teasers, stacks, stack details, etc.).

Users can also put in different background colours and can do other modifiers like putting in background images.

Murray emphasised that the starter theme was a tool made by site builders but designed for editors. The goal is to give editors control.

The GovCMS8 distribution also included three new modules:

1. Entity reference display - module that allows editors to select view mode and display list of items with view mode. E.g. Want these three nodes displayed as a stack.

2. Entity class formatter - editors can select classes for the content.

3. Modifiers module - plugin system for theme layer e.g. ‘add padding’ modifier - great way to extend functionality. Gives editors freedom to create a more visual site.

In terms of page layouts, editors can select a range of layouts to display, such as edge-to-edge, stacked, sidebar right (2:1), two columns (1:1) and so on.

Page building demo

Next Murray ran a three-minute demo. He took the audience through some of the steps involved in building a sample page:

1. Create standard page

2. Select the layout (he chose edge-to-edge)

3. Put in a title (administrative title)

4. Type in a heading (displayed on page)

5. Type in the body content

6. Add a link for ‘Read more’

7. Select a colour palette (e.g. dark)

8. Select a style - e.g. hero

9. Select a modifier if desired (in this case, he added a background image)

10. Select the layout (in this case thirds)

11. Add in nodes

The demo showed how quickly you can get a page up on the site.

Extending and forking

Agencies can extend the theme by implementing specific layouts, modifiers, paragraphs, view modes and expose styles. In reality, often people will fork the theme then apply common customisations like colours, typography, etc. It is designed as a starter, after all.

The future

There are new components being added and some components are being changed. The theme is really young and it’s a work in progress. At the moment, they’re working on cards and tables.

Murray also mentioned the Layout Builder in Drupal Core. The project started in June 2018 and Layout Builder wasn’t ready. They used paragraphs because they're popular and well known but in the future may switch to Layout Builder given it’s gaining traction. Then paragraphs may be implemented as blocks.

To close the session Toby from GovCMS said a few more words. He summarised some of the features of the GovCMS8 UI-Kit starter theme:

• Implements the Design System
• Is modular and flexible
• Is designed to be useful
• Is a starting point

Toby said the starter theme is an important project because it means people can build sites quickly and don't need GitHub library or forklift. The project has met all the project objectives.

Toby also highlighted how they tested the theme by building beta.govcms.gov.au with it, a site that was successfully built by someone who wasn’t a site builder.

Toby was really impressed with the starter theme, especially given the out-of-the-box experience is crucial to bringing Drupal developers to GovCMS. GovCMS knew agency pain points existed around the effort to build sites and themes, so the starter theme is a sensible investment.

Questions

How will you be advertising this/getting it out to the designers who may not know this exists?

Toby: We know that GovCMS and Drupal 8 have been a long time coming. It’s now available. We’re starting to build sites on it now. We’ve just migrated 100+ sites to the new platform and now we need to market this better...and we will get to it. Contact us if you’d like to use it and expect to hear more from us in the coming weeks.

I’ve used the theme before it. Love it. It delivers power and flexibility, and you don’t have to get into the backend. You’ve done a fantastic job.

Toby: Thanks. The theme fulfils two purposes - restraint and freedom. Can take as a base to help you box engagements.

Good product. How is it synced with the Design System?

Toby: We need to work closely moving forward. As new items hit the Design System we need to look at how we can incorporate those. Gives you a foundation that we want to grow and design with the Design System.

How easy is it to give back to GovCMS?

Toby: We’re trying to do much of this work externally and then give that back. The work Morpht did [on the starter kit] is public. The current Salsa work is public. We welcome anyone putting ideas forward and we want to be more receptive to that. We can definitely be more open to contributions with GovCMS8 than GovCMS7.

On the Design System and keeping up with them, what about the other way? Feeding back info to the Design System?

Murray and Toby were both at the Design System meet up and want to be active participants in the Design System. If you’re writing a React app you’ve got everything, but if you’re building a Drupal site you need something in between and we’re that something in between.

Is it on Drupal.org? Is it vetted from a security point of view?

Toby: The starter kit sits on Drupal.org. The default install of GovCMS8 includes the theme and it’s been through the security package. If agencies want to push it further, really happy to talk about that and see what we can do.

How scared are you of having a whole heap of websites that all look the same?

Toby: As a prolific user of government websites I don’t think that’s a bad thing. I don’t want a clone library but I want similar features and functions on them. From a taxpayer perspective, I also think it’s terrifying the amount of money we spend to make websites look flashy. I don’t think we’ll get a whole army of look-alike websites, rather they’ll just have some similar features. Obviously people can abandon this and go for a bespoke artisan choice...and that does fit for some agencies. But the starter theme is also good for changes and puts control back in the agency’s hands. Changes can be more easily implemented so you can do it yourself instead of waiting for resources or an external vendor to make changes.