We created special CSS classes for the most common tweaks & modifications. They can be added to existing elements or used to create new ones with different styles, sizes, positions, etc.
The background colors helper classes add different bg colors to all kinds of elements. Available background colors CSS helper classes are listed below.
The font colors helper classes can change the default color for an elements text content.
The font sizes helper classes can change an elements text size.
The general resets helper classes are utilities that, for example, remove borders from elements, centers divs, removes shadows, etc.
| Name | Description |
|---|---|
| .float-none | Removes floats |
| .float-left | Floats element to the left |
| .float-right | Floats element to the right |
| .opacity-100 | Sets the element opacity to 100% |
| .opacity-80 | Sets the element opacity to 80% |
| .opacity-60 | Sets the element opacity to 60% |
| .opacity-30 | Sets the element opacity to 30% |
| .clearfix | Clears floats for contained elements |
| .clear | Clears floats from elements above |
| .clear-none | Removes clear floats |
| .hide | Hides element with display: none |
| .display-block | Transforms non-block to block elements |
| .display-inline | Adds display: inline-block to elements |
| .center-margin | Centers block elements |
| .center-div | Like .center-margin, but adds float:none & text-align: center |
| .no-border | Changes the border color to transparent |
| .border-top | Adds a 1px top border that inherits the color from any other class with border color defined. |
| .remove-border | Removes the border alltogether from an element |
| .divider | Adds a 1px gray line between elements and clears floats. |
| .width-reset | Resets width to inherited values |
| .no-shadow | Removes box shadows |
| .transparent | Makes background, border and shadow colors transparent |
| .disabled | Makes the element look disabled. |
The text helper classes set font weights, styles, alignments and transforms for elements they are applied to.
| Name | Description |
|---|---|
| .text-center | Aligns text to center |
| .text-left | Aligns text to left |
| .text-right | Aligns text to right |
| .text-justify | Aligns text to justify |
| .font-bold | Makes text bold |
| .font-normal | Removes text bold |
| .text-transform-none | Reverts text transform to inherited |
| .text-transform-upr | Uppercase text |
| .text-transform-low | Lowercase text |
| .text-transform-cap | Capitalizes text |
| .font-italic | Makes text italic |
| .font-none | Removes text style |
The margins spacing helper classes are utilities that modify all margins for an element or a single one. If you would like to add a 25px right margin to an element you would add the .mrg25Rclass to it.
| Name | Description |
|---|---|
| .mrg5A | Adds 5px all margins |
| .mrg5T | Adds 5px top margin |
| .mrg5R | Adds 5px right margin |
| .mrg5B | Adds 5px bottom margin |
| .mrg5L | Adds 5px left margin |
| .mrg10A | Adds 10px all margins |
| .mrg10T | Adds 10px top margin |
| .mrg10R | Adds 10px right margin |
| .mrg10B | Adds 10px bottom margin |
| .mrg10L | Adds 10px left margin |
| .mrg15A | Adds 15px all margins |
| .mrg15T | Adds 15px top margin |
| .mrg15R | Adds 15px right margin |
| .mrg15B | Adds 15px bottom margin |
| .mrg15L | Adds 15px left margin |
| .mrg20A | Adds 20px all margins |
| Name | Description |
|---|---|
| .mrg20T | Adds 20px top margin |
| .mrg20R | Adds 20px right margin |
| .mrg20B | Adds 20px bottom margin |
| .mrg20L | Adds 20px left margin |
| .mrg25A | Adds 25px all margins |
| .mrg25T | Adds 25px top margin |
| .mrg25R | Adds 25px right margin |
| .mrg25B | Adds 25px bottom margin |
| .mrg25L | Adds 25px left margin |
| Name | Description |
|---|---|
| .mrg0A | Removes all margins |
| .mrg0T | Removes top margin |
| .mrg0R | Removes right margin |
| .mrg0B | Removes bottom margin |
| .mrg0L | Removes left margin |
The paddings spacing helper classes are utilities that modify all paddings for an element or a single one. If you would like to add a 25px right paddings to an element you would add the pad25Rclass to it.
| Name | Description |
|---|---|
| .pad5A | Adds 5px all mpadding |
| .pad5T | Adds 5px top padding |
| .pad5R | Adds 5px right padding |
| .pad5B | Adds 5px bottom padding |
| .pad5L | Adds 5px left padding |
| .pad10A | Adds 10px all mpadding |
| .pad10T | Adds 10px top padding |
| .pad10R | Adds 10px right padding |
| .pad10B | Adds 10px bottom padding |
| .pad10L | Adds 10px left padding |
| .pad15A | Adds 15px all mpadding |
| .pad15T | Adds 15px top padding |
| .pad15R | Adds 15px right padding |
| .pad15B | Adds 15px bottom padding |
| .pad15L | Adds 15px left padding |
| .pad20A | Adds 20px all mpadding |
| Name | Description |
|---|---|
| .pad20T | Adds 20px top padding |
| .pad20R | Adds 20px right padding |
| .pad20B | Adds 20px bottom padding |
| .pad20L | Adds 20px left padding |
| .pad25A | Adds 25px all mpadding |
| .pad25T | Adds 25px top padding |
| .pad25R | Adds 25px right padding |
| .pad25B | Adds 25px bottom padding |
| .pad25L | Adds 25px left padding |
| Name | Description |
|---|---|
| .pad0A | Removes all mpadding |
| .pad0T | Removes top padding |
| .pad0R | Removes right padding |
| .pad0B | Removes bottom padding |
| .pad0L | Removes left padding |
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
