TED Swatches

Containers

Content, including grids, should generally be wrapped by a block element having a CSS container class. The container is centered in the page and given horizontal padding and a maximum width to make sure their content is aligned correctly, leaving a gutter for comfortable reading on all screen sizes.

Example use (HAML):

.container
  %p Some text

Introduction to grids

TED's 12-column responsive grid system can be used to produce a variety of columnar page layouts across screen sizes. The premise of a grid system is similar to designing with HTML tables: the grid consists of rows, each row consists of 12 columns. A single element can span anywhere between 1 and 12 of those columns.

For example:

6

3

.container
  .row
    .col-sm-6
      6
    .col-sm-6
      6

  .row
    .col-sm-3
      3
    .col-sm-3
      3
    .col-sm-3
      3
    .col-sm-3
      3

Aside from not being criminally bad semantics, this grid system has some unique advantages over HTML tables. On small screen sizes like phones, for example, the columns in the above demo (which normally take up a fluid amount of width as available) "collapse" so that each column takes up the full width of the device. That way, columns never become too narrow. You can resize your browser window to see this effect.

You can tweak the breakpoint at which a column collapses, and the size it collapses to, by targeting column spans at size groups. Th "-sm-" in the class names you see above do exactly this. The anatomy of a grid column CSS class is:

.col-{{size group}}-{{span}}

For example, if you resize your screen, you'll notice that the red boxes below stay stacked in a row except at the very smallest screen sizes, whereas the second set of gray boxes collapses into individual rows as soon as the browser becomes narrower than 1024px:

4

Three different size groups exist:

Class prefix	Breakpoint:	Explanation:
`.col-xs-`	480px	Takes effect at screen sizes equal to and above 480px. Columns will be "collapsed" into a vertical list at smaller screen sizes.
`.col-sm-`	768px	Takes effect at screen sizes equal to and above 768px.
`.col-lg-`	1024px	Takes effect at screen sizes equal to and above 1024px.

Combining grid size groups

You can combine multiple size group classes on the same element. For example, in the demonstration below, the sidebar element spans 4 columns at the "xs" breakpoint, but only 3 columns at the "lg" breakpoint:

Sidebar

Content

.container
  .row
    .col-sm-4.col-lg-3
      Sidebar
    .col-sm-8.col-lg-9
      Content

Grid offsets

At grid sizes "sm" and above, you can specify "offsets" by adding an offset CSS class to your span element. An offset allows you to pad your grid with empty columns without having to introduce empty HTML elements.

For example:

4

4 offset 4

3 offset 3

6 offset 6

.container
  .row
    .col-sm-4
      4
    .col-sm-4.col-sm-offset-4
      4 offset 4
  .row
    .col-sm-3.col-sm-offset-3
      3 offset 3
    .col-sm-3.col-sm-offset-3
      3 offset 3
  .row
    .col-sm-6.col-sm-offset-6
      6 offset 6

Like the column classes themselves, offset classes can be targeted at specific size groups. The anatomy of an offset class is:

.col-{{size group}}-offset-{{span}}

{{span}} indicates the number of columns to offset the element by.

Grid nesting

It's possible to nest grid rows within columns.

12

6

.container
  .row
    .col-lg-12
      12
      .row
        .col-lg-6
          6
          .row
            .col-lg-6
              6
            .col-lg-6
              6
      .col-lg-6
        6

Demonstration of grid sizes

This section contains some demonstrations to help you picture what grids look like at their absolute narrowest.

Please note that these demonstrations have been artificially capped to show you what grids look like at the breakpoints where each size group takes over.

Example: extra small grid columns at their narrowest

4

Example: small grid columns at their narrowest

2

4

Example: large grid columns at their narrowest

1

4

Evenly divided "n-up" grids

An alternative n-up grid system also exists in Roadrunner. This system divides a row's columns evenly, with the divisor specified at the row level instead of the column level. For example:

.container
  .row.row-sm-4up.row-lg-6up
    .col Item 1
    .col Item 2
    .col Item 3
    .col Item 4
    .col Item 5
    .col Item 6
    .col Item 7
    .col Item 8
    .col Item 9
    .col Item 10
    .col Item 11
    .col Item 12

The 12 items will be divided evenly into 3 rows of 4 columns at the "sm" (768px) breakpoint and into 2 rows of 6 columns at the "lg"(1024px) breakpoint. This approach isn't as versatile as the general grid system, but can be useful for simplifying horizontal search result layouts, etc.

This table (below) shows which divisions are available at which breakpoints. Per the example above, multiple classes may be specified for the same row to divide columns differently at different breakpoints.

	`2up`	`3up`	`4up`	`5up`	`6up`
`.row-xs-`	✓	✓
`.row-sm-`	✓	✓	✓
`.row-lg-`	✓	✓	✓	✓	✓

Except on older browsers (IE 8 and below), this grid system without requiring the use of clearfixes:

Example: "n-up" grids

Buffalo buffalo buffalo.