Scroll to Top

Pre-written classes are included in Css Package and complete documentation is also available here. Just include vast choice of classes which are way more than easy and generic to develop your Project with auto responsive products. We have made these classes after analyzing the Professional users.

SITEMAP Documentation / Css

You can now use the layout of your own choice from three expanded layouts which have very short and addictive code. These three layouts are very different from each other in many ways. When you would use them you will get the idea and you could utilize the best one that suits you.

12 Column Grid

Screen is divided into 12 Columns and use of 12 column is made easy. These Grids are controllable and mobile responsive.

Demo

Follow these steps to create 12 column grid layout

1. Create Row.

2. define columns inside the row.

col m2 s8 l2

col m2 s4 l2

col m2 s6 l2

col m2 s6 l2

col m2 s6 l2

col m2 s6 l2

col m1 l1 s12

col m9 l9 s6

col m2 l2 s6

col m4 s8 l4

col m8 s4 l8

col m6 s6 l6

col m2 s6 l2

col m4 s6 l4

col m7 l7 s6

col m5 l5 s12

Code copy

<div class="row">
                <div class="col m6 l6 s12">
                    <!-- YOUR CONTENT HERE -->
                </div>
                <div class="col m3 l3 s6">
                    <!-- YOUR CONTENT HERE -->
                </div>
                <div class="col m3 l3 s6">
                    <!-- YOUR CONTENT HERE -->
                </div>
            </div>

Masonry Grid

This grid is very useful in making interactive web products. It is used with the typical type of items.

Demo

Use masonary to declare that you are using masonry grid layout If You want Three Elements on the medium screen write col-m-3 with row, for small devides use col-s-3 & for large: col-l-3

Code copy

    <div class="row masonary col-s-1 col-m-3 col-l-4">
        <img src="1.jpg" class="img img-responsive">
        <img src="2.jpg" class="img img-responsive">
        <img src="3.jpg" class="img img-responsive">
        <img src="4.jpg" class="img img-responsive">
        <img src="5.jpg" class="img img-responsive">
        <img src="6.jpg" class="img img-responsive">
    </div>

Flex Grid

Flex Grid layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. Most importantly, the flex box layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.). The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Material Grammi have implemented three layout systems, giving users the ability to use them all in one project as well as use any of them in their projects.

Demo

Detailed Information about flex grid layout is given at official w3 website. To Learn about this layout system, please visit w3 at https://www.w3.org/TR/css-flexbox-1/

Flex Grid Layout System

Code copy

    <div class='row flex stack-top'>
        <div class='col m2 s12 l4'>
                Flex Grid Layout System
        </div>
    </div>

We have tried to make the Typography more attractive and catchy so users doesn't have to waste there time in writing styles. User can use simple classes to create attractive paragraph, heading etc. Material Grammi use Google Font 'Roboto' as optional Font, which is also included in the download package and configured by default via classes. Now Extreme control on fonts is available in Material Grammi Framework. Fonts need to be responsive too when we talk about Mobile First Frameworks, there should be different font sizes according to different devices so we have introduced new classes to make your font responsive. We also offer to control your document's font styling if you want to customize the font size, font style or text decorations, you can make it possible with Material Grammi. You can over-ride the default properties given by Material Grammi Framework too via these classes.

Headings

Headings are the important element of web design and these should be responsive in nature too. New Classes for headings are introduced and all the tags are available for use. Some Tags are style to improve the performance and Presentation of your website designing.

Default Heading

Heading tags have default styling.

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Code copy

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Styled Heading

Heading tags have been styled too for better use of headings.

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Code copy

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Font Control

Material Grammi use Google's Font 'Roboto' as optional Font & classes for them are introduced, which is also included in the download package and configured by default. Now Extreme control on fonts is available in Material Grammi Framework. Fonts need to be responsive too when we talk about Mobile First Frameworks, there should be different font sizes according to different devices. We also offer to control your document's font styling if you want to customize the font size, font style or text decorations, you can make it possible with Material Grammi. Font related classes are given in the below table, you can over-ride the default properties given by Material Grammi Framework.

