Grid
The grid system is simple but is currently all that is required for the non-complex layouts required by the platform. Grid sizing will respond and automatically adjust to tablet and mobile breakpoints.
Spacing: The 20px Rule
Most platform elements are spaced 20px apart. For example, in the image below, you can see a 20px gap between most elements.
This consistent 20px spacing can be achieved by using the below classes in conjunction with the grid classes stated above.
.content-padding-med { padding: 20px }
.content-padding-sml { padding: 10px }
Example
The above example shows 3 different grid sizes each with content inside. The spacing between each grid container is 20px and the spacing inside each grid container is 20px. This is achieve by:
<div class="col-two-thirds"> <div class="content-padding-sml"> <div class="content-padding-med" style="background: white"> Content Here </div> </div></div><div class="col-third"> <div class="content-padding-sml"> <div class="content-padding-med" style="background: white"> More Content Here </div> </div></div><div class="col-full"> <div class="content-padding-sml"> <div class="content-padding-med" style="background: white"> Other Content Here </div> </div></div>