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).
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
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
Customized subsite “Menzingen” and active flyout navigation
OneGov theme in action
Check it out for yourself:
Feedback welcome! Please let me know when you use this theme for your sites.