Font Size

You can now control the font size of text by using classes font sizes varies from 10px to 100px.

Demo

font-10

font-15

font-20

font-25

font-30

font-40

font-50

font-60

font-80

font-100

Code copy

    <p class="font-10">font-10</p>
    <p class="font-15">font-15</p>
    <p class="font-20">font-20</p>
    <p class="font-25">font-25</p>
    <p class="font-30">font-30</p>
    <p class="font-40">font-40</p>
    <p class="font-50">font-50</p>
    <p class="font-60">font-60</p>
    <p class="font-80">font-80</p>
    <p class="font-100">font-100</p>

Text Decoration

Give text decoration by using classes.

Demo

overline

line-through

underline

Code copy

    <p class="text-overline">overline</p>
    <p class="text-linethrough">line-through</p>
    <p class="text-underline">underline</p>

From List item whether ordered or UN-ordered, we have removed the bullets or numbers. default padding and margin is removed from it and material List is also introduced.

Default

Default List is the standard lists and bullets are hidden. But you can over-ride them by adding bullet styles of your own choice.

Demo

  • List Item 01
  • List Item 02
  • List Item 03

Code copy

<ul>
    <li>List Item 01</li>

    <li>List Item 02</li>

    <li>List Item 03</li>
</ul>

Material List

Introducing the list item that is pre styled. we have not styled the original list much but we have provided with the styled list too. we called it material list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

<ul class="material-list">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

Bullet Styles

Bullet Styles are introduced as the class and user can easy manipulate these styles instantly.

disc

add the disc style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

<ul class="list-disc">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

circle

add the circle style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-circle">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

square

add the square style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-square">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

decimal

add the decimal style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-decimal">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

lower-greek

add the lower-greek style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-greek">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

upper-roman

add the upper-roman style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-roman">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

lower-latin

add the lower-latin style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-latin">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

upper-latin

add the upper-latin style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-latin">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

armenian

add the armenian style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-armenian">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

georgian

add the georgian style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-georgian">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

lower-alpha

add the lower-alpha style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-alpha">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

upper-alpha

add the upper-alpha style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-alpha">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

Customize the table as much as you want now with Material Grammi.

Demo

heading
table column in row

Code copy

<table>
    <thead>
        <tr>heading</tr>
    </thead>
    <tbody>
        <tr>
            <td>table column in row</td>
        </tr>
    </tbody>
</table>

Stripped

use Stripped table to created focused table.

Demo

table column in row1
table column in row2
table column in row3

Code copy

    <table class="stripped">
        <tbody>
            <tr>
                <td>table column in row1</td>
            </tr>
            <tr>
                <td>table column in row2</td>
            </tr>
            <tr>
                <td>table column in row3</td>
            </tr>
        </tbody>
    </table>

Bordered

Users can add auto border on tables.

Demo

table heading 01 table heading 02
Table column 01 of row 01 Table column 02 of row 01
Table column 01 of row 02 Table column 02 of row 02

Code copy

<table class="table-bordered-bottom table-bordered-right">
    <thead>
        <th>table heading 01</th>
        <th>table heading 02</th>
    </thead>
    <tbody>
        <tr>
            <td>Table column 01 of row 01</td>
            <td>Table column 02 of row 01</td>
        </tr>
        <tr>
            <td>Table column 01 of row 02</td>
            <td>Table column 02 of row 02</td>
        </tr>
    </tbody>
</table> 

Hoverable

Table Rows can be made darkened on hovering over.

Demo

table heading 01 table heading 02
Table column 01 of row 01 Table column 02 of row 01
Table column 01 of row 02 Table column 02 of row 02

Code copy

