Announcing: Blank.ly - a style guide for the Build.r template

Interface

One of the challenges in building a system that caters to both site builders and developers as well as new and experienced users is to make a control panel that is both feature rich and not visually overwhelming. Zen Grid Framework 4 themes have a number of options that aim to improve your user experience regardless of your skill level and experience.

Basic Mode

Basic mode is aimed at users who are happy to use the default advanced settings in the template and make simple changes to layout, theme selector, fonts etc. When basic mode is enabled the advanced options are hidden from view making the interface more focussed and easier to navigate. Basic and advanced mode are toggled on specific panels with a Hide Advanced / Show Advanced toggle button. The button toggles the setting for all panels and the basic / advanced state is saved when the user saves their settings.

Basic Mode

Users can click on the Advanced setting toggle while editing the template settings in order to hide or display options.

Example of layout settings with advanced options enabled.

Advanced Mode

Advanced Mode

Advanced mode displays all of the features available in the template making it possible to change almost any aspect of the theme. 

The settings panel holds most of the advanced features and will allow you to make the most out of the powerful optimisation tools we have added to ZGF4 themes.

Hiding descriptions and information

In addition to the above advanced / basic toggle we have also added the option to hide the descriptive / information elements all together. This mode is aimed at the power user who has already understood what specific features do and are comfortable operating the template without the added benefit of the descriptions.

To hide the template descriptions go to the settings panel and toggle the Hide Template description on.

Disable Descriptions

This is an example of the css page with the information enabled.

Basic Mode

And as you can see from the following screenshot disabling the information significantly tightens up the display.

Basic Mode