# 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 5 - 90 px stepping value 5px
• Set padding - Available for all directions from 5 - 90 px stepping value 5px
• Set border - Available for all sides, default pages border color
• Border Radius - Option to set border radius, size sm / md / lg
• Image wrapping - Circular image wrap with custom size, sm / md / lg

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

• 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,4,5,6. It has a step of 5px, eg: 5,10,15

OTHER OPTIONS :

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

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

• 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,4,5,6. It has a step of 5px, eg: 5,10,15

OTHER OPTIONS :

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

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

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-complete

b-danger

b-warning

EXAMPLE :

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

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

b-thick - change the border width to 2px

Helpy class to apply quick border radius, you can change the value in misc.less or in style.css

Pages uses the reactstrap plugin to add table-like behavior. This will come handy when you want to vertically align any content like in native tables. You can refer there documentation for further details and instructions here https://reactstrap.github.io

import { Row, Col } from "reactstrap";

It has twelve column system, six default responsive tiers

• xs: Number of columns to span on extra-small devices having resolution < 576 pixels.
• sm: Number of columns to span on small devices having a resolution of 576 pixels.
• md: Number of columns to span on medium devices having a resolution of ≥ 768 pixels.
• lg: Number of columns to span on large devices having a resolution ≥ of 992 pixels.
• xl: Number of columns to span on extra-large devices having a resolution ≥ of 1200 pixels.

<Row>
  <Col sm="12" md="12" lg="12" xl="4"></Col>
  <Col sm="12" md="12" lg="12" xl="4">
    <Row>
      <Col sm="12" md="12" lg="12" xl="12"></Col>
    </Row>
    <Row>
      <Col sm="12" md="12" lg="12" xl="12"></Col>
    </Row>
  </Col>
</Row>

Makes elements to have position:absolute. Add .relative to the parent of the element that you want to be absolute to have relative positioning

<div class="relative" style="height:300px">
  <!-- Equivalent to "pull-up" -->
  <div class="top-left bg-master-light text-center padding-20">Top-left</div>
  <!-- Equivalent to "pull-bottom" -->
  <div class="bottom-left bg-master-light text-center padding-20">
    Bottom-left
  </div>
  <div class="top-right bg-master-light text-center padding-20">Top-right</div>
  <div class="bottom-right bg-master-light text-center padding-20">
    Bottom-right
  </div>
</div>

It is also possible to mix two or more classes. ex: Mixing top-left top-right will produce the following CSS stylingtop:0; left:0; right:0