<table class="hoverable">
    <thead>
        <th>table heading 01</th>
        <th>table heading 02</th>
    </thead>
    <tbody>
        <tr>
            <td>Table column 01 of row 01</td>
            <td>Table column 02 of row 01</td>
        </tr>
        <tr>
            <td>Table column 01 of row 02</td>
            <td>Table column 02 of row 02</td>
        </tr>
    </tbody>
</table> 

Form Properties in Material Grammi are inherited from Google's Material Design. We wanted to deliver the best to our community . By Default form elements have no styling but if you would add related classes and use them properly, you can have beautiful design.

Default

Default Form elements are available with material grammi's own form elements.

Demo

Code copy

<input type="text" placeholder="text">
<input type="email" placeholder="email">
<input type="number" placeholder="number">
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<textarea placeholder="textarea"></textarea>
<input type="checkbox" id="example-checkbox"><label for="example-checkbox">checkbox</label>
<label for="radio-ex-1">radio 01</label>
<input type="radio" id="radio-ex-1" name="example-radio">
<label for="radio-ex-2">radio 02</label>
<input type="radio" id="radio-ex-2" name="example-radio">
<label for="radio-ex-3">radio 03</label>
<input type="radio" id="radio-ex-3" name="example-radio">

Material

Material Forms are more designed and focused input elements. They can be controlled easily.

Demo

Code copy

<div class="row">
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-text">Input Text</label>
                        <input type="text" class="Material-form" id="material-form-text" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-pass">Input Password</label>
                        <input type="password" class="Material-form" id="material-form-pass" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-num">Input Number</label>
                        <input type="number" class="Material-form" id="material-form-num" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m6 l6 s12">
                    <div class="pad-10">
                        <label for="material-form-email">Input Email</label>
                        <input type="email" class="Material-form" id="material-form-email" label-color="#9E9E9E">
                    </div>
                </div>
                <div class="col m12 l12 s12">
                    <div class="pad-10">
                        <label for="material-form-textarea">Textarea</label>
                        <textarea class="Material-form" id="material-form-textarea" label-color="#9E9E9E"></textarea>
                    </div>
                </div>
            </div>

Bootstrap

These input elements are designed just like bootstrap form elements.

Demo

Code copy

<div class="row">
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="text" class="form-control" placeholder="text">
                    </div>

                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="password" class="form-control" placeholder="password">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="date" class="form-control" placeholder="date">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="time" class="form-control" placeholder="time">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="number" class="form-control" placeholder="number">
                    </div>
                </div>
                <div class="col m6 s12 l6">
                    <div class="pad-10">
                        <input type="email" class="form-control" placeholder="email">
                    </div>
                </div>
                <div class="col m12 s12 l12">
                    <div class="pad-10">
                        <textarea class="form-control" placeholder="textarea"></textarea>
                    </div>
                </div>
            </div>

Checkbox

Checkbox element is pre configured with ripple effect and different colors are introduced with two type of check boxes.

Demo

Code copy

    <div class="row">
        <div class="col m6 s12 l6">
            <div class="pad-20">
                <div class="checkgrammi checkbox-rotate checkbox-ripple">
                    <label class="input-checkbox indigo">
                        <input type="checkbox" id="c9" checked>
                        <span class="checkbox"></span>
                    </label>
                    <label for="c9" class="label">Checkbox</label>
                </div>
            </div>
        </div>
        <div class="col m6 s12 l6">
            <div class="pad-20">
                <div class="checkgrammi checkbox-ripple">
                    <label class="input-checkbox indigo">
                        <input type="checkbox" id="c9" checked>
                        <span class="checkbox"></span>
                    </label>
                    <label for="c9" class="label">Checkbox</label>
                </div>
            </div>
        </div>
    </div>

Switches

Use switches on various places in your project to make it more interactive and attractive, as switches are responsive in material Grammi.

Demo

To change the color of the switch box add name of switch box infont of switch-box.

Code copy

               <div class="switch-box warning">
                    <input type="checkbox" id="switch-example-6" checked class="switch-box-input">
                    <label class="switch-box-slider" for="switch-example-6"></label>
                    <label for="switch-example-6" class="switch-box-label">warning</label>
                </div>

