Rows and columns

When to use

You will often want to divide content on a page into columns. This is often seen when creating a navigation panel or when trying to fit content above-the-fold to make it more immediately accessible to users. The row and column shortcodes enable you to make appealing layouts with ease!

Bootstrap grids

We use a common development framework called Bootstrap to do a lot of the heavy lifting on the site. Our rows and columns are based on Bootstrap’s grid system. Basically, Bootstrap says that every row is made up of a maximum of 12 column-widths.  You can combine these column-widths to produce columns as various width. The only constraint is that all of the column-widths in a row should add to 12. Otherwise, strange things can happen. You can have many rows on a single page, and you can have rows within rows as well (nested rows).
A deeper dive here: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Rows

[row][endrow]

[row][endrow] are paired shortcodes that tell WordPress to expect columns. Any layout area must begin with [row] and end with [endrow]. The row shortcodes have no attributes.

Columns

[column number="aNumber"][endcolumn]

Every column in your grid will begin with [column number="aNumber"] and end with [endcolumn]. The number attribute determines the width of the column. The value of number must be a positive integer and in any row the values of the number attributes should add to 12.

Putting it together

Two equal width columns

1. Open a new row:
   [row]
2. Decide how many columns you want. Here we want 2 columns of equal length:
   [column number="6"]Column 1 Content[endcolumn][column number="6"]Column 2 Content[endcolumn]
3. Close the row:
   [endrow]

Results

Note: By default columns and rows do not have borders or backgrounds. Here we use the [pane] shortcode to help visualize the grid.

Example in use: https://www.library.illinois.edu/mux/research/musicguides/

Two rows: one with 25%/75% columns another with 75%/25% columns

1. Open the first row:
   [row]
2. We want the first column to be 25%: 25% of 12 is 3, so the number attribute of our first column should be 3. 75% of 12 is 9, so the number attribute of our second column should have the value 9. the total column-width is 3 + 9 = 12
   [column number="3"]Row 1 Column 1 Content[endcolumn][column number="9"]Row 1 Column 2 Content[endcolumn]
3. Close the first row:
   [endrow]
4. Open the second row:
   [row]
5. We flip the attribute vales from 3/9 to 9/3 to get our 75%/25% columns
   [column number="9"]Row 2 Column 1 Content[endcolumn][column number="3"]Row 2 Column 2 Content[endcolumn]
6. Close the second row:
   [endrow]

Results

Example in use: https://www.library.illinois.edu/ias/sacollection/sa_countries/

Nested columns

Occasionally, you will need to sub-divide columns. This can be easily accomplished with our shortcodes. Here we create two 50% columns in one row. In the first column of that row, we create two nested rows of three equal columns.

1. Open a new row:
   [row]
2. Open the first column
   [column number="6"]
3. Open the first nested row:
   [row]
4. Add the nested columns:
   [column number="4"]Row 1, Column 1, Nested Row 1, Column 1 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 1, Column 2 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 1, Column 3 Content[endcolumn]
   
5. Close the first nested row:
   [endrow]
6. Open the second nested row:
   [row]
7. Add the nested columns:
   [column number="4"]Row 1, Column 1, Nested Row 2, Column 1 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 2, Column 2 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 2, Column 3 Content[endcolumn]
   
8. Close the second nested row:
   [endrow]
9. Close the first column:
   [endcolumn]
10. Add the second column of the main row:
    [column number="6"]Row 1, Column 2[endcolumn]
11. Close the main row:
    [endrow]

Results

Why this is important

In days of yore (and sometimes even in OpenCMS), developers often used HTML tables to create layouts. This approach was intuitive for developers, but it created serious accessibility issues for some users. Our column shortcode solution solves these problems and adds semantic mark-up to enhance discoverability.

More on the demise of table-based design can be found here: http://daviddickball.uk/2011/04/why-you-shouldnt-use-tables-for-layout-ever/