Helper classes
special CSS classes for the most common tweaks & modifications.
Background colors
.bg-white
.bg-azure
.bg-blue-alt
.bg-purple
.bg-yellow
.bg-gray
.bg-gray-alt
.bg-black
.bg-blue
.bg-green
.bg-red
.bg-orange
Font colors
.font-gray
.font-gray-dark
.font-black
.font-blue
.font-blue-alt
.font-azure
.font-purple
.font-yellow
.font-green
.font-red
.font-orange
.font-white
Margins
| 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 |
Paddings
| 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 |
Font sizes
.font-size-10
.font-size-11
.font-size-12
.font-size-13
.font-size-14
.font-size-15
.font-size-16
.font-size-17
.font-size-18
.font-size-20
.font-size-23
.font-size-28
.font-size-35
Resets
| 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. |
Text
| 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 |