Foundation
Unit & grid system
Svenska Spel´s responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
Grid System
Our base unit is 12-pixels. We use multiples of the base unit to create the dimensions of our columns, components and patterns along with their margins and padding to ensure coherency and consistency. Example: 6, 12, 18, 24, 36, 48 px.
We do allow the base unit to be divided in 2 when needed.
Columns, gutters and margins
The responsive layout grid is made up of three elements: columns, gutters and margins.
- Margins
- Columns
- Gutters
Columns
Content is placed in the areas of the screen that contain columns.
In responsive layouts, column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. A breakpoint can correspond with mobile, tablet, or other screen type.
Gutters
A gutter is the space between columns that helps separate content.
Gutter widths are fixed values at each breakpoint range. To better adapt to a given screen size, gutter widths can change at different breakpoints.
Wider gutters are more appropriate for larger screens, as they create more open space between columns.
On mobile at a breakpoint of xs—>am – this layout grid uses 12 px gutters.
On a tablet/desktop at a breakpoint md—>xl – this layout grid uses 24 px gutters.
Margins
Margins are the space between content and the left and right edges of the screen.
Margin widths are defined using fixed or scaling values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.
Breakpoints
A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.
| Device | Breaking point | Property |
|---|---|---|
| Extra small (mobile) | 480px | xs |
| Small (portrait tablet) | 480px | sm |
| Almost Medium | 768px | am |
| Medium (landscape tablet) | 1024px | md |
| Large (desktop) | 1357px | lg |
| Extra large (large desktop) | 1600px | xl |
