Media WebUI

Overview

The grid system is divided into 20 columns, and there are 3 grid types as follows:

content - Content type rows and columns have no padding, so they are ideal for precise positioning or if you want components to be close to each other.
form - Form type rows and columns have a 0.313rem padding all around, so will give a default separation of components.
table - Table rows and columns also have a 0.313rem padding, and in addition include some flexbox capabilities and an outline border on all rows and columns.

Example
Heading
Navigation
Main content
Markup
<div class="container">
  <div class="form-row">
    <div class="form-col-20 text-center respond-bp-3-under">
      <div class="panel background-accent-1-light">
        Heading
      </div>
    </div>  
  </div>
  <div class="form-row">
    <div class="form-col-4 respond-bp-3-under">
      <div class="panel background-accent-2-light height-xl">
        Navigation
      </div>
    </div>
    <div class="form-col-16 respond-bp-3-under">
      <div class="panel background-accent-4-light height-xl">
        Main content
      </div>
    </div>
  </div>
</div>

You may have noticed the "respond-bp-3-under" media flags. These are simply saying that these columns are responsive, so when the screen gets to a small size (based on the amount defined in _settings.scss), then move this column to the next line and expand to the full width of the container. If you adjust the width of your browser you can see it in action.

Content type rows and columns

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="content-row">
  <div class="content-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="content-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="content-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="content-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
</div>

This is quite a basic scenario, and here you can see that the row is made up of 4 equal columns, each taking up one quarter of the full 20 column width.

Form type rows and columns

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="form-row">
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum
    </div>
  </div>
</div>

In this case we now have some separation between each column. However, if you want more separation just add one of the col-padding-* classes to the grid parent element or add pad-* classes to the required columns. If you prefer, you could wrap the content of each column with a body or panel container. See the Padding section for more on various padding options.

One important aspect to note about the content and form grid types is that you don't need to repeat the use of rows when nesting columns, and this is also the method of setting varying numbers of columns per row at different screen sizes.

Table type rows and columns

The table grid is responsive and does not have borders by default. So, to use the table grid in default mode requires the table-row and table-col classes. Each column will only expand to accomodate its content. Elements such as buttons or textboxes with relative widths will expand or shrink to the size of the column which is determined by the remaining row space available.

Example
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="table-row col-padding-md">
  <div class="table-col background-accent-1-light">
    Lorem ipsum Lorem ipsum Lorem ipsum
  </div>
  <div class="table-col background-success-light">
    Lorem ipsum
  </div>
  <div class="table-col background-accent-2-light">
    Lorem ipsum
  </div>
  <div class="table-col background-accent-4-light">
    Lorem ipsum
  </div>
</div>

Table rows and columns are a bit different to the other two grid types. Besides having the ability to show borders, they are designed primarily for displaying content in a tabular format and implement some flexbox behaviours, so each column will be of equal height based on the tallest column.

As with content and form type grids, you can add media breakpoint flags in order to control when columns respond at different screen sizes. But they differ in 2 key areas: Firstly, when nesting table columns you must add a table-row for each nested level. Secondly, if you want to add spacing between any rows using say row-spacing-* classes, then you will also need to wrap each group of separated rows with any div tag that has the class table-group.

Default Mode

NOTE: A wrapper with the table-group class is not required when using the default mode. The purpose of a wrapper is to ensure proper rendering of borders.

The following example shows how to use table columns in grid mode. Grid mode is where all columns have a size specified and will be rendered with borders. Column sizes must not add up to more than 20 in a single row. You will see that table grids are used extensively throughout the documentation in this website.

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="container">
  <div class="table-row">
    <div class="table-col-5 respond-bp-2-under">
      <div class="panel background-accent-1-light">
        Lorem ipsum
      </div>
    </div>
    <div class="table-col-5 respond-bp-2-under">
      <div class="panel background-accent-1-light">
        Lorem ipsum
      </div>
    </div>
    <div class="table-col-5 respond-bp-2-under">
      <div class="panel background-accent-1-light">
        Lorem ipsum
      </div>
    </div>
    <div class="table-col-5 respond-bp-2-under">
      <div class="panel background-accent-1-light">
        Lorem ipsum
      </div>
    </div>
  </div>
</div>

Nesting columns

The following example shows how to nest columns using both form type columns and content type columns together. Content columns have no padding, so using them to wrap groups of form columns gives you the right padding for all columns. Using form columns only will create visual groups of columns, and this is one of the advantages of using the nested approach to responsive grids.

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="form-row">
  <div class="form-col-20 respond-bp-4-under">
    <div class="content-col-10 respond-bp-3-under">
      <div class="form-col-10 respond-bp-2-under">
        <div class="panel background-accent-1-light">
          Lorem ipsum
        </div>
      </div>
      <div class="form-col-10 respond-bp-2-under">
        <div class="panel background-accent-1-light">
          Lorem ipsum
        </div>
      </div>
    </div>
    <div class="content-col-10 respond-bp-3-under">
      <div class="form-col-10 respond-bp-2-under">
        <div class="panel background-accent-1-light">
          Lorem ipsum
        </div>
      </div>
      <div class="form-col-10 respond-bp-2-under">
        <div class="panel background-accent-1-light">
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>  
</div>

