Helpers

Search…
Helpers
This is a set of classes that act as a tool to help you with alignment and layout.
Space Styles Margin and Padding
We recommend using space styles within your app. It will help with consistent spacing between components.
The classes available can be applied to margin and padding. The class space grows in increments of 8px.
1
Class semantics
2
{spacing}-{location}-{increment} 
3
​
4
//Spacing: Padding(P) and margin(M) is available. 
5
//Location:This where the space will be applied. Top(T), right(R), bottom(B), left(L), all sides(A), 
6
  left and right(X), top and bottom(Y).
7
​
8
//Increments of spacing 1-3
9
.p-t-1: padding-top: 8px;
10
.p-t-2: padding-top: 16px;
11
.p-t-3: padding-top: 24px; 
12
​
13
​
14
//Example of type of spacing classes available for padding and margin
15
.p-t-1: padding-top: 8px;
16
.p-r-1: padding-right: 8px;
17
.p-b-1: padding-bottom:8px;
18
.p-l-1: padding-left: 8px;
19
.p-x-1: padding-left: 8px; padding-right: 8px;
20
.p-y-1: padding-top: 8px; padding-bottom: 8px;
21
.p-a-1: padding: 8px; // This will apply to all sides
22
​
23
//For margin simply replace the p with m from from p-t-1 e.g.
24
.m-t-1: margin-top: 8px;
25
​
26
//Within HTML call the class
27
<div class = "p-a-2"></div> //Padding on all sides 16px
Copied!
Preloader
Templates
Copy link
Contents
Space Styles Margin and Padding