File Input

There are two types of file inputs designed in material grammi.

Demo

There are three file input styles in Material Grammi.

Default File Upload

Material File Upload

Bootstrap File Upload

Code copy

    <!--Default Upload-->
    <input type="file" name="file3" id="file3">
    <!--Material Upload-->
    <input type="file" name="file" id="file" class="Material-File" />
    <label for="file" class="btn btn-primary">Material File</label>
    <!--Bootstrap Upload-->
    <input type="file" name="file2" id="file2" class="form-control" />

use button classes in <button> , <a> or <input> tags. Just add 'btn' class to style your buttons and for colors there are other classes. There is many more in this section.

Default

Default Buttons are not styled much but you can style them by materialgrammi pre-defined css.

Demo

anchor

Code copy

<a href="#">anchor</a>
<button href="#">button</button>

Standard

Shadowed buttons are standard buttons of materialgrammi.

Demo

Code copy

<a href="#" class='btn'>anchor</a>

Button Colors

There are seven types of button colors which are introduced in materialgrammi that can be used for different purposes.

Demo

btn btn-default

default

btn btn-primary

primary

btn btn-success

success

btn btn-warning

warning

btn btn-danger

danger

btn btn-info

info

btn btn-secondary

secondary

Code copy

        <a href="#" class="btn btn-default">default</a>
        <a href="#" class="btn btn-primary">primary</a> 
        <a href="#" class="btn btn-success">success</a>
        <a href="#" class="btn btn-warning">warning</a>  
        <a href="#" class="btn btn-danger">danger</a> 
        <a href="#" class="btn btn-info">info</a>   
        <a href="#" class="btn btn-secondary">secondary</a>

block

Button block takes whole width of the parent division.

Demo

btn btn-block

Block

Code copy

<a href="#" class="btn btn-default btn-block">Block</a>

Outline

Different styles of outline buttons are very innovative and mostly used by users.

Demo

btn btn-outline-default

default

btn btn-outline-primary

primary

btn btn-outline-success

success

btn btn-outline-warning

warning

btn btn-outline-danger

danger

btn btn-outline-info

info

btn btn-outline-secondary

secondary

Code copy

        <a href="#" class="btn btn-outline-default">default</a>
        <a href="#" class="btn btn-outline-primary">primary</a> 
        <a href="#" class="btn btn-outline-success">success</a>
        <a href="#" class="btn btn-outline-warning">warning</a>
        <a href="#" class="btn btn-outline-danger">danger</a> 
        <a href="#" class="btn btn-outline-info">info</a> 
        <a href="#" class="btn btn-outline-secondary">secondary</a>

Flat Button

Flat Buttons are just like text but when hover over they change there colors.

Code copy

<a href="#" class="btn btn-flat">Flat button</a>

Flat Transparent Colors

These button acts like simple links but when hover over, it will take the hover class of the button color.

Demo

Please hover on the buttons to test the demo.

Code copy

<a href="#" class="btn btn-flat-transparent btn-default">Default</a>
<a href="#" class="btn btn-flat-transparent btn-primary">Primary</a>
<a href="#" class="btn btn-flat-transparent btn-success">Success</a>
<a href="#" class="btn btn-flat-transparent btn-warning">Warning</a>
<a href="#" class="btn btn-flat-transparent btn-info">Info</a>
<a href="#" class="btn btn-flat-transparent btn-danger">Danger</a>
<a href="#" class="btn btn-flat-transparent btn-secondary">Secondary</a>
<a href="#" class="btn btn-flat-transparent btn-dark">Dark</a>
<a href="#" class="btn btn-flat-transparent btn-light">Light</a>

Flat Colors

These buttons does not have additional box-shadows and have more decent looks.

Code copy

