Layout Guidelines
To promote a sense of visual harmony across a wide range of applications, Spark provides the following recommendations on how to combine components into complex patterns and screen layouts.
Basic Unit of Measure
In Spark code, measurements are recorded in rems. A rem is a relative size that allows elements to scale better between different screen sizes and device types. 1 rem is equivalent to 12 pixels in the Spark Design Library. Every spatial and layout design decision should reference this basic measurement.
Conversion Chart
| Rem | Pixel |
|---|---|
| 1 rem | 12 pixels |
| 2 rem | 24 pixels |
| 3 rem | 36 pixels |
| 4 rem | 48 pixels |
| 5 rem | 60 pixels |
Why 12 pixels?
- High Level of Divisibility
- Easily Manipulated to Meet Mobile Touch Standards
- Aligns with 12 Column Grid
Applying the Basic Unit of Measure
Based on the basic unit of 1 rem / 12px, all layout decisions are informed by two grid systems, our baseline grid (vertical) and a 12-column responsive grid (horizontal).
Baseline Grid and Vertical Spacing
Our vertical baseline grid is the key to achieving vertical rhythm. Vertical rhythm is the balanced spacing of elements as the user moves down the page. It is created by three factors: font size, line height and margin or padding.
Responsive Grid and Horizontal Spacing
While the baseline grid informs vertical spacing, the responsive grid is key to understanding horizontal positioning of elements on a screen. Use varying increments of 12px to create hierarchy and groupings within layouts. For example, panels, content containers and most UI components typically have 2 to 3 rem (24 to 36px) in between one another.
Regarding the responsive grid itself, it’s important to note that regardless of viewport size, our nested grid contains 12 columns that can flex in width while the grid gutters remain fixed at 2 rem (1 rem for XS viewports).
Read the Responsive Grid documentation for more information.
Putting It All Together
By applying the basic unit of measure to all vertical and horizontal spacing decisions, designers can maintain consistency within their files, and developers can more accurately translate design files into working code. Ultimately, this results in designs that reduce visual clutter, support ease of use and build confidence among users.
Note: Spark offers a set of CSS classes to solve small, common problems and enforce consistency within page layouts along with a training video for additional Spark grid system guidance.
- 12px Baseline Grid
- Content / components should align to this grid to create the vertical rhythm Spark has standardized.
- 12-column Responsive Grid
- Controls horizontal positioning. Important to note that the columns flex depending on viewport size.
- 24px Gutters
- While the grid columns flex depending on viewport size, the grid gutters remain fixed at 24px.
Nested Grid Example
- 12-Column Nested Grid
- Controls horizontal positioning within panels. Columns continue to flex, even when nested.
- 24px Gutters
- While the nested grid columns flex depending on panel size, the gutters remain fixed at 24px.