4teamwork: OneGov Plone theme

The package plonetheme.onegov contains a modern, generic, and responsive Plone theme we’ve been developing for the past 10 months. We are primarily using it for websites with additional OneGov modules installed. However, the theme is generic enough to work with standard Plone sites, too.

The OneGov theme is not just another Plone theme as it has some neat concepts. In this blog entry, I’d like to present the major technical features of this new theme.

What is OneGov?

OneGov.ch, founded in 2012, is a Swiss association of several software companies and customers who have the common goal of promoting open source solutions in Switzerland. Currently, the major part of the software written is for Plone and is deployed in numerous governmental organizations. The association coordinates the further development of the OneGov Box which consists of different Plone modules (so called OneGov modules) developed and maintained by its respective members. The motto of the association is “Develop once, apply multiple times!”.

Further information regarding OneGov modules is available at onegov.ch (alas, German only).

Key features

The main features of the OneGov theme are as follows:

• configurable The design has been developed with the goal of making selected parameters (e.g. color, fonts, logo) easily configurable.

The design works out of the box but can be configured individually for different customers. Screenshots of actual sites are available further down in this article.

Configurations can be saved and loaded using the Plone control panel.

• easy navigation To reach a particular page as quickly as possible, the global navigation can be expanded by hovering over it, and the target page can be navigated to without the need for any intermediate clicks.

• responsive design In order to display information in the best possible way for mobile devices like smartphones or tablets, the theme automatically adapts to the current display size. Furthermore, on devices with small displays the default navigation is automatically replaced by a specialized navigation for mobile devices (http://www.github.com/4teamwork/ftw.mobilenavigation).

• slideshow (carousel) Along with the new theme comes a cool product called ftw.slider which makes it possible to create slideshows with images and text.

Tech facts

The theme is using Diazo, and style definitions are defined using SCSS.

The different styles are defined in separate SCCS files and are converted to CSS on the fly using PyScss. Thus, CSS can be parametrized by the site administrator in the Plone control panel – PyScss will do the rest, no CSS knowledge required! This setup makes it possible to make different aspects of the design easily configurable.

The function that generates the CSS first loads defaults for the various global variables, then replaces them with customized values where necessary, and finally loads the style definitions.

After that, the CSS will be generated from SCSS using PyScss:

1234567891011121314151617181920

defgenerate_css(self):css=Scss()scss_input=['@option style:compressed;']# add variablesscss_input.append(self.read_file('variables.scss'))# add overwritten variablesscss_input.append(self.get_options().encode('utf8'))# add component filesregistry=getUtility(ISCSSRegistry)forpathinregistry.get_files(self.context,self.request):withopen(path,'r')asfile_:scss_input.append(file_.read())# add overwritten component files# for now its not possible to add custom stylesstyles=css.compile('\n'.join(scss_input))styles=replace_custom_keywords(styles,self.context)returnstyles

Responsive Design

Basically, the theme is set up in a way which will make it automatically adapt to different display widths.

It consists of four different breakpoints represented by different media queries. The theme will behave as follows:

• display width > 1200px
  Normal page width of the theme is used, no adjustments are made.

• display width < 1200px
  Maximal page width is set to 96 percent and the page gets an additional padding of 2 percent to the left and right.

• display width < 979px (tablet landscape)
  The right column (containing portlets) is displayed below the content area (middle column).
  

• display width < 769px (tablet and smartphone)
  The left column containing the navigation portlet is replaced with a mobile navigation using ftw.mobilenavigation

Responsive Design pattern for tablets

Screenshots

Example OneGov.ch

Example www.zg.ch

Customized subsite “Menzingen” and active flyout navigation

Customstyles form

Flyout navigation

Slideshow (ftw.slider)

OneGov theme in action

Check it out for yourself:

• Association OneGov.ch
• Canton of Zug (http://www.zg.ch)

Feedback welcome! Please let me know when you use this theme for your sites.