Style Guide

DizmoViewer provides basic styling and the dizmoElements library. On top of that, each dizmo can be styled according to your own design, with the default stylesheet being style.scss that can be extended as desired.

style.scss

The stylesheet is in SASS and will be compiled to CSS for dizmoViewer.

Asset organisation

Your stylesheet is located in the directory style. Place your images in the directory assets/images. You can then specify the path to your pictures starting with assets/images/.

MyDizmo
|-- assets                                  <--
    |-- Icon.png
    |-- Preview.png
|-- style                                   <--
        |--style.scss

Note: If you wish to have your files available in your built project, they have to be under their respective folders: For any files regarding styles (icons, images, stylesheets, etc.) you should use the directory src/styles/ and src/styles/images, for libraries the src/lib directory and for any other files that are important during runtime of your project you can use the assets/ directory in the root of your project. Any files that are not in these directories, and are not part of a JavaScript include or your index.html file will not be copied over.

Grid system

A dizmo measures multiples of 80px from top to bottom and left to right including a border of 10px on the bottom.

Grid system
Grid system

 Grid system

Hence, the possible width are: 80 px, 160 px, 240 px, 320 px, … And the possible heights are: 50 px, 130 px, 210 px, 290 px, …

Since the height of all the UI elements in the DizmoElements library is 40 px, you can stack these elements inside the 80 px grid.

When setting dimensions, keep in mind that the dizmo header is not part of the dizmo height. Smallest square and header could be achieved with the following code:

dizmo.setHeight(50);
dizmo.setWidth(80);

Front of a dizmo

Front of a dizmo
Front of a dizmo

Front of a dizmo

The front of a dizmo only shows the most important information; it is a simple and minimal status display. If possible, the user should not need to click anywhere to get to the information. As far as possible avoid using scrollbars – ideally only use them for long lists. When installed in dizmoViewer a dizmo should run immediately. If parameter and date are required, pre-set them to meaningful defaults.

Consider the front of a dizmo as a status display. Please take a look at Magic Ink: Information Software and the Graphical Interface for more details about status display.

Status display
Status display

 Status display

The front should be as visual as possible. A dizmo, even at a very small scale, should still give a useful status indication. It is a good starting point to use the layout and color of existing physical objects, like using a clock face for showing time. Graphical elements should be simplified as much as possible. Interactive elements can use light gradients and light drop shadows. Non-interactive elements use a flat design.

Utilises the following elements, styled with dizmoElements: Dropdowns, formfield, buttons, checkboxes.

Back of a dizmo

Back of a dizmo
Back of a dizmo

Back of a dizmo

The back of the dizmo displays settings, short explanations and secondary features. Use the back to display anything that do not need to be constantly visible but is still a necessary element of the dizmo.

Utilises the following elements: Dropdowns, formfield, buttons, checkboxes, radiobuttons.

dizmo Icon

Supply two icons with the same design, but with different colors, with your dizmo and name them Icon.svg and Icon-dark.svg. When the lightness of the framecolor is below 35%, Icon-dark.svg is used, otherwise Icon.svg. Icon.svg should be dark, as it’s used on a light background, and the main color should be #424142. Icon-dark.svg should be light, as it’s used on a dark background, and the main color should be #e5e5e5.

Dizmo settings menu

Avoid adding functionality into the dizmo settings menu, as it will not be not immediately visible to the user (settings are displayed on the back). Only place advanced features in the settings menu.

Utilises the following elements: Icon and text.

Design assets

  • Dizmo creators can use their own assets
  • For dropdowns, formfield, buttons, checkboxes we recommend to use the dizmoElements library
  • For fonts we recommend the dizmoElements library. DizmoViewer uses the font VAG Rounded.
  • For icons, we recommend the Clear Icons – Thick set.

External resources