About the govCMS demo
govCMS is a flexible Drupal 7 content Management System (CMS) designed to give a good out of the box experience for Australian Government agencies. It comes bundled with a carefully selected set of contributed modules which provide a solid foundation for building a Drupal site. It also comes with a set of default content types which are a good starting point for many common use cases.
This demo site, put together by the team at Morpht, demonstrates some of the things which can be done with govCMS. We have developed a number of approaches at the theming and layout layers which makes it possible to quickly build consistent, responsive and beautify web pages. Our aim is to provide editors with an intuitive interface which gives them control over the content of the page, as well as many of the design aspects.
As we were building this demo site we were very aware that we should do it the right way. This meant reusing functionality where possible. There is no point in reinventing the wheel, especially when a fair amount of time has gone into crafting that wheel. However, where we needed to extend things we wanted to do it in a sensible way, using the tools which were there, and making sure that we were improving the foundation. The govCMS codebase is intended to be a starting point. In many places it provides the simplest of implementations and all we have done is fleshed it out by making a few assumptions as to what additions would get good reuse.
What we added
After reviewing the codebase and looking at what modules we had available, as well as the approaches which were being taken, we decided to make the following changes.
govCMS comes with a base "govcms_zen" and starter themes which sit on top of it. We decided to fork our demo theme from "govcms_zen". This gives us the most flexibility, allowing us to strip out parts we didn't want and to add new CSS without worrying about CSS overrides. This approach allows the themer much more scope for implementing demanding designs, if required.
The standard page width was the traditional 960px. We boosted this up to 1200px, allowing designs to take up more of the viewport on wider screens. This leads to pages with more impact allowing for bigger imagery and easy support for multiple columns.
Style Guide Driven Development
We are big fans of style guide driven development, where pages are decomposed into components and CSS is written targeting each of those components. This makes it possible to develop static HTML files demonstrating the components using the real life CSS which will be in use on the site. Take a look at the style guide for this site to see what we mean.
One of the things missing from govCMS was the consistent use of view modes across content types. There are view modes for "teaser" and "compact" however the implementation changes according to content types, making it impossible to mix and match content types in a list. We view this functionality as a key component of a solid foundation for an internally consistent site. We decided on a handful of view modes we would implement to get this consistency. We were guided by our experience on other sites as well as the design we saw on the recently redesigned austraia.gov.au site.
Most node types and bean types implements each of these view modes. This makes it possible for editors to select a list of nodes and display them as teasers, safe in the knowledge that they will all be rendered in a consistent way. Our view modes also behave correctly in different breakpoints and regions. For example, you can drop list of node "tiles" into the main content region, a sidebar, the header or footer and they will display properly. Win!
A CMS allows a user to manage content AND how that content is to be displayed. Deciding how content is to be displayed comes down to selecting between different layouts and templates whilst ensuring that sane results will result even when content editors push the system to the limits. When it comes to achieving the second goal, Drupal designers/developers often solve the problem in one way and crystalise the solution in code, making it impossible or difficult for a normal editor to influence the design. We have taken many steps to ensure that the content editor experience is improved by giving them control, flexibility and safety.
We don't like the concept of having different page types when one type would do, eg "landing page", "home page", "standard page". To us, there is just "standard page" with different layouts (edgy and normal). The layout should be selected by the content creator at node create and edit time and it should be possible to switch between layouts if required. If a user decides that they want to upgrade a boring looking T&Cs page into an "edgy" design then it is a simple matter of changing the layout for the page.
Edgy and Normal
We support two basic layouts for each page: normal and edgy. A "normal" page is where the sidebars are in the expected positions and the content is confined to a region in the middle of the page. An Edgy page stacks the sidebars and allows for edge to edge designs allowing background images etc to stretch the full width of the view port. Edgy pages are perfect for high impact designs with background images, colours and parallax images - perfect for the homepage and landing pages.
Every page can support up to three columns out of the box. The final page will adapt to where content has been placed, making it possible to support normal pages with one, two or three columns. Different sites may have more demanding requirements so this could be extended as required.
The Paragraphs module has received a lot of attention of late, mainly due to its ability to inject structured chunks of content into the normal flow of the page. Think of Paragraphs as "widgets" or "chunks" which can be placed in the ain content area or sidebars. These widgets can be anything, including slideshows, galleries, curated nodes, and plain old content.
We have upgraded every contents type to support Paragraphs, making it possible for content creators to add "widgets" to any content page on the site. They can be added to the top and bottom of pages, in the main content and in the sidebars.
There is no limit to the number of Paragraph Types which can be implemented - we are limited by our imaginations, or more importantly by the use case at hand. We have implemented the following widgets which we think could be used for most standard govCMS builds:
- Node list
- Bean list
Paragraphs with Style
All of our Paragraphs can be enhanced with styles applied by editors:
- Custom classes to alter the design
- Background colour
- Background Image
- Background Parallax Image
Combine these powers with an Edgy layout and you have the tools for great looking landing pages with no custom code or theming.
Better node layouts
We have taken the decision to control the Node View with Panels, giving us good control of layouts for Variants based on Content Type AND the layout chosen by the editor. Special pages such as <front> and blog are now handled with nodes. This allows Paragraphs to be added to these pages. This approach gives editors a single interface for managing content - the node edit form. There is no need for editors to grapple with Beans, Panels and Nodes. Things are mush more simple, consistent and powerful with this design. Power to the editors!
Things which have remained the same
We have taken a light touch and have left many things as is. Our aim was not to throw away any of the hard work aleady done on govCMS. Nor was it to build a demo site which targeted a specific use case.
Same content types
All the content types you know and love are still there. They have just been upgraded to support editor selectable layouts and Paragraphs.
The Image and Text Bean remains. It has been renamed to Item, and is used to drive the "Bean List" Paragraph Type. This remains a helpful Bean Type, especially when we need to link to content outside the site or reuse lists of things across multiple pages.
Out of the box govCMS supports a single slider on the homepage. Now you can drop sliders, with slides of your choice, anywhere! We have kept the same code ensuring continuity for accessibility.
This demo site walks a fine line between adding helpful base functionality and avoiding adding unecesary features. As it stands this site should provide a helpful starting point for govCMS projects which require a certain degree of flexibility. It is easy to add and remove extra content types, view modes and layouts as required.
If there is interest in using some of the concepts found within this site we would be happy to develop them further for a Govenment agency or as a "white" label site for reuse on the govCMS platform.