Grid and layout

Start off by evaluating the complexity of what you're going to build, and establish a grid system accordingly. A user interface can become quite cluttered and complex but a strong grid system will help when building the overall layout and content.

For larger screens use a 12 column horizontal grid. Columns should be based on percentages. Set a gutter of 20px if needed.

For smaller screens reduce the number of columns accordingly to screen size. Tablets should use 8 columns while mobile phones works well with 4 columns.

Navigation

Present all prioritized entry points as content rather than building a large tree menu. Use a hamburger if needed. A tab bar can also be introduced on touch devices.

Typography

These are the documented sizes. For more details see typography.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lorem sit amet nisi dictum, et pulvinar nibh posuere. Nullam viverra ligula scelerisque purus faucibus finibus. Proin sollicitudin dui ac mi maximus ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit.
• Mauris id feugiat dui faucibus.
• Proin sollicitudin acmi.

Basic components

These are built for browser preview. They may all differ depending on framework or application.

Buttons

Buttons with available modifiers.

Compact buttons.

Select box

Input

Checkbox

Radio

Spinner

When loading external data we show a preloader.