## HELPER CLASSES

## TEXT STYLES You can use classes which names are `.font-bold, .font-italic, .font-underline, .font-line-through, .font-overline`

- more_vert

Normal

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

Bold

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

Italic

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

Underline

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

Line Through

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

Overline

Default text

Text pink color

Text cyan color

Text teal color

Text orange color

Text blue grey color

## FONT SIZES You can use the classes which samples are `.font-6, .font-10, .font-24` The number of can use between 6 - 50px which are near the .font-

- more_vert

font-6
font-10
font-12
font-15
font-20
font-24
font-32
font-40
font-42
font-45
font-48
font-50

## TEXT ALIGNS You can use classes which names are `.align-left, .align-center, .align-right, .align-justify`

- more_vert

Align Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Center

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## MARGIN & PADDING SPACES You can use classes which names are `.m-t-10, .m-t--10, .m-r-5, .p-t-10, .p-b-5`

- more_vert

Margins

Margin Top 10px → `.m-t-10`
Margin Top 0px → `.m-t-0`
Margin Top -10px → `.m-t--10`
Margin Left 35px → `.m-l-35`
Margin Left 0px → `.m-l-0`
Margin Left -35px → `.m-l--35`
Margin Bottom 15px → `.m-b-15`
Margin Bottom 0px → `.m-b-0`
Margin Bottom -20px → `.m-b--20`
Margin Right 30px → `.m-r-30`
Margin Right 0px → `.m-r-0`
Margin Right -30px → `.m-r--30`
ALL Margin 0px → `.margin-0`

Paddings

Padding Top 10px → `.p-t-10`
Padding Top 0px → `.p-t-0`
Padding Left 35px → `.p-l-35`
Padding Left 0px → `.p-l-0`
Padding Bottom 15px → `.p-b-15`
Padding Bottom 0px → `.p-b-0`
Padding Right 30px → `.p-r-30`
Padding Right 0px → `.p-r-0`
ALL Padding 0px → `.padding-0`

## SPECIAL CLASSES FOR EVERY BROWSERS When the user start the usage this theme, we put the browser info inside the `html` as class

- more_vert

Putting classes are `.ie10, .ie11, .edge, .opera, .chrome, .firefox, .safari` to class inside of `html` element. So you can create new classes for run only you specified browser(s).

Example

    /* It will be work only IE10 */
    html.ie10 .menu .list {
       background-color: #CC0000;
    }
    /* It will be work only Google Chrome */
    html.chrome .right-sidebar .header {
       font-size: 15px;
       font-weight: bold;
    }