Scroll to Top

Instant Helper Classes

Helper classes are made for fast and ready-made styling classes which applies instantly, They are logical classes that fits within your design and make it look perfect.

SITEMAP Documentation / Css / Instant Helper Classes

Float an element to the left or right with a class. use left class to align the element to the left and use right class to align the element to the right.

Demo

Floating Left

Floating Right

Code copy

        <p class="left">Floating Left</p>
        <p class="right">Floating Right</p>

Easily clear floats by adding clearfix class after floating element.

Demo

clearfix used:

float left

no float

without using clearfix:

float left

no float

Code copy


<div class="clearfix"></div>

Show and hide any element forcefully by adding show and hide class.

Demo

Hide or Show anything by using just class hide to hide element and show to show element.

Code copy


<div class="hide">will be hidden</div>
<div class="show">will be shown</div>

We wanted to make the Material Grammi more versatile as well as we never wanted your thoughts to be bound only to the framework itself. Padding can be given instantly to any element.

Now Use Padding classes to give padding to any element. padding classes varies from 5 to 60. These classes are shown in demo.

Demo

Options

Classes Padding Size Orientation
pad-5 5px Top, Left, Bottom, Right
pad-10 10px Top, Left, Bottom, Right
pad-15 15px Top, Left, Bottom, Right
pad-20 20px Top, Left, Bottom, Right
pad-25 25px Top, Left, Bottom, Right
pad-30 30px Top, Left, Bottom, Right
pad-40 40px Top, Left, Bottom, Right
pad-50 50px Top, Left, Bottom, Right
pad-60 60px Top, Left, Bottom, Right

Example

pad-20 Example

Code copy

<div class="pad-5">padding: 5px</div>
<div class="pad-10">padding: 10px</div>
<div class="pad-15">padding: 15px</div>
<div class="pad-20">padding: 20px</div>
<div class="pad-25">padding: 25px</div>
<div class="pad-30">padding: 30px</div>
<div class="pad-40">padding: 40px</div>
<div class="pad-50">padding: 50px</div>
<div class="pad-60">padding: 60px</div>

Give Padding from left and right to any element by just adding one materialgrammi class.

Demo

Options

Classes Padding Size Orientation
padX-5 5px Left, Right
padX-10 10px Left, Right
padX-15 15px Left, Right
padX-20 20px Left, Right
padX-25 25px Left, Right
padX-30 30px Left, Right
padX-40 40px Left, Right
padX-50 50px Left, Right
padX-60 60px Left, Right

Example

padX-60 Example

Code copy

<div class="padX-5">padding--left and right: 5px</div>
<div class="padX-10">padding--left and right: 10px</div>
<div class="padX-15">padding--left and right: 15px</div>
<div class="padX-20">padding--left and right: 20px</div>
<div class="padX-25">padding--left and right: 25px</div>
<div class="padX-30">padding--left and right: 30px</div>
<div class="padX-40">padding--left and right: 40px</div>
<div class="padX-50">padding--left and right: 50px</div>
<div class="padX-60">padding--left and right: 60px</div>

Give Padding from top and bottom to any element by just adding one materialgrammi class.

Demo

Options

Classes Padding Size Orientation
padY-5 5px Top, Bottom
padY-10 10px Top, Bottom
padY-15 15px Top, Bottom
padY-20 20px Top, Bottom
padY-25 25px Top, Bottom
padY-30 30px Top, Bottom
padY-40 40px Top, Bottom
padY-50 50px Top, Bottom
padY-60 60px Top, Bottom

Example

padY-60 Example

Code copy

<div class="padY-5">padding--top and bottom: 5px</div>
<div class="padY-10">padding--top and bottom: 10px</div>
<div class="padY-15">padding--top and bottom: 15px</div>
<div class="padY-20">padding--top and bottom: 20px</div>
<div class="padY-25">padding--top and bottom: 25px</div>
<div class="padY-30">padding--top and bottom: 30px</div>
<div class="padY-40">padding--top and bottom: 40px</div>
<div class="padY-50">padding--top and bottom: 50px</div>
<div class="padY-60">padding--top and bottom: 60px</div>

