Helpers

Pages helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

  • Set margins - Available for all directions from 0 - 90 px stepping value 5px
  • Set padding - Available for all directions from 0 - 90 px stepping value 5px
  • Set border - Available for all sides, default pages border color
  • Some miscellaneous helpers

Margins

You can add this helper class to any element in your HTML code to set Margins

First Prefix ( m-*) Second Prefix(m-t/b/l/r-*) Last Prefix(m-t-$value)
m for margin t : top, b : bottom, l : left, r : right 0,5,10,15,20, ... 90

example :

m-t-10 which means Margin Top 10px
m-b-20 which means Margin Bottom 20px
m-l-5 which means Margin Left 5px
m-r-35 which means Margin Right 35px

Rule :

Value can not be anything, 1,2,3,4,6. It has a step of 5px, eg: 0,5,10,15

Other options :

To remove margin from a HTML element add the class no-margin

Padding

You can add this helper class to any element in your HTML code to set Padding

First Prefix ( p-*) Second Prefix(p-t/b/l/r-*) Last Prefix(p-t-$value)
p for padding t : top, b : bottom, l : left, r : right 0,5,10,15,20, ... 90

example :

p-t-10 which means Padding Top 10px
p-b-20 which means Padding Bottom 20px
p-l-5 which means Padding Left 5px
p-r-35 which means Padding Right 35px

Rule :

Value can not be anything, 1,2,3,4,6. It has a step of 5px, eg: 0,5,10,15

Other options :

To remove padding from a HTML element add the class no-padding

Border

You can add this helper class to any element in your HTML code to set Border, border currently supports one pixel

First Prefix ( b-*) Second Prefix(b-t/b/l/r/a-*)
b for border t : top, b : bottom, l : left, r : right, a : all

Border Color

By default pages is shipped with border helper classes are of two

b-transparent 40% opacity

b-grey

b-primary

b-success

b-danger

b-warning

example : 

<div class="b-b b-grey">
  I have a bottom border
</div>
Border Style

b-dashed - change the border style to 'dashed'

b-thick - change the border width to 2px

Misc. classes

Class name Description
full-width Spans the element to have 100% width of the parent
full-height Spans the element to have 100% height of the parent
center-margin Adds margin-left:auto; margin-right:auto. Useful when center aligning any div
inherit-size Inherits width and height from parent
inherit-height Inherits only the height from parent
hide Hides any element
inline Adds display:inline-block
block Adds display:block