Welcome
Hey there everyone how's it going? Thanks a lot for coming along to this presentation. It's entitled “Getting the most from GovCMS8 and the GovCMS 8 UI-Kit Starter theme.”
This presentation will be given by two people. Toby Bellwood from GovCMS will be book ending the presentation doing the intro and the conclusion and I'll be talking about basically showing you the theme and how you can get the most from it.
For the presentation this is roughly what we're going to be covering:
- Some conceptual issues around the requirements and the approach
- a demo of what the theme looks like out of the box and
- a very quick demonstration of how you can build a page
- a look at how you, as themers, will be able to use that either the theme or extending
I'll hand over to Toby to kick off.
Introduction
[Toby]
What we wanted from Drupal 8 and from GovCMS a was a much easier experience for novice or first-time site builders. JavaScript HTML CSS, they're not as big and scary as they seem but they're still pretty big and scary - if all you are used to doing is creating fields and changing content types.
So in order to massively reduce this time to an MVP something that we see in government quite a bit is “How do I get started? Where do i? What do I build? what do I do?” We'll go through workshops - it'll be a long time before you executives see your day one site.
What we think we can do is do better and certainly looking at the Umami demo theme in Drupal 8 being able to provide someone with something that looks like their website on day one. They can feel like they've achieved. You, as a site builder can put something together that's got your photos your logo your name and bears some semblance of a government website. That was massively important and to be able to do that without having to worry about gulping or yarning or any of that stuff. Being able to do that from a site it's something that we saw as being critical.
If you look carefully at GovCMS 7 you'll see that the amount of sites that use the default GovCMS theme is about zero. No judgment on the current theme, but your first step towards building a GovCMS site is either to build your own theme or to use someone else's we support that.
We looked at having this as a place to get started. We'll always talk about iterative website development. You shouldn't build a site drop it and then walk away for four years. Do exactly the same process. What we love is seeing agencies that go for beta. They release a website. They release new functionality constantly and consistently and keep iterating and growing that website. That's what this is.
We went to market with what I thought were really simple requirements and looking through the very different results that came back the one from Morpht really stood apart in that they understood what we were looking for and weren't afraid to tell me that we should have looked for something slightly different. They really helped channel us towards a clarity of thinking that I think has produced something pretty impressive.
So I'm going to hand back to Murray. He's gonna show you everything that they've done all the good stuff give you all the demos then I'll waltz in at the end and take some of the credit.
[Murray]
Approach
When we were awarded this job back in June of this year we were naturally excited but there was also a degree of trepidation we really wanted to do a great job on this project. We knew we had to have a rock-solid theme that was following best practices but we also wanted to give editors a set of tools that would allow them to build out sites from the get-go.
The Australian Design System
Most of you would be familiar with the Design System but for those of you who aren't the Design System is a set of components that have been worked on by the Digital Transformation Agency. These components are recommended ways of building and constructing sites for government agencies. So it was a given that we had to implement the Design System.
But the Design System only went so far and there are several blanks and gaps that needed to be filled in. We therefore refer to other government sites that were out there that were considered best practice and so in the building of this theme we've we've looked at the Design System but we've all they looked at what other government sites are doing out there.
So this (the KSS styleguide shipped with the theme) is the Design System... It's not all of the components. If you want to check it out and I thoroughly recommend that you do we should go to the Design System. These components range from very simple things such as basic HTML elements all the way through to more complex things such as menus and accordions.
One of the really strong features of UI Kit or the Design System is the color palette that it uses. It has this concept of an “alt” color, which is grey and then “dark” colors which are basically the primary color that you're going to use for the theme. So this use of color is a really strong component in how the Design
System works.
Other reference sites
That was the Design System but we also looked at a number of other sites… The Department of Health had released a “campaigns” website and I think Danny will be talking about this tomorrow. I recommend you check out his talk about it.
With the campaign websites there are a number of sub sites or micro sites that were more graphical in nature. If you have a look at the elements that are on these sites you can see they have like these full width designs colors for branding, for background images, parallax images, uses of cards and teasers and grids and these things. These are like site building tools that you would want editors to be able to use to build these sites out. This set of campaign sites were very influential upon us
The other important thing to note with these sites is that they do use UI kit underneath as well. It was a great way to see how you can have the style guide underneath and then the branding over the top and the great thing is that they're using content to tell the story. This is a pattern that we wanted to capture with the Starter Theme.
That said, there's also a number of structural elements that we had to think about. Things such as headers, footers, search, logos and menus. How did all those things work? At the start of this project those things weren't really defined either so we looked at some of the other sites that we're out there such as the DTA site, the beta health website is another great example and also there's the Immunisation Handbook.
All of these sites were used as references and were educational for us as to how we were to approach the project. So that's the background. We've surveyed the field and know what we're targeting for but then we had to work out how are we going to implement it.
Site builders and Editors
One of the concepts we were thinking about is that the theme really should be supporting site builders and editors. It shouldn't necessarily be defining very strict things so we did not want to straitjacket future sites. We really wanted them to be free to build what they wanted to build.
For us to provide a set of components that were underneath them all so this is not just a minimal implementation of UI Kit. We could have done that and indeed if you go into the theme and have a look in the templates there's a UI Kit folder there with lots of tweak templates implementing UI kit and the Design System in a very pure way. We have that covered but there are also a number of other components to try to bring that stuff up to the world of the editor.
Foundations
As you know Drupal is composed of many things. You have contents, configuration and the theme. What we are doing here is basically combining the theme with the config. So in order to have a successful project we came up with its concept of “Foundations”. So if you have a looking GovCMS8 you'll see there's a “Foundations” module there. It has things such as layouts, modifiers and field definitions as well as the content types.
So you can think of GovCMS as like the code underneath. There's a set of configuration called the foundations and then we have the theme that's actually going down and implementing many aspects in those foundations. We're really trying to take a component driven world here view of the world we're not trying to style up individual pages. Indeed we're avoiding putting in very specific selectors which would not be appropriate and limit the use of the site in the future.
Having a look at this in a more conceptual way, the Starter Theme is concerned with all the things down the left... These are the horizontal things that I like to talk about things such as the
- layouts,
- the view modes,
- a small set of paragraphs for the components,
- modifiers,
- a certain number of fields there which are standard across content types,
- the Design System
- and Drupaly things.
The things we were steering clear of were things such as the content types. They're in there in GovCMS from the get-go but they have a very simple theming we really want to leave that up to you. They're the implementors to work out. Firstly what content types you want and what they're going to look like? We were steering clear of getting too detailed in that. The same applies to things such as views and specific pages. We really did not want to implement any of those.
We're really taking a pure configuration plus theme approach.
Demos
Homepage Demo
That's enough talking you guys have got a background or quickly flick over and we'll have a look at a short video of what the what the theme looks like when we start up so this is like gov CMS out-of-the-box when you install it.
You can see that we're having this layered layer cake design you can see parallax images they're different sections which implemented as paragraphs you can see through here example a node list rendered out in columns. So there are a lot of site building or editor tools here.
KSS Node Demo
We've also used KSS node to build out a style guide. KSS Node can go in and render out HTML and apply the theme to it. You can see here in this style guide you can see where we're giving the accordion a bit of a run for its money. You can see these different colors that are coming through the “alt”, “dark” and the “dark alt.” Here we're just showcasing here the various twig templates underneath and how they work. The most important thing here really is that we're showing that this works across all color combinations.
So this is a really strong foundation where editors can mix and match the colors they want to use and they know that the components are going to work reliably. This style guide ships with the theme itself.
Test Page Demo
One of the other things we did was we had a test web page. This is some default content that's created when the site spins up where we are taking through the various components of run through… Here showing off the different view modes: teasers and teaser smalls, what we call stacks these are these ones
in stack detail.
So all of these components of what we were seeing on the campaign's website and the DTA website.
We also have the calendar items for events (which is one that Toby wanted to put in)...
You can see we have background colors here that can be selected by the editors and that's drilling straight into the Design System colors…
Here we have some paragraphs showing off the colors and then we're going to move into other modifiers where we're putting background images in and doing other effects such as adding colors… finally we're finishing off with some typography and then the accordion.
That's that's a test page and we really built this out because we wanted to demonstrate that we have consistent view modes we have consistent grids and colors.
Looking at the content types these are all there these have not changed since earlier
versions of GovCMS we've really taken a minimal approach with these guys and leaving
that up to you to implement.
So that's a very very quick three-minute run-through of what the GovCMS 8 Ui-Kit Starter Theme looks like.
Using the tools
We're going to move on to how you as site builders, developers and themers are able to provide some of these tools to in the sites that you're going to be building out. We've really taken the approach and it's my firm belief that the role of the site builder really should be providing tools to the editors rather than crystallizing little snowflake designs down in the theme. We are always looking at how can we abstract that so that the editors can control some of these things.
I’m going to run through a few modules that are in the distro so you can see how they're actually working.
Entity Reference Display
The first one here is Entity Reference Display. This is a module which allows editors to select a view mode and display a list of items with that view mode. For example I could be an editor in a node list paragraph and say “hey I want these three nodes and I want them all to be displayed as stacks”. This is just a simple way to get those nice landing page things working.
If you guys want to implement your own view modes that can easily just plug into this system and you'll bring bubbling those view modes up so that the editors select them. Obviously the view modes are important - they should be implemented consistently across all content types. Once you've done that you can create lists of things and they're going to render out nicely. so if you look at the configuration in the theme quite a lot of work has gone into actually implementing those view modes across each content type.
Entity Class Formatter
There's another module called the Entity Class Formatter and this allows editors to select a “class” and drop that onto an entity. So for example here with the color palette that's picking up on styles straight out of the Design System. These are the colors that have been defined in the Design System and this is allowing editors to basically drop that on as a background.
Paragraph Components
Paragraphs are key to this paradigm that we're working with here. It's great to for editors to mix and match the components and put them on the page as they wish. We held ourselves back and implemented a minimal set of paragraphs. We didn't want to go too crazy.
You can see we've got the accordions which are shipped with the Design System we have a Content paragraph that's very simple and the item and node list they're really sort of very good for building out these lists of items that you be putting on landing pages and whatnot.
Modifiers
There is another module called Modifiers. The Modifiers module implements a plug-in system. One of the great things about modifiers is that these plugins can be discovered in the theme layer so if you have the desire to implement your own you can do that in GovCMS SaaS. You can implement your modifier drop it into your theme and that will be just bubbled up to the editor. This is a great way for you to be able to extend the functionality.
We've put in a few modifiers here it's a relatively simple things like handling different backgrounds and things like. It's bringing the presentational (eye candy) to the site and allowing the editors to tell the story that they want.
Layouts
Layouts are obviously super important in Drupal 8. We made the decision to use Panelizer with this build and that was for one prime reason and that was it allowed editors to select which layout they wanted on a per node basis. So for example here you can see the editor has picked an edge-to-edge layout where there's no container and basically the content can go edge to edge but you could also pick some other layouts.
These layouts are available. However, you don't have to use Panelizer. You can back Panelizer out and use other methods.
Of course layouts are discoverable in the theme layer as well so if you want to implement your
own layouts you guys can do that in the SaaS environment.
Page building demo
We're going to go into a page building demo now a quick three
minute demo… [walkthrough has been edited out].
Extend or fork
We have a theme. What do we do with it? Do we extend it or do we fork it? There are many
ways where you can use this theme without doing a single line of CSS.
You can implement your own layouts.
You can implement your own modifiers.
You can implement your own paragraphs.
However, I think in reality people probably are going to want to fork this theme a lot of the time. The main reason for that is that the theme is based on SaaS variables and if you go to the Design System and have a look at the getting started section they will show you how to edit some of these variables for things such as color and typography and spacing. Now of course once you've done that you have to rebuild your CSS and those colors are like deeply ingrained in the CSS so I think the reality is that people will be forking the Starter Theme.
The future
The UI Kit is always progressing okay it's always moving forward new components are being added. The starter theme over time will be developing and incorporating all of these new and shiny features that get included into the Design System.
The theme is relatively young and there has been some additional testing that's gone on with that and that there will be some minor changes being made in the near future to improve certain aspects of it. So it is a work in progress.
Finally, I really must make a note about the layout builder. When we started this project it was back in June 2018, at that point layout builder was not really ready for prime time use. We made the decision after a lot of consideration to use Paragraphs as the paradigm. Paragraphs is very popular and well-known so we have used that paragraphs.
Then Panelizer… I can see in the future that layout be able to ill become more mature will gain traction and maybe even today you could start building sites with it. But that's probably something that will be looked at in the future if that happens some of those paragraphs we've made maybe they would need to be implemented as custom blocks so there's a small change there.
That concludes my part of the presentation I'll now like a hand over to Toby.
Conclusion
[Toby]
From my point of view what Murray and the team came up we've met all of our goals. The idea that someone like me could build a site out of a box relatively simply, could make those changes, could change blues to greens and greens to reds and change the image and make this bigger and that smaller… without having to go into the CSS and the JavaScript was really important.
The implementation of the Design System: it's important from our agency's point of view obviously people are looking to GovCMS to get as much adherence to digital and the design standard as possible, so Design Systems a bit of a no-brainer. Obviously some agencies will want to do things differently but for us Design System is a sensible choice.
I think the couple of brief demonstrations Murray's given it shows how modular and flexible it is being able to make a lot of those changes as a site builder. You don't need github access you don't need to fork or clone the theme you can go in you can make a page in three minutes that looks acceptable, looks good. It's designed to be useful.
This is a big change over GovCMS 7 and that we actually want some people to build sites using the base theme but it is it's just that starting point. So it's a point from which you can kick off and you can really grow from there so we've already got some sites starting to being built using this base theme one of them is our site. I think it would be a fairly bad move talk about how great this base theme is and then not use it ourselves.
So we've built the ability of GovCMS today. You saw it which coincidentally is the first Drupal 8 site on GovCMS SaaS it was built in-house by someone who is essentially a first-time site builder. I'm not going to embarrass you Dean but you've done you've done a great job, a really great job and a lot of the feedback from that has come into will put that back. We'll sit down with Murray and the team and work out did we miss something in the base theme or is this just typical extend fork workflows.
We've also sat down with the team from Salsa and they've done some initial work looking at implementing that theme and using it so we'll start to gather a lot of this feedback as we bring this forwards. We're really impressed with this it meets our goals that out-of-the-box experience I think is crucial. I think it's crucial in bringing the next generation of CMS developers to Drupal - bringing Drupal developers together.
One of the pain points that we see is the amount of work and effort that goes into building and rebuilding sites and themes if we can take some of that away from agencies that need it then this is a win for us and it's a really sensible investment.
