Breakpoints & Grid System
Mixins to control style properties in different screen sizes.
Last updated
Mixins to control style properties in different screen sizes.
Last updated
SDS includes a robust and fully flexible grid system to make designing/developing responsive projects as efficient as possible. The grid system consists of six(6) breakpoints and four(4) grid variations which can be viewed below.
screen-xs
0 – 599px
4
16/16
screen-sm
600 – 767px
8
16/16
screen-md
768 – 1023px
8
16/16
screen-lg
1024 – 1279px
12
16/16
screen-xl
1280 – 1599px
12
24/24
screen-2xl
1600px +
16
24/24
There are some nuances between Design and Development and how the grid system is implemented. Both topics are covered in the following sections:
DesignDevelopment