Now Use Padding classes to give padding from left to any element. padding classes varies from 5 to 60. These classes are shown in demo.

Demo

Options

Classes Padding Size Orientation
padL-5 5px Left
padL-10 10px Left
padL-15 15px Left
padL-20 20px Left
padL-25 25px Left
padL-30 30px Left
padL-40 40px Left
padL-50 50px Left
padL-60 60px Left

Example

padL-60 Example

Code copy

<div class="padL-5">padding-left: 5px</div>
<div class="padL-10">padding-left: 10px</div>
<div class="padL-15">padding-left: 15px</div>
<div class="padL-20">padding-left: 20px</div>
<div class="padL-25">padding-left: 25px</div>
<div class="padL-30">padding-left: 30px</div>
<div class="padL-40">padding-left: 40px</div>
<div class="padL-50">padding-left: 50px</div>
<div class="padL-60">padding-left: 60px</div>

Now Use Padding classes to give padding from right to any element. padding classes varies from 5 to 60. These classes are shown in demo.

Demo

Options

Classes Padding Size Orientation
padR-5 5px Right
padR-10 10px Right
padR-15 15px Right
padR-20 20px Right
padR-25 25px Right
padR-30 30px Right
padR-40 40px Right
padR-50 50px Right
padR-60 60px Right

Example

padR-60 Example

Code copy

<div class="padR-5">padding-right: 5px</div>
<div class="padR-10">padding-right: 10px</div>
<div class="padR-15">padding-right: 15px</div>
<div class="padR-20">padding-right: 20px</div>
<div class="padR-25">padding-right: 25px</div>
<div class="padR-30">padding-right: 30px</div>
<div class="padR-40">padding-right: 40px</div>
<div class="padR-50">padding-right: 50px</div>
<div class="padR-60">padding-right: 60px</div>

Give Padding from top to any element by just adding materialgrammi classes.

Demo

Options

Classes Padding Size Orientation
padT-5 5px Top
padT-10 10px Top
padT-15 15px Top
padT-20 20px Top
padT-25 25px Top
padT-30 30px Top
padT-40 40px Top
padT-50 50px Top
padT-60 60px Top

Example

padT-60 Example

Code copy

<div class="padT-5">padding-top: 5px</div>
<div class="padT-10">padding-top: 10px</div>
<div class="padT-15">padding-top: 15px</div>
<div class="padT-20">padding-top: 20px</div>
<div class="padT-25">padding-top: 25px</div>
<div class="padT-30">padding-top: 30px</div>
<div class="padT-40">padding-top: 40px</div>
<div class="padT-50">padding-top: 50px</div>
<div class="padT-60">padding-top: 60px</div>

Give Padding from bottom to any element by just adding materialgrammi classes.

Demo

Options

Classes Padding Size Orientation
padB-5 5px Bottom
padB-10 10px Bottom
padB-15 15px Bottom
padB-20 20px Bottom
padB-25 25px Bottom
padB-30 30px Bottom
padB-40 40px Bottom
padB-50 50px Bottom
padB-60 60px Bottom

Example

padB-60 Example

Code copy

<div class="padB-5">padding-bottom: 5px</div>
<div class="padB-10">padding-bottom: 10px</div>
<div class="padB-15">padding-bottom: 15px</div>
<div class="padB-20">padding-bottom: 20px</div>
<div class="padB-25">padding-bottom: 25px</div>
<div class="padB-30">padding-bottom: 30px</div>
<div class="padB-40">padding-bottom: 40px</div>
<div class="padB-50">padding-bottom: 50px</div>
<div class="padB-60">padding-bottom: 60px</div>

Margin Classes are introduce through which user can add margin to the element at any place using simple class.

