Helpers

Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
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
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
5,10,15,20, ... 90
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
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
5,10,15,20, ... 90
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 
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
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-complete
b-danger
b-warning
EXAMPLE :
1
<div class="b-b b-grey">
2
  I have a bottom border 
3
</div>
Copied!
Border Style
b-dashed - change the border style to 'dashed'
b-thick - change the border width to 2px
Border Radius
Helpy class to apply quick border radius, you can change the value in misc.less or in style.css
CLASS
DESCRIPTION
b-rad-sm
3px border radius
b-rad-md
5px border radius
b-rad-lg
7px border radius
Table-like behavior
Add table behavior to any div by using these helper classes. These classes will come handy when you want to vertically align any content like in native tables.
I'm top aligned just like in a table-cellI'm middle aligned just like in a table-cell
1
<div class="container-sm-height bg-master-lighter" style="height:200px">
2
    <div style="height:50px" class="row row-sm-height b-b b-grey">
3
        <div class="col-sm-12 col-sm-height col-top ">
4
            <span class="hint-text">I'm top aligned just like in a table-cell</span>
5
        </div>
6
    </div>
7
​
8
    <div class="row row-sm-height ">
9
        <div class="col-sm-12 col-sm-height col-middle ">
10
            <span class="hint-text">I'm middle aligned just like in a table-cell</span>
11
        </div>
12
    </div>
13
</div>
Copied!
The table created in the above example is only activated for resolutions ≥768px. Hence the prefix *-sm-*. You can replace *-sm-* with any other breakpoint prefix defined in Bootstrap to restrict the table-like behavior to a particular resolution (ex: 'xs','md','lg')
You can also append col-middle, col-top or col-bottom to col-*-height to vertically align the content
It is also possible to mix these classes together with Bootstrap's row and col-*-* classes without any conflict
Elements that resize maintaining aspect ratio
Make the height of any element auto-adjust depending on its width while constraining to a given aspect ratio.
1
<div class="row">
2
    <div class="col-sm-3">
3
        <div class="ar-1-2">
4
            <div class="bg-master-light padding-20">
5
                <h3>1x2</h3>
6
            </div>
7
        </div>
8
    </div>
9
​
10
    <div class="col-sm-3">
11
        <div class="ar-2-3">
12
            <div class="bg-master-light padding-20">
13
                <h3>2x3</h3>
14
            </div>
15
        </div>
16
    </div>
17
​
18
    <div class="col-sm-3">
19
        <div class="ar-1-1">
20
            <div class="bg-master-light padding-20">
21
                <h3>1x1</h3>
22
            </div>
23
        </div>
24
    </div>
25
​
26
    <div class="col-sm-3">
27
        <div class="ar-3-2">
28
            <div class="bg-master-light padding-20">
29
                <h3>3x2</h3>
30
            </div>
31
        </div>
32
    </div>
33
​
34
    <div class="col-sm-3 m-t-20">
35
        <div class="ar-2-1">
36
            <div class="bg-master-light padding-20">
37
                <h3>2x1</h3>
38
            </div>
39
        </div>
40
    </div>
41
</div>
Copied!
Absolute positioning
Makes elements to have position:absolute. Add .relative to the parent of the element that you want to be absolute to have relative positioning
Like - Top-left, Bottom-left, Top-right & Bottom-right
1
<div class="relative" style="height:300px">
2
    <!-- Equivalent to "pull-up" -->
3
    <div class="top-left bg-master-light text-center padding-20">Top-left</div>
4
    <!-- Equivalent to "pull-bottom" -->
5
    <div class="bottom-left bg-master-light text-center padding-20">Bottom-left</div>
6
    <div class="top-right bg-master-light text-center padding-20">Top-right</div>
7
    <div class="bottom-right bg-master-light text-center padding-20">Bottom-right</div>
8
</div>
Copied!
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
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
scrollable
Adds overflow-y:auto
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
Grid
Troubleshooting
Last modified 4yr ago
Copy link
Contents
Elements that resize maintaining aspect ratio
Absolute positioning
Misc. classes