To help you build your site as quickly as possible, we have put together a number of utility classes, these classes perform a specific function and can be added to your markup with predictable results.
Utility classes come in 3 varieties, spacing, which let you add marging and padding to any element, colour scheme which lets you easily add a palette of colours to your site and quickly add them to text, backgrounds and borders, and general utility classes which help you do all kinds of stuff without having to dig into a stylesheet.
Spacing classes will let you add padding and margins to an element, spacing is incremented by 5px, giving you plenty of flexibility to space items as needed.
| Class | Description |
|---|---|
| margin-top-5 to margin-top-120 |
Creates a top margin, between 5px and 120px, for example margin-top-55 gives you a top margin of 55px. |
| margin-bottom-5 to .margin-bottom-120 |
Creates a bottom margin, between 5px and 120px, for example margin-bottom-55 gives you a bottom margin of 55px. |
| margin-left-5 to margin-left-120 |
Creates a left margin, between 5px and 120px, for example margin-left-55 gives you a left margin of 55px. |
| margin-right-5 to margin-right-120 |
Creates a right margin, between 5px and 120px, for example margin-right-55 gives you a right margin of 55px. |
| padding-top-5 to padding-top-120 |
Creates a top padding, between 5px and 120px, for example padding-top-55 gives you a top padding of 55px. |
| padding-bottom-5 to padding-bottom-120 |
Creates a bottom padding, between 5px and 120px, for example padding-bottom-55 gives you a bottom padding of 55px. |
| padding-left-5 to padding-left-120 |
Creates a left padding, between 5px and 120px, for example padding-left-55 gives you a left padding of 55px. |
| padding-right-5 to padding-right-120 |
Creates a right padding, between 5px and 120px, for example padding-right-55 gives you a right padding of 55px. |
| no-margin |
Removes a margin that is set by default, for example paragraphs have a bottom margin, using <p class="no-margin></p> would remove it. |
| no-padding |
Removes padding that is set by default, for example the grid systems columns have left and right padding, using <div class="column-3 no-padding"></div> would remove it. |
Ensemble lets you create a colour palette consisting of 10 colours, these are then divided into background colours, border colours and text colours.
| Class | Description |
|---|---|
| background-color-1 to background-color-10 |
The background colours class can be applied directly to an element to give it the corresponding background colour. for example <section class="background-color-3"></section> If you are using the SCSS version of Ensemble the colours are set in your helpers/_config.scss file, and if you are using a theme they are set in themes/THEME-NAME/_config.scss. |
| border-color-1 to border-color-10 |
The border colours class can be applied directly to an element to give it the corresponding border colour. for example <section class="border-color-3"></section> If you are using the SCSS version of Ensemble the colours are set in your helpers/_config.scss file, and if you are using a theme they are set in themes/THEME-NAME/_config.scss. |
| text-color-1 to text-color-10 |
The text colours class can be applied directly to an element to give it the corresponding text colour. for example <p class="text-color-3"></p> If you are using the SCSS version of Ensemble the colours are set in your helpers/_config.scss file, and if you are using a theme they are set in themes/THEME-NAME/_config.scss. |
The general utility classes can be used to achieve various commonly needed effects and functions.
| Class | Description |
|---|---|
| float-left |
Floats an element to the left |
| float-right |
Floats an element to the right |
| float-none |
Removes a float already on an element, or tells an element not to inherit its parents float. |
| text-right |
Aligns text to the right. |
| text-left |
Aligns text to the left. |
| text-center |
Centers text in its container. |
| text-justify |
Justifies text in its container. |
| text-uppercase |
Sets text to be all capitals. |
| text-lowercase |
Sets text to be all lowercase. |
| text-capitalize |
Capitalises the first letter of a sentance. |
| position-absolute |
Positions an element absolutely. |
| position-relative |
Positions an element relatively. |
| position-fixed |
Fixes the position of an element. |
| hide |
sets an item to be hidden, using display: none;, please not that items set to display: none; are removed from the screen and no longer occupy space. |
| invisible |
sets an item to be hidden, using visibility: hidden;, please note that items set to visibility: hidden; are still present onscreen and still occupy space. |
| text-bold |
Sets font weight to 700, using font-weight: 700;. |
| text-italic |
Sets font style to italic, using font-style: italic;. |
| display-inline-block |
Sets an item to display inline block using display: inline-block;. |
| center-image |
Centers an image using display: block; and margin: 0 auto;. |
| full-width |
Gives an element a 100% width, by using width: 100% |
| line-height |
Gives text the default Ensemble line height of 1.65, this can be used on headings that may need to wrap. |