You can give overall margin to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Padding Size Orientation
margin-5 5px Top, Left, Bottom, Right
margin-10 10px Top, Left, Bottom, Right
margin-15 15px Top, Left, Bottom, Right
margin-20 20px Top, Left, Bottom, Right
margin-25 25px Top, Left, Bottom, Right
margin-30 30px Top, Left, Bottom, Right
margin-40 40px Top, Left, Bottom, Right
margin-50 50px Top, Left, Bottom, Right
margin-60 60px Top, Left, Bottom, Right

Example

margin-20 Example

Code copy

    <div class="margin-5">margin: 5px</div>
    <div class="margin-10">margin: 10px</div>
    <div class="margin-15">margin: 15px</div>
    <div class="margin-20">margin: 20px</div>
    <div class="margin-25">margin: 25px</div>
    <div class="margin-30">margin: 30px</div>
    <div class="margin-40">margin: 40px</div>
    <div class="margin-50">margin: 50px</div>
    <div class="margin-60">margin: 60px</div>

You can give horizontal margin (left and right) to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Padding Size Orientation
marginX-5 5px Left, Right
marginX-10 10px Left, Right
marginX-15 15px Left, Right
marginX-20 20px Left, Right
marginX-25 25px Left, Right
marginX-30 30px Left, Right
marginX-40 40px Left, Right
marginX-50 50px Left, Right
marginX-60 60px Left, Right

Example

marginX-20 Example

Code copy

    <div class="marginX-5">margin-left--right: 5px</div>
    <div class="marginX-10">margin-left--right: 10px</div>
    <div class="marginX-15">margin-left--right: 15px</div>
    <div class="marginX-20">margin-left--right: 20px</div>
    <div class="marginX-25">margin-left--right: 25px</div>
    <div class="marginX-30">margin-left--right: 30px</div>
    <div class="marginX-40">margin-left--right: 40px</div>
    <div class="marginX-50">margin-left--right: 50px</div>
    <div class="marginX-60">margin-left--right: 60px</div>

You can give vertical margin (top and bottom) to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Padding Size Orientation
marginY-5 5px Top, Bottom
marginY-10 10px Top, Bottom
marginY-15 15px Top, Bottom
marginY-20 20px Top, Bottom
marginY-25 25px Top, Bottom
marginY-30 30px Top, Bottom
marginY-40 40px Top, Bottom
marginY-50 50px Top, Bottom
marginY-60 60px Top, Bottom

Example

marginY-20 Example

Code copy

    <div class="marginY-5">margin-top--bottom: 5px</div>
    <div class="marginY-10">margin-top--bottom: 10px</div>
    <div class="marginY-15">margin-top--bottom: 15px</div>
    <div class="marginY-20">margin-top--bottom: 20px</div>
    <div class="marginY-25">margin-top--bottom: 25px</div>
    <div class="marginY-30">margin-top--bottom: 30px</div>
    <div class="marginY-40">margin-top--bottom: 40px</div>
    <div class="marginY-50">margin-top--bottom: 50px</div>
    <div class="marginY-60">margin-top--bottom: 60px</div>

You can give margin from left to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Padding Size Orientation
marginL-5 5px Left
marginL-10 10px Left
marginL-15 15px Left
marginL-20 20px Left
marginL-25 25px Left
marginL-30 30px Left
marginL-40 40px Left
marginL-50 50px Left
marginL-60 60px Left

Example

marginL-20 Example

Code copy

    <div class="marginL-5">margin-left: 5px</div>
    <div class="marginL-10">margin-left: 10px</div>
    <div class="marginL-15">margin-left: 15px</div>
    <div class="marginL-20">margin-left: 20px</div>
    <div class="marginL-25">margin-left: 25px</div>
    <div class="marginL-30">margin-left: 30px</div>
    <div class="marginL-40">margin-left: 40px</div>
    <div class="marginL-50">margin-left: 50px</div>
    <div class="marginL-60">margin-left: 60px</div>