<a href="#" class="btn btn-flat btn-default">Default</a>
<a href="#" class="btn btn-flat btn-primary">Primary</a>
<a href="#" class="btn btn-flat btn-success">Success</a>
<a href="#" class="btn btn-flat btn-warning">Warning</a>
<a href="#" class="btn btn-flat btn-info">Info</a>
<a href="#" class="btn btn-flat btn-danger">Danger</a>
<a href="#" class="btn btn-flat btn-secondary">Secondary</a>
<a href="#" class="btn btn-flat btn-dark">Dark</a>
<a href="#" class="btn btn-flat btn-light">Light</a>

Badges

Add Badges to your buttons. Keep the flow of design with the button classes, i.e btn-success and badge will automatically adjust its color with the button.

Demo

just add <span class="badge">[your badge]</span> inside any btn class with btn-[color] class and badge will adjust its color with button.

Deafult 1 Primary 1 success 1 warning 1 info 1 danger 1 secondary 1 Dark 1 light 1

Code copy

<a href="#" class="btn btn-flat btn-default">Deafult <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-primary">Primary <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-success">success <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-warning">warning <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-info">info <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-danger">danger <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-secondary">secondary <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-dark">Dark <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-light">light <span class="badge">1</span></a>

While developing the responsive projects we want our images to be responsive too. Add 'img-responsive' class to make your images responsive. This class will make your image responsive to different type of devices.

Responsive

While developing the responsive projects we want our images to be responsive too. Add img-responsive class to make your images responsive.

Demo

img img-responsive

Code copy

<img src="1.png" class="img img-responsive">

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.

Quick Floats

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>

Clearfix

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 or Hide

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>

Padding

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.

Overall Padding

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>

Horizontal Padding

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>

Vertical Padding

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>

Padding From Left

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>

Padding From Right

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>

Padding From Top

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>

Padding From Bottom

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

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

Overall Margin

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>

Horizontal Margin

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>

Vertical Margin

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>

Margin From Left

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>

Margin From Right

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>

Margin From Top

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>

Margin From Bottom

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>

Borders

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.

Overall Border

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>

Border From Left

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>

Border From Right

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>

Border From Bottom

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>

Border From Top

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>

Border Low Dark

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

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

Border Radius Overall

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>

Top Corners Radius

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>

Bottom Corners Radius

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>

Left Corners Radius

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>

Right Corners Radius

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>

Top Left Corners Radius

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>

Top Right Corners Radius

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>

Bottom Left Corners Radius

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>

Bottom Right Corners Radius

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>

Horizontal Row

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

Dark Horizontal Row

Give a line Break by adding line between two divisions.

Demo

Code copy

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

Light Horizontal Row

Give a line Break by adding line between two divisions.

Demo

Code copy

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

Over-ride

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>

Now control the colors of your element by adding simple color classes as guideline of google's material design. There are many functions of these colors.

color names

We have implemented classes for colors which are very simple. These colors are inherited from Material Design Colors. Background, colors are simply represented by the color name and the value of the color as classes in color-names are given in this section.

Demo

Red

red6

#F44336

red1

#FFEBEE

red2

#FFCDD2

red3

#EF9A9A

red4

#E57373

red5

#EF5350

red6

#F44336

red7

#E53935

red8

#D32F2F

red9

#C62828

red10

#B71C1C

red11

#FF8A80

red12

#FF5252

red13

#FF1744

red14

#D50000

Pink

pink6

#E91E63

pink1

#FCE4EC

pink2

#F8BBD0

pink3

#F48FB1

pink4

#F06292

pink5

#EC407A

pink6

#E91E63

pink7

#D81B60

pink8

#C2185B

pink9

#AD1457

pink10

#880E4F

pink11

#FF80AB

pink12

#FF4081

pink13

#F50057

pink14

#C51162

Purple

purple6

#9C27B0

purple1

#F3E5F5

purple2

#E1BEE7

purple3

#CE93D8

purple4

#BA68C8

purple5

#AB47BC

purple6

#8E24AA

purple7

#8E24AA

purple8

#7B1FA2

purple9

