htwkimn.theme 1.0.10

A responsive Diazo theme for mobile-friendly websites with Plone 4. As child theme, it extends the responsive plonetheme.onegov and aims for easy development with small or fast changing teams - like at the faculty IMN of the University of Applied Sience Leipzig (HTWK), Germany.

htwkimn.theme

This is a responsive Diazo Plone Theme. It’s build on top of the responsive Diazo plonetheme.onegov product and creates beautiful content representations on desktop and mobile devices.

It was created in a masters thesis about mobile-friendly Plone websites, that could be developed and maintained by small and fast changing dev-teams and was initially used at the faculty FIMN - a part of the largest university of applied sciences in East Germany.

Important this package doesn’t work with python 2.6, it requires at least python 2.7

Usage

• Add htwkimn.theme to your buildout configuration:

[instance]
eggs +=
    htwkimn.theme

• Install/Activate the generic import profile via extension setup in your site configuration

• Have a look for the resources/dummy-content folder for some content examples

• Depending on the version you’ll fetch from plonetheme.onegov, you might need to pin six = 1.5.2

Goals and strategy

The theme aims for an easy maintainable way to develop a responsive, mobile-friendly website with small or fast-changing teams. Therefore it’s build as child-theme, that can’t live without but benefits from the continuing development of its parent-theme plonetheme.onegov.

It has less code than an individual theme. So you can get an overview about its source code faster, which makes it easier for new staff to change the look and feel of the resulting website, especially if they are unfamiliar with Plone or Diazo.

To reach that goal, the child-theme extends the parent-theme, adds some Diazo rules to modifiy the parents HTML-structure on the fly and registers some custom SCSS files, to overwrite the original CSS styles.

As you can see, the child brings its own Diazo rules.xml to adapt the Diazo html-template of the parent-theme. Furthermore it brings its own CSS styles to adapt the parents layout as well as its styling.

Features

• Fully responsive design for mobile devices like smartphones or tablets and traditional desktops

• Flexible width, based on a flexible 16-column grid (deco grid) and desktop-first design

• Slider and tile-navigation on home page

• Collapsing SimpleLayout columns in content area

• SCSS based for easy CSS development

• Less code, faster understanding if you’re unfamiliar with Diazo or Plone themes

• Includes features of plonetheme.onegov

• Benefits from fixes and upgrades of plonetheme.onegov but own implementations won’t be overwriten

• SCSS variables for an easy switch to your own corporate design

• Based on Plone 4 best practises

Custom SCSS

@see https://github.com/OneGov/plonetheme.onegov#additional-scss

Utilizes following add-ons for comfort of content editors

• ftw.contentpage

• ftw.contenttemplates

• ftw.contentmenu

• ftw.footer

• ftw.upgrade

• ftw.mobilenavigation

Examples

Live and in action

HTWK faculty FIMN

Desktop

Mobile-Landscape

Copyright

This package is copyright by Lars Kosubek and was developed in his master thesis Webseiten für mobile sowie konventionelle Endgeräte mit dem Content-Management-System Plone, Konzeption und Implementierung eines leicht zu wartenden Themes auf Basis von Diazo und Responsive Webdesign für das CMS einer Fakultät der HTWK-Leipzig.

htwkimn.theme is licensed under GNU General Public License, version 2.

Changelog

1.0.10

• documentation fixed

1.0.9

• version dependencies updated

1.0.8

• workaround to remove “relations_library” navi item of Faculty Staff Directory

1.0.4-1.0.7

• navi css changed

• header link added

• header home-button rule fixed

• doc extended

• dummy content added

1.0.3

• requirement constraints updated

1.0 (release)

• header variants added

• mobilenavigation as dependency added

• docs completed, example images added

• generic setup, ftw.upgrade activation added

• more expressive comments and filenames

0.1dev (unreleased)

• Initial release