Grid

Design System Guidelines

IMPORTANT: The Grid Has Changed

Our design system has new breakpoints and max. container widths!

What's Changed from the Bootstrap 3 (BS3) Grid

(New) Breakpoint name

Extra Small (XS)

Small (SM)

Medium (MD)

Large (LG)

Extra Large (XL)

XX Large (XXL)

XXX Large (XXXL)

(BS3) Breakpoint name

- - -

Extra Small (XS)

Small (SM)

Medium (MD)

Large (LG)

- - -

(New) Breakpoint trigger

< 576px

≥ 576px

≥ 768px

≥ 992px

≥ 1200px

≥ 1440px

≥ 1600px

(BS3) Breakpoint trigger

- - -

< 768px

< 992px

< 1200px

≥ 1200px

- - -

(New) Max container width

None (auto)

540px

720px

960px

1140px

1410px

1570px

(BS3) Max container width

- - -

None (auto)

750px

970px

1170px

- - -

# of columns

Gutter width

30px (15px on each side of a column)

How the Grid Change Affects Design

Name Changes: The new grid changes the names of breakpoints, which will cause confusion for a while, but we ultimately need to adopt them.

New Breakpoints: The new grid adds three new breakpoints:

XS is equivalent to portrait orientation on a smartphone. In the future, our design system could differentiate patterns between XS and SM breakpoints, but for MVP we will continue to use the same design patterns for both.
XXL is for wider than normal screens. Use "dds__container-fluid" instead of "dds__container" to access this breakpoint.
XXXL is for wider than normal screens. Use "dds__container-fluid" instead of "dds__container" to access this breakpoint.

Example of Standard Grid Using dds__container

dds__col-12 dds__col-md-8

dds__col-6 dds__col-md-4

dds__col-6

Example of Standard Grid Using dds__container-fluid

dds__col-12 dds__col-md-8

dds__col-6 dds__col-md-4

dds__col-6