#6A1B9A

purple10

#4A148C

purple11

#EA80FC

purple12

#E040FB

purple13

#D500F9

purple14

#AA00FF

Deep Purple

deeppurple6

#673AB7

deeppurple1

#EDE7F6

deeppurple2

#D1C4E9

deeppurple3

#B39DDB

deeppurple4

#9575CD

deeppurple5

#7E57C2

deeppurple6

#673AB7

deeppurple7

#5E35B1

deeppurple8

#512DA8

deeppurple9

#4527A0

deeppurple10

#311B92

deeppurple11

#B388FF

deeppurple12

#7C4DFF

deeppurple13

#651FFF

deeppurple14

#6200EA

Indigo

indigo6

#3F51B5

indigo1

#E8EAF6

indigo2

#C5CAE9

indigo3

#9FA8DA

indigo4

#7986CB

indigo5

#5C6BC0

indigo6

#3F51B5

indigo7

#3949AB

indigo8

#303F9F

indigo9

#283593

indigo10

#1A237E

indigo11

#8C9EFF

indigo12

#536DFE

indigo13

#3D5AFE

indigo14

#304FFE

Blue

blue6

#2196F3

blue1

#E3F2FD

blue2

#BBDEFB

blue3

#90CAF9

blue4

#64B5F6

blue5

#42A5F5

blue6

#2196F3

blue7

#1E88E5

blue8

#1976D2

blue9

#1565C0

blue10

#0D47A1

blue11

#82B1FF

blue12

#448AFF

blue13

#2979FF

blue14

#2962FF

Light Blue

lightblue6

#03A9F4

lightblue1

#E1F5FE

lightblue2

#B3E5FC

lightblue3

#81D4FA

lightblue4

#4FC3F7

lightblue5

#29B6F6

lightblue6

#03A9F4

lightblue7

#039BE5

lightblue8

#0288D1

lightblue9

#0277BD

lightblue10

#01579B

lightblue11

#80D8FF

lightblue12

#40C4FF

lightblue13

#00B0FF

lightblue14

#0091EA

Cyan

cyan6

#00BCD4

cyan1

#E0F7FA

cyan2

#B2EBF2

cyan3

#80DEEA

cyan4

#4DD0E1

cyan5

#26C6DA

cyan6

#00BCD4

cyan7

#00ACC1

cyan8

#0097A7

cyan9

#00838F

cyan10

#006064

cyan11

#84FFFF

cyan12

#18FFFF

cyan13

#00E5FF

cyan14

#00B8D4

teal

teal6

#009688

teal1

#E0F2F1

teal2

#B2DFDB

teal3

#80CBC4

teal4

#4DB6AC

teal5

#26A69A

teal6

#009688

teal7

#00897B

teal8

#00796B

teal9

#00695C

teal10

#004D40

teal11

#A7FFEB

teal12

#64FFDA

teal13

#1DE9B6

teal14

#00BFA5

green

green6

#4CAF50

green1

#E8F5E9

green2

#C8E6C9

green3

#A5D6A7

green4

#81C784

green5

#66BB6A

green6

#4CAF50

green7

#43A047

green8

#388E3C

green9

#2E7D32

green10

#1B5E20

green11

#B9F6CA

green12

#69F0AE

green13

#00E676

green14

#00C853

lightgreen

lightgreen6

#8BC34A

lightgreen1

#F1F8E9

lightgreen2

#DCEDC8

lightgreen3

#C5E1A5

lightgreen4

#AED581

lightgreen5

#9CCC65

lightgreen6

#8BC34A

lightgreen7

#7CB342

lightgreen8

#689F38

lightgreen9

#558B2F

lightgreen10

#33691E

lightgreen11

#CCFF90

lightgreen12

#B2FF59

lightgreen13

#76FF03

lightgreen14

#64DD17

lime

lime6

#CDDC39

lime1

#F9FBE7

lime2

#F0F4C3

lime3

#E6EE9C

lime4

#DCE775