You can give margin from right to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Size Orientation
marginR-5 5px Right
marginR-10 10px Right
marginR-15 15px Right
marginR-20 20px Right
marginR-25 25px Right
marginR-30 30px Right
marginR-40 40px Right
marginR-50 50px Right
marginR-60 60px Right

Example

marginR-20 Example

Code copy

    <div class="marginR-5">margin-Right: 5px</div>
    <div class="marginR-10">margin-Right: 10px</div>
    <div class="marginR-15">margin-Right: 15px</div>
    <div class="marginR-20">margin-Right: 20px</div>
    <div class="marginR-25">margin-Right: 25px</div>
    <div class="marginR-30">margin-Right: 30px</div>
    <div class="marginR-40">margin-Right: 40px</div>
    <div class="marginR-50">margin-Right: 50px</div>
    <div class="marginR-60">margin-Right: 60px</div>

You can give margin from top to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Size Orientation
marginT-5 5px Top
marginT-10 10px Top
marginT-15 15px Top
marginT-20 20px Top
marginT-25 25px Top
marginT-30 30px Top
marginT-40 40px Top
marginT-50 50px Top
marginT-60 60px Top

Example

marginT-20 Example

Code copy

    <div class="marginT-5">margin-Top: 5px</div>
    <div class="marginT-10">margin-Top: 10px</div>
    <div class="marginT-15">margin-Top: 15px</div>
    <div class="marginT-20">margin-Top: 20px</div>
    <div class="marginT-25">margin-Top: 25px</div>
    <div class="marginT-30">margin-Top: 30px</div>
    <div class="marginT-40">margin-Top: 40px</div>
    <div class="marginT-50">margin-Top: 50px</div>
    <div class="marginT-60">margin-Top: 60px</div>

You can give margin from bottom to any element by using classes and these classes varies from 5 to 60px.

Demo

Options

Classes Size Orientation
marginB-5 5px Bottom
marginB-10 10px Bottom
marginB-15 15px Bottom
marginB-20 20px Bottom
marginB-25 25px Bottom
marginB-30 30px Bottom
marginB-40 40px Bottom
marginB-50 50px Bottom
marginB-60 60px Bottom

Example

marginB-20 Example

Code copy

    <div class="marginB-5">margin-Bottom: 5px</div>
    <div class="marginB-10">margin-Bottom: 10px</div>
    <div class="marginB-15">margin-Bottom: 15px</div>
    <div class="marginB-20">margin-Bottom: 20px</div>
    <div class="marginB-25">margin-Bottom: 25px</div>
    <div class="marginB-30">margin-Bottom: 30px</div>
    <div class="marginB-40">margin-Bottom: 40px</div>
    <div class="marginB-50">margin-Bottom: 50px</div>
    <div class="marginB-60">margin-Bottom: 60px</div>

There are two types of borders in material grammi, dark and light. User can use any of these border and set the position through simple css class.

Give overall border to any element. You have two options while giving borders, dark and light.

Demo

Options

Classes Color Orientation
border-dark dark Top, Left, Bottom, Right
border-light light Top, Left, Bottom, Right

Example

border-dark Example

Code copy

<div class="border-dark">border-dark</div>
<div class="border-light">border-light</div>

Give left border to any element. You have two options while giving borders, dark and light.

Demo

Options

Classes Color Orientation
borderL-dark dark Left
borderL-light light Left

Example

borderL-dark Example

Code copy

<div class="borderL-dark">borderL-dark</div>
<div class="borderL-light">borderL-light</div>

Give right border to any element. You have two options while giving borders, dark and light.

Demo

Options

Classes Color Orientation
borderR-dark dark Right
borderR-light light Right

Example

borderR-dark Example

Code copy

<div class="borderR-dark">borderR-dark</div>
<div class="borderR-light">borderR-light</div>

Give bottom border to any element. You have two options while giving borders, dark and light.

