Overview

The goal of good layout is legibility - to aid the user in quickly identifying what they need on the page. This is achieved through effective use of white space, graphics, typography, and visual separators.

Spacing

To aid with alignment, all UI elements should be spaced out in increments of 8px. On smaller screens or in more compact spaces, the increment can be reduced to 4px.

All margin and padding measurements should be incremented by these units.

Containers

A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface. They can be flexible and accommodate the width or height of the content within, or they can be rigid and fixed in size.

To reduce visual noise, avoid nesting containers in containers.

Specifications

  • Background color: tokens.surface (#ffffff)
  • Default border radius: 4px
  • Elevation: 1dp
  • Spacing between containers: 24px
  • Padding: 16px (small screens), 24px (medium and large screens)

Maximum width of a container

If a page container contains text, set its maximum width to 1000px in order to aid readability on larger screens.

Dividers

Use dividers to create visual distinction between sections within a container. A divider should span the entire width of a container.

Use sparingly and reserve them for situations where white space does not properly separate elements or groups of elements, such as a table, compact list items, or list sections.

Specs

Responsive grids

Grids allow containers and their contained UI components to adapt to screen sizes and orientations and ensure consistent layouts across different parts of the application. Grids do not extend to the width of the window, just the container element.

Each Learning Equality product should utilize a grid system, and generally apply the guidelines from Material Design.

Nested grids

A page can contain nested grids. A container component can exist on a grid and also have its own grid that its contained components can lie on.

Fixed column width

By default, margins have a fixed width, and column width changes responsively. When the need arises, columns can be a fixed width, and margins can change responsively.

Breakpoints

Each breakpoint range has default: number of columns, gutter width, margin, and padding. These defaults can be changed according to exceptional needs.

Range Vuetify KGrid Columns Margins & Gutters Padding
0-479px xs Level 0 4 16px 16px
480-599px xs Level 1 4 16px 16px
600-839px sm Level 2 8 16px 24px
840-959px sm Level 3 12 16px 24px
960-1263px md Level 4 12 24px 24px
1264-1430px lg Level 5 12 24px 24px

Define keylines in increments of 4px or 8 px when UI elements must be placed outside of the alignment to columns and rows within a grid.