lime5

#D4E157

lime6

#CDDC39

lime7

#C0CA33

lime8

#AFB42B

lime9

#9E9D24

lime10

#827717

lime11

#F4FF81

lime12

#EEFF41

lime13

#C6FF00

lime14

#AEEA00

yellow

yellow6

#FFEB3B

yellow1

#FFFDE7

yellow2

#FFF9C4

yellow3

#FFF59D

yellow4

#FFF176

yellow5

#FFEE58

yellow6

#FFEB3B

yellow7

#FDD835

yellow8

#FBC02D

yellow9

#F9A825

yellow10

#F57F17

yellow11

#FFFF8D

yellow12

#FFFF00

yellow13

#FFEA00

yellow14

#FFD600

amber

amber6

#FFC107

amber1

#FFF8E1

amber2

#FFECB3

amber3

#FFE082

amber4

#FFD54F

amber5

#FFCA28

amber6

#FFC107

amber7

#FFB300

amber8

#FFA000

amber9

#FF8F00

amber10

#FF6F00

amber11

#FFE57F

amber12

#FFD740

amber13

#FFC400

amber14

#FFAB00

orange

orange6

#FF9800

orange1

#FFF3E0

orange2

#FFE0B2

orange3

#FFCC80

orange4

#FFB74D

orange5

#FFA726

orange6

#FF9800

orange7

#FB8C00

orange8

#F57C00

orange9

#EF6C00

orange10

#E65100

orange11

#FFD180

orange12

#FFAB40

orange13

#FF9100

orange14

#FF6D00

deeporange

deeporange6

#FF5722

deeporange1

#FBE9E7

deeporange2

#FFCCBC

deeporange3

#FFAB91

deeporange4

#FF8A65

deeporange5

#FF7043

deeporange6

#FF5722

deeporange7

#F4511E

deeporange8

#E64A19

deeporange9

#D84315

deeporange10

#BF360C

deeporange11

#FF9E80

deeporange12

#FF6E40

deeporange13

#FF3D00

deeporange14

#DD2C00

brown

brown6

#795548

brown1

#EFEBE9

brown2

#D7CCC8

brown3

#BCAAA4

brown4

#A1887F

brown5

#8D6E63

brown6

#795548

brown7

#6D4C41

brown8

#5D4037

brown9

#4E342E

brown10

#3E2723

grey

grey6

#9E9E9E

grey1

#FAFAFA

grey2

#F5F5F5

grey3

#EEEEEE

grey4

#E0E0E0

grey5

#BDBDBD

grey6

#9E9E9E

grey7

#757575

grey8

#616161

grey9

#424242

grey10

#212121

bluegrey

bluegrey6

#607D8B

bluegrey1

#ECEFF1

bluegrey2

#CFD8DC

bluegrey3

#B0BEC5

bluegrey4

#90A4AE

bluegrey5

#78909C

bluegrey6

#607D8B

bluegrey7

#546E7A

bluegrey8

#455A64

bluegrey9

#37474F

bluegrey10

#263238

Black

#000000

White

#FFFFFF

Code copy

<div class="grey10">This div have background of grey10</div>

Text

Color for text can also be implemented through simple classes and adding text-[color-name] to any element.

Demo

text-grey2

Code copy

<p class="text-grey2">text-grey2</p>

Hover Background

These classes will activate the color specified when user hover on any element.

Demo

hover-grey2

Code copy

<p class="hover-grey2">hover-grey2</p>

Hover Text

Change color of text on hover.

Demo

text-hover-grey2

Code copy

<p class="text-hover-grey2">text-hover-grey2</p>

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. Classes are included, which are ready to use for responsive projects development.

Show

Show any element depend upon device type, using these types of classes.

Demo

Options

Classes Device action
show-on-s Small
show-on-m Medium
show-on-l Large

Example

show-on-s example

show-on-m example

show-on-l example

