Grid & Spacing

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>

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 }