Demo

Options

Classes Color Orientation
borderB-dark dark Bottom
borderB-light light Bottom

Example

borderB-dark Example

Code copy

    <div class="borderB-dark">borderB-dark</div>
    <div class="borderB-light">borderB-light</div>

Give top border to any element. You have two options while giving borders, dark and light.

Demo

Options

Classes Color Orientation
borderT-dark dark Top
borderT-light light Top

Example

borderT-dark Example

Code copy

<div class="borderT-dark">borderT-dark</div>
<div class="borderT-light">borderT-light</div>

Dark and light Borders are used in concentrated themes but there is one other option of border too. That is border-lowdark that will act with above classes too.

Demo

Example

low border example

Code copy

    <div class="border-lowdark">overall border</div>
    <div class="borderL-lowdark">left border</div>
    <div class="borderR-lowdark">right border</div>
    <div class="borderB-lowdark">bottom border</div>
    <div class="borderT-lowdark">top border</div>

Border radius is divided in different classes for different positions and different styles.

If you want to give the whole element a border radius it will act on four sides of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radius-(2,5,10,15) 2px, 5px, 10px and 15px bottom, left, top, right

Example

radius-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radius-10 pad-20">radius-10</p>

If you want to give the top corner border radius it will act on two sides on the top of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusT-(2,5,10,15) 2px, 5px, 10px and 15px top, right, left

Example

radiusT-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusT-10 pad-20">radiusT-10</p>

If you want to give the bottom corner border radius it will act on two sides on the bottom of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusB-(2,5,10,15) 2px, 5px, 10px and 15px bottom, right, left

Example

radiusB-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusB-10 pad-20">radiusB-10</p>

If you want to give the left corner border radius it will act on two sides on the left of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusL-(2,5,10,15) 2px, 5px, 10px and 15px bottom, top, left

Example

radiusL-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusL-10 pad-20">radiusL-10</p>

If you want to give the Right corner border radius it will act on two sides on the right of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusR-(2,5,10,15) 2px, 5px, 10px and 15px bottom, top, right

Example

radiusR-10

Code copy

<p class="marginB-20 grey6 border-lowdark radiusR-10 pad-20">radiusR-10</p>

You can focus on one corner too, By using these classes you can focus on top left corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusTL-(2,5,10,15) 2px, 5px, 10px and 15px top, left

Example

radiusTL-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusTL-10 pad-20">radiusTL-10</p>

You can focus on one corner too, By using these classes you can focus on top right corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusTR-(2,5,10,15) 2px, 5px, 10px and 15px top, right

Example

radiusTR-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusTR-10 pad-20">radiusTR-10</p>

You can focus on one corner too, By using these classes you can focus on bottom left corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusBL-(2,5,10,15) 2px, 5px, 10px and 15px bottom, left

Example

radiusBL-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusBL-10 pad-20">radiusBL-10</p>

You can focus on one corner too, By using these classes you can focus on bottom right corner of the element. Border radius varies in 2, 5, 10 and 15.

Demo

Options

Classes Options orientation
radiusBR-(2,5,10,15) 2px, 5px, 10px and 15px bottom, right

Example

radiusBR-10

Code copy

<p class="marginB-20 grey6 text-grey1 border-lowdark radiusBR-10 pad-20">radiusBR-10</p>

There are two types of horizontal rows, dark and light.

Give a line Break by adding line between two divisions.

Demo

Code copy

<div class="hr-dark"></div>

Give a line Break by adding line between two divisions.

Demo

Code copy

<div class="hr-light"></div>

Over-ride any property by over-ride classes easily. Now the control is in your hands.

Demo

Options

Classes Function
no-overflow overflow: hidden
no-padding padding: 0
no-margin margin: 0
no-border border: 0
no-radius radius: 0
no-bg background: none

Code copy

<div class="no-padding">
    <p>no-padding</p>
</div>

Feedback