Grid & Spacing
- Amish Ladhu
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 achieved by:
<div class="col-two-thirds">
<div class="content-padding-sml">
<div class="content-padding-med">
Content Here
</div>
</div>
</div>
<div class="col-third">
<div class="content-padding-sml">
<div class="content-padding-med">
More Content Here
</div>
</div>
</div>
<div class="col-full">
<div class="content-padding-sml">
<div class="content-padding-med">
Other Content Here
</div>
</div>
</div>
Can’t achieve the 20px gap?
There may be certain use cases where using either .content-padding-sml and/or .content-padding-med does not allow the desired 20px spacing between elements and often when creating new layouts, the spacing above/below/in between elements can be more than 20px.
For these instances, the below classes can be used in conjunction to alleviate some of the spacing issues that can sometimes occur.
.content-padding-no-top { padding-top: 0 }
.content-padding-no-btm { padding-bottom: 0 }