Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel2

...

  • the page subject is identified in the header area.

  • a list of available parameters for the main content are available on the left.

  • the main content is shown in the central workspace.

  • additional details on selected elements within the main content are displayed on the right.

Spacing

In order to provide visual and implementation consistency, an eight-point soft grid should be used for the spacing, sizing, and hierarchy of elements. This means that the spacing between items, padding, and margins should all be made up of multiples of eight: 8 px, 16 px, 24 px etc.

...

  • A division of 4 px is allowed for very small areas, but should be avoided where possible.

  • Some LUX objects have their own defined sizes, such as button widths and table row heights. These should not be resized to the 8 pt grid.

  • Where objects do not have a defined size they should adhere to the 8 pt grid,for consistency.

Margins

Pages will have margins of:

  • 32px on both the left and right.

  • 24px beneath the VerinTop and at the bottom.

Popups will have the following margins, which exclude the border:

  • 40px on both the left and right.

  • 24px in the header and footer.

Spacing examples

Full page layout

Popup and Popover

Text and lists

Image AddedImage AddedImage Added

Structure

Layouts consist of:

...