Grid Theme

Martijn van de Rijdt, 08 Apr 2014

Enketo Smart Paper now has a brand new theme option: The Grid Theme. Click the screenshot below to check out a sample form right away.

Screenshot of WHO Fatal Injury form using Grid Theme

This sample form was developed by Ona for WHO.

Focus on larger screens and printing

Similar to the current default theme, the new Grid Theme is fully functional on mobile devices. However, the Grid Theme is primarily meant for use on larger screens. The larger screen real estate is required to display questions next to each other. The Grid Theme was also designed to create good-looking and compact printouts.

How to use

This theme is currently exclusively available to enketo.org users available for everybody. To use it add the value ‘theme-grid’ on the settings tab of your XLSForm in the ‘style’ column. This will switch your form to the Grid Theme. If you have multiple settings for ‘style’ (e.g. ‘pages’ and ‘theme-grid’) simply separate them with a space.

XLSForm Style Setting

To fully leverage the power of the Grid Theme, you’ll want to indicate which questions should be displayed on one row and how many cells they should occupy. We developed a very flexible and simple-to-use mechanism for this for this using w1, w2, w3….w10 to indicate the relative width of a group or cell. It is best explained by looking at this tutorial form: https://enke.to/::grid. The XLSForm source is available here.

XLSForm Grid markup

The extra w1, w2….w10 markup is placed in the ‘appearance’ column of an XLSForm. If you decide to switch back to the default ‘formhub’ theme just remove ‘theme-grid’. The grid markup will simply be ignored in other themes.

Note that older versions of XLSForm do not support the style column.

Technology

This theme makes use of a cutting edge technology (called ‘flexboxes’) that allows the forms to be rendered flexibly and fast. Speed should improve further over time when this browser technology matures. As a result of living on the edge, only the latest version of the popular browsers are supported (Chrome, Firefox, Internet Explorer, Opera, Safari).

Acknowledgement

The development of this theme was supported by the good folks at the Santa Fe Institute as part of a collaboration between the Santa Fe Institute and Shack/Slum Dwellers International through a grant by the Bill & Melinda Gates Foundation.

Special thanks go to Kumail Hunaid, the author of the wonderful ‘GridForms’ project. Much of his amazing graphic design ideas were used in Enketo’s Grid Theme (not the library itself).

Feedback

As always, we’d love to get your feedback! Comment on this blog, tweet @enketo, or post a message in the Enketo forum. If you discover a bug, please let us know what browser you are using.