Front-end theming with govCMS
Looking at govCMS? Find out what to expect in our primer into the world of Drupal govCMS theming.
Salsa Digital was recently selected to work with Acquia on one of the first public govCMS platform migration from a proprietary CMS for the Civil Aviation Safety Authority (CASA).
The requirement was "simple": migrate "as-is".
So when asked "Hey Alan, do you think you can make the new site on the govCMS platform, look identical to the old site?", I didn’t know what to expect...
I learned very quickly about the benefits in choosing the govCMS profile for Drupal sites - it provides a quick startup platform for government based websites, with pre-defined modules and a base theme to get you going.
As a Drupal front-end enthusiast, I decided to write about the theming side of govCMS, with considerations and constraints of using the platform. (For a look at back-end development considerations with govCMS, check out our back-end blog).
What’s in the box?
With govcms_zen you will get GOVCMS_STARTERKIT which is a folder you can duplicate to begin your sub theme, and govcms_barton, which is an example theme to show how the starter kit could be used to alter a few colours, include a favicon and so on.
zen > govcms_zen > govcms_barton / GOVCMS_STARTERKIT
Sub-theming - choosing the best approach
It’s recommended if you’re building a site for govCMS to use the GOVCMS_STARTERKIT and sub theme from govcms_zen.
If your site’s planned theme closely matches the govcms_zen template, your new theme could just include an additional stylesheet styles.css (along with the parent theme’s govcms_zen govcms_styles.css) to include small overrides. This is the default method used in GOVCMS_STARTERKIT.
govcms_styles.css (govcms_zen theme - the styling core)
styles.css (your theme - for small overrides)
If you find the above situation too restrictive, and you need significant updates to the base theme, it may be a better option to copy the entire govcms_zen SASS folder into your sub theme and compile your own copy. The resulting govcms_styles.css file will override the parent css file and will allow you to alter more of the core structure like base font sizes, base colours, breakpoints and so on. In this case, it may be a good idea to keep your custom style separate from the core styles, just to keep track of changes you’ve introduced.
- govcms_styles.css (govcms_zen theme - the styling core)
- govcms_styles.css (your theme - core alterations)
- styles.css (your theme - custom style)
Choosing the best sub theme approach will depend on what your site’s needs are. As with any sub theming, the closer your site’s style aligns with the base template, the smoother the development will be.
Constraints and considerations
When implementing your first govCMS theme, you may run into a few challenges. Hopefully we can save you some head-banging with a list of the top 3 theme challenges we faced on our first project, and the solutions we came up with:
Acquia Cloud Site Factory
1. Acquia Cloud Site Factory
If your govCMS site is going to be hosted using the Acquia Cloud Site Factory, then the theme is best stored in it’s own separate repository. In this case you would have a repository for the site, and a repository for the theme. Then using a tool such as git subtree, you would merge the theme repository into the site repository for working off local or test servers. When your site goes live into ACSF, then you would only deploy the theme repository.
The Zen theme and Compass don’t always play nicely. When it comes to using Compass, you may find incompatibilities with different versions and Zen (and thus, govcms_zen). There are some suggestions on drupal.org which should help outline what versions you should be running.
If you come across this issue, try creating a Gemfile in your theme directory with the following lines:
source "https://rubygems.org" # Working stack for Zen gem "sass", "3.2.14" gem "compass", "0.12.3" gem "zen-grids" gem "breakpoint" gem "sass-globbing"
This code should remove the placeholder.js file from being loaded by the parent theme.
Where to now?
govCMS is still a new platform, and will continue to evolve and refine over time. What’s applicable today may not even be the case tomorrow, but if you’re getting into govCMS right now, then hopefully this article has given you some insight into what to expect from theming.
Curious about site build or platform features? Check out Kurt’s blog on govCMS.