Grid
Handoff uses the Bootstrap grid system to create responsive layouts. The grid system is based on a 12 column layout. This allows you to create layouts that adapt to different screen sizes and devices.
Breakpoints
The Bootstrap grid system is based on a 12 column layout. The grid system is responsive and adapts to different screen sizes and devices. The grid system uses the following breakpoints:
- Extra small: < 576px
- Small: ≥ 576px
- Medium: ≥ 768px
- Large: ≥ 992px
- Extra large: ≥ 1200px
Variables
To facilitate this, in the Handoff SASS code, we declare two variables that define the breakpoints:
1$grid-breakpoints: (
2 xs: 0,
3 sm: 576px,
4 md: 768px,
5 lg: 992px,
6 xl: 1200px,
7 xxl: 1400px,
8);
9
10// Grid containers
11$container-max-widths: (
12 sm: 540px,
13 md: 720px,
14 lg: 960px,
15 xl: 1200px,
16);These breakpoints can be used in sass to define how a element should appear at a responsive size. For example:
Grid Classes
Bootstrap uses the following classes to define the grid layout:
.container: The container class is used to create a fixed-width container..container-fluid: The container-fluid class is used to create a full-width container..row: The row class is used to create a row of columns..col-*: The col-_ class is used to define the width of a column. The _ is a number between 1 and 12 that defines the width of the column.
For more information, see the Bootstrap documentation.