Layout
The goal of content is to be discoverable and easy to absorb, and a site’s or application’s layout should not complicate that process.
The Delta Design System is built on a responsive design framework using flexbox.
The parent container in the framework is a .row. Each .row can be assigned an additional class that define how its child columns occupy the horizontal space of the row. On screens smaller than 48rem wide, all columns in the .row span the full width of the browser and stack vertically.
Layout Examples
Wide Row
A .wide row occupy 100% of the available width on screens of all widths.
Fifty Fifty Row
Left Column
Columns in a .fifty row occupy 50% of the available width on screens wider than 48rem.
Right Column
Columns in a .fifty row occupy 50% of the available width on screens wider than 48rem.
Golden Left Row
Left Column
The left column in a golden left row occupies 62% of the available width on screens wider than 48rem.
Right Column
The right column in a golden left row occupies 38% of the available width on screens wider than 48rem.
Golden Right Row
Left Column
The left column in a golden right row occupies 38% of the available width on screens wider than 48rem.
Right Column
The right column in a golden right row occupies 62% of the available width on screens wider than 48rem.
Thirds Row
First Column
The first column in a .thirds row occupies 33% of the available width on screens wider than 48rem.
Second Column
The second column in a .thirds row occupies 33% of the available width on screens wider than 48rem.
Third Column
The third column in a .thirds row occupies 33% of the available width on screens wider than 48rem.
Fourths Row
First Column
The first column in a .fourths row occupies 50% of the available width on screens wider than 48rem and 25% of the available width on screens wider than 64rem.
Second Column
The second column in a .fourths row occupies 50% of the available width on screens wider than 48rem and 25% of the available width on screens wider than 64rem.
Third Column
The third column in a .fourths row occupies 50% of the available width on screens wider than 48rem and 25% of the available width on screens wider than 64rem.
Fourth Column
The fourth column in a .fourths row occupies 50% of the available width on screens wider than 48rem and 25% of the available width on screens wider than 64rem.