Boxed layout options
Boxed layout backgrounds
Color schemes

More color schemes will be available soon!

Core Helpers 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.

Backgrounds

The background colors helper classes add different bg colors to all kinds of AUI elements. Available background colors CSS helper classes are listed below.

Font colors

The font colors helper classes can change the default color for an elements text content.

.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

Font sizes

The font sizes helper classes can change an elements text size.

.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

The general resets helper classes are utilities that, for example, remove borders from elements, centeres 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.

Text

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

Margins

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 mrg25R class 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

Paddings

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 pad25R class 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