Thanks to the solid modular AgileUI arhitecture, modal windows customizations are very flexible and easy to apply.
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.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
Click to change the layout color scheme. You can associate different color schemes for layouts and main content elements.
The background colors helper classes add different bg colors to all kinds of AUI elements. Available background colors CSS helper classes are listed below.
The box shadows helper classes add different color shadows to all kinds of AUI elements. If the element has a border width and style defined, the box shadow helper will color it.
The border color helper classes add different border colors to all kinds of AUI elements that have a border width and style defined.
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, 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 |
| .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 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 |
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 |