Grids

The default grids follow the same rules as Bootstrap Grids, with a little added help to support RTL.

All the columns have horizontal padding equal to half of the gutter width. This means when they are displayed inline their combined horizontal padding equals the gutter width. The rows have negative horizontal margin which is also half that of the gutter width which essentially pulls the first and the last column back in line back to the desired width.

Never use .col-xx-x's by themselves, always put them inside of a .row and never put anyting else directly inside of a row otherwise your grid will be misaligned.

Grid with standard container

The following example demonstrates the 'working area' if you like of the columns. Note that the text sits on the edge of the grid (vertical margins added for demonstration purposes).

Aligns on the edge of the grid - .col-xs-12

.col-sm-6 col-md-3

.col-sm-8

.col-sm-4

.col-sm-6

Grid with 'inset' container

Sometimes our UX&D require our pages to have sections that sit on a different background colour. In these cases we need the background to sit on the edge of the grid and the text to be 'inset' at an amount equal to the gutter width.

In order to do this we need to use a different container class, .container-inset. Then it is possible to use our helper classes to apply the background colours to the rows.

The following example uses the .container-inset and applies the .bg-theme to the rows in order to give the whole page a background colour.

This time the text sits inset by the same amount as the gutter.

Aligns inset by the gutter width - .col-xs-12

.col-sm-6 col-md-3

.col-sm-8

.col-sm-4

.col-sm-6

Grid with mixed container usage

We can use a combination of the containers when we need the text to align to the edge on things like headers, page titles and footers but areas of the main content sit on backgrounds.

The following example uses a standard container for the page title and introduction paragraph but then switches to an inset container. Inside of the inset conatainer there are numerious .rows with a number of helper/utility classes used for spacing and background colours.

Page title

Below you will find an 'inset' container, all backgrounds are aligned to the edge of the grid so that everything down the edge is flush.

<components>

Utilities classes

There are certain helpers that can be used with components, these include:

Responsive visibility classes

SUI inherits all of the responsive visibility clases from Bootstrap.

Clearing classes

.clear: Sets clear: both on the element at all breakpoints.
.clear-md: Sets clear: both on the element for md breakpoint.
.clear-lg: Sets clear: both on the element for lg breakpoint.
.clearfix: Forces a container to clear it's children.

Horizontal alignment

.pull-left: Floats an element left, (right for RTL languages).
.pull-right: Floats an element right (left for RTL languages).
.center-block: Removes any floats and centers with margin: auto.

Vertical alignment

.full-width-xs: Gives negative left & right margins on an element to make them appear full width for the xs breakpoint.
.attached-0, .attached-10, .attached-20, .attached-30: Pulls an element up with negative margin ranging from 0-30px.
.margin-bottom-0 .margin-bottom-10, .margin-bottom-sm-10, .margin-bottom-md-10 .margin-bottom-20, .margin-bottom-sm-20, .margin-bottom-md-20 .margin-bottom-30, .margin-bottom-sm-30, .margin-bottom-md-30: Forces a margin-bottom ranging from 0-30px on either:
all breakpoints or up to and including the small breakpoint (-sm-) or the medium breakpoint (-md-) and over.
.padding-top-0 .padding-top-10, .padding-top-sm-10, .padding-top-md-10 .padding-top-20, .padding-top-sm-20, .padding-top-md-20 .padding-top-30, .padding-top-sm-30, .padding-top-md-30: Forces a padding-top ranging from 0-30px on either:
all breakpoints or up to and including the small breakpoint (-sm-) or the medium breakpoint (-md-) and over.
.padding-bottom-0 .padding-bottom-10, .padding-bottom-sm-10, .padding-bottom-md-10 .padding-bottom-20, .padding-bottom-sm-20, .padding-bottom-md-20 .padding-bottom-30, .padding-bottom-sm-30, .padding-bottom-md-30: Forces a padding-bottom ranging from 0-30px on either:
all breakpoints or up to and including the small breakpoint (-sm-) or the medium breakpoint (-md-) and over.

Toggling content

.show: Forces an element to be shown (display:block)
.hidden: Forces an element to be hidden (display:none) Note: This also hides from screenreader users, if you want to provide text for screen readers use .sr-only instead.
.invisible: Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible
.sr-only: Hides an element to all devices except screen readers.
.sr-only-focusable: Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user). The element will need to be focusable (e.g a link or any element with a tab-index="0" attribute).
.text-hide: Helps replace an element's text content with a background image.

Border removal

.no-border: Removes all borders from an element.
.no-border-md: Removes all borders from an element on medium breakpoint and above.
.no-border-lg: Removes all borders from an element on large breakpoint and above.