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

{% hint style="info" %}
`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 
{% endhint %}

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        |

{% hint style="info" %}
`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 
{% endhint %}

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

```markup
<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

### **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 `table`s.

{% hint style="info" %}
I'm top aligned just like in a table-cellI'm middle aligned just like in a table-cell
{% endhint %}

```markup
<div class="container-sm-height bg-master-lighter" style="height:200px">
    <div style="height:50px" class="row row-sm-height b-b b-grey">
        <div class="col-sm-12 col-sm-height col-top ">
            <span class="hint-text">I'm top aligned just like in a table-cell</span>
        </div>
    </div>

    <div class="row row-sm-height ">
        <div class="col-sm-12 col-sm-height col-middle ">
            <span class="hint-text">I'm middle aligned just like in a table-cell</span>
        </div>
    </div>
</div>
```

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.

![](/files/-LEFxcmeibW2v-gnCgLi)

```markup
<div class="row">
    <div class="col-sm-3">
        <div class="ar-1-2">
            <div class="bg-master-light padding-20">
                <h3>1x2</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-2-3">
            <div class="bg-master-light padding-20">
                <h3>2x3</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-1-1">
            <div class="bg-master-light padding-20">
                <h3>1x1</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="ar-3-2">
            <div class="bg-master-light padding-20">
                <h3>3x2</h3>
            </div>
        </div>
    </div>

    <div class="col-sm-3 m-t-20">
        <div class="ar-2-1">
            <div class="bg-master-light padding-20">
                <h3>2x1</h3>
            </div>
        </div>
    </div>
</div>
```

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

{% hint style="info" %}
Like - Top-left, Bottom-left, Top-right & Bottom-right
{% endhint %}

```markup
<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 styling`top: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`                                                     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pages.revox.io/helpers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.