Code copy

        <p class="show-on-s">show-on-s example</p>
        <p class="show-on-m">show-on-m example</p>
        <p class="show-on-l">show-on-l example</p>

Hide

Hide any element on any type of device.

Demo

Options

Classes Device action
hide-on-s Small
hide-on-m Medium
hide-on-l Large

Example

hide-on-s example

hide-on-m example

hide-on-l example

Code copy

        <p class="hide-on-s">hide-on-s example</p>
        <p class="hide-on-m">hide-on-m example</p>
        <p class="hide-on-l">hide-on-l example</p>

Padding

Padding is made device responsive too. now use these classes and on different devices use different padding.

Demo

Options

Classes Similarity with old classes Effect On
pad-(5,10 ... 60)-on-s Just add -on-s after any padding class Small
pad-(5,10 ... 60)-on-m Just add -on-m after any padding class Medium
pad-(5,10 ... 60)-on-l Just add -on-l after any padding class Large

Example

pad-30-on-s example

pad-60-on-m example

pad-20-on-l example

Code copy

        <p class="pad-30-on-s">pad-30-on-s example</p>
        <p class="pad-60-on-m">pad-60-on-m example</p>
        <p class="pad-20-on-l">pad-20-on-l example</p>

Margin

Margin is made device responsive too. now use these classes and on different devices use different margins.

Demo

Options

Classes Similarity with old classes Effect On
margin-(5,10 ... 60)-on-s Just add -on-s after any margin class Small
margin-(5,10 ... 60)-on-m Just add -on-m after any margin class Medium
margin-(5,10 ... 60)-on-l Just add -on-l after any margin class Large

Example

margin-30-on-s example

margin-60-on-m example

margin-20-on-l example

Code copy

        <p class="margin-30-on-s">margin-30-on-s example</p>
        <p class="margin-60-on-m">margin-60-on-m example</p>
        <p class="margin-20-on-l">margin-20-on-l example</p>

Border Radius

Add Different border radius on different devices.

Demo

use the radius classes as defined in instant helper classes and add (-s, -m or -l) for different devices

radius-10-on-s, radius-5-on-m, radius-15-on-l

Code copy

<p class="pad-20 margin-20 grey3 radiusTL-10-on-s  radius-5-on-m radiusB-15-on-l">radius-10-on-s, radius-5-on-m, radius-15-on-l</p>

Borders

Give different border on different devices now.

Demo

use the border classes as defined in instant helper classes and add (-s, -m or -l) for different devices

border-light-on-s, border-dark-on-m, border-lowdark-on-l

Code copy

<p class="pad-20 margin-20 grey8 text-white border-light-on-s  border-dark-on-m border-lowdark-on-l">border-light-on-s, border-dark-on-m, border-lowdark-on-l</p>

Quick Floats

Quickly float any element to left or right on different devices.

Demo

Options

Classes orientation
left-on-(s,m,l) left
right-on-(s,m,l) right

Code copy

<a class="btn btn-success left-on-m right-on-s">left-on-m right-on-s</a>

Shadows

Shadows are now controllable on different devices.

Demo

Use shadow classes from instant helper classes and add -on-s,m,l to make them responsive

Example

shadow-dark-5-on-s, shadow-dark-2-on-m, shadow-dark-3-on-l

Code copy

                <div class="blue6 shadow-dark-5-on-s shadow-dark-2-on-m shadow-dark-3-on-l  text-white pad-20 margin-10">
                     shadow-dark-5-on-s, shadow-dark-2-on-m, shadow-dark-3-on-l
                </div>

Fonts

Font classes can be controlled through responsive classes which have controlled response on different devices.

Demo

Use typography classes from typography section and add -on-s,m,l to make them responsive

Example

font-20-on-s, font-10-on-m, font-30-on-l

Code copy

                <div class="blue6 font-20-on-s font-10-on-m font-30-on-l text-white pad-20 margin-10">
                     font-20-on-s, font-10-on-m, font-30-on-l
                </div>

Feedback

Developed By Egrammi Studios