This markup will display 1 row of 4 columns at a large screen size down to medium, 2 rows of 2 columns at a medium screen size down to small, and 4 rows of 1 column at the small size or less.

You may be thinking that the markup is a bit verbose, and there are different approaches offered by different frameworks. In fact, there are pros and cons to each method. One method might be to have helper classes for each screen size and column count that can all be applied to the same column definition, but if you had 5 screen size steps it could get a bit strange. So in WebUI, we opted for the nesting approach - it does seem a bit more extensible.

Nested Table Columns

If you are using table-col or table-col-* classes, then you need to add a table-row for each nested level.

Equal width columns

WebUI supports any number of equal width columns within the maximum of 20 for all grid types. The classes used take the format [column type]-col-eq-[number of equal columns], for example form-col-eq-9. However, you won't find classes for the number of columns being 1, 2, 4, 5, 10, or 20, as these are divisors of 20. There is a lot of power and flexibility here as you are able to mix and match column types as well as equal columns and non-equal columns, allowing you to group and split columns is any number of ways, and all responsive too.

Of course, much of this can also be achieved without a grid system and WebUI provides full support for flexbox. These grid capabilities are retained for backwards compatibility. See the Flexbox section for more information on the flexbox approach.

Equal height columns

Table type columns have column height equalisation built in by default, so you don't have to add anything to get equal height columns. However, you might want to have equal height columns for content and form type columns also. You can easily do that by simply using a table row instead of content-row or form-row. You can, of course, also add the height-full class to any content inside columns to make the content fill the column.
Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="table-row">
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
      <br />
      Lorem ipsum
      <br />
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col-5 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
    </div>
  </div>
</div>

Fixed width and variable columns

You can combine fixed width and normal percentage based columns by using a combination of width-*, width-adjacent-*, and width-respond-* classes on content-*, form-*, and table-* column types.
Example
Lorem ipsum
Lorem ipsum
Markup
<div class="table-row">
  <div class="form-col width-lg width-respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
    </div>
  </div>
  <div class="form-col width-adjacent-lg width-respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-full">
      Lorem ipsum
    </div>
  </div>
</div>

Grid Row Coloring

Classes

Class
Description
row-odd-color-*
Sets the foreground color of alternate grid rows starting with the first row.
row-even-color-*
Sets the foreground color of alternate grid rows starting with the second row.
row-color-hover-*
Sets the foreground color of a grid row when a hover event is triggered.
row-color-focus-*
Sets the foreground color of a grid row when focus is received.
row-odd-background-*
Sets the background color of alternate grid rows starting with the first row.
row-even-background-*
Sets the background color of alternate grid rows starting with the second row.
row-background-hover-*
Sets the background color of a grid row when a hover event is triggered.
row-background-focus-*
Sets the background color of a grid row when focus is received.
Example
Lorem
ipsum
dolor
Lorem
ipsum
dolor
Lorem
ipsum
dolor
Lorem
ipsum
dolor
Markup
<div class="container row-even-background-primary row-even-color-accent-1 row-background-hover-accent-1-light">
  <div class="table-row text-left">
    <div class="table-col-4">Lorem</div>
    <div class="table-col-8">ipsum</div>
    <div class="table-col-8">dolor</div>
  </div>
  <div class="table-row text-left">
    <div class="table-col-4">Lorem</div>
    <div class="table-col-8">ipsum</div>
    <div class="table-col-8">dolor</div>
  </div>
  <div class="table-row text-left">
    <div class="table-col-4">Lorem</div>
    <div class="table-col-8">ipsum</div>
    <div class="table-col-8">dolor</div>
  </div>
  <div class="table-row text-left">
    <div class="table-col-4">Lorem</div>
    <div class="table-col-8">ipsum</div>
    <div class="table-col-8">dolor</div>
  </div>
</div>

Media Breakpoint Utilities

Breakpoints can be used on any grid columns.

Breakpoint utility classes are not unique to the grid system, but are available to use anywhere. The grid system columns are based on percentage widths, so in that sense are responsive. However, making columns take the full width if their containing element at various breakpoint sizes requires a further step, by adding one of the respond-* classes.

Naming convention

Breakpoints are numbered 1 to 5, with 1 being the smallest. A breakpoint suffix can be added to most utility class using the format -bp-[breakpoint number]-[direction]. The direction is either under or over.

For example -bp-1-under or -bp-3-over.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="content-row">
  <div class="content-col-6 respond-bp-2-under">     
    <div class="panel border-sm border-accent-4 background-accent-1-light height-md">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="content-col-14 respond-bp-2-under">
    <div class="panel border-sm border-accent-4 background-accent-1-light height-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

See the Media Breakpoints section for more information on using breakpoints.