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.
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.
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.
- 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.
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.
- Width: 1px
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.
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.
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|
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.