# IBM Grid

The package of IBM’s layout code. Find installation instructions on the Github repo.

## 0. Get IBM Grid Checker

Before using the grid, it helps to see it while you work. That is why we have published a Chrome and Firefox extension called the IBM Grid Checker. Now you can see the grid on any page you are at. Just press CTRL+G.

Get IBM Grid Checker for Chrome

Get IBM Grid Checker for Firefox

## 1. Adding the Container Class

Whenever using the grid, your content should have the IBM container class (.ibm) as a parent once. This means you never want the container class to have another parent with the IBM container class. The IBM container class specifies and centers a max-width of 1650px.

Tip: You can have multiple instances of the IBM container class on a page. They just can't cascade each other.

Apply the IBM container class to either once div or the body:

    <div class="ibm" style="background: #a3a4a3">
      The grid container without any columns.
    </div>

The grid container without any columns.

## 2. Specifying Widths

The IBM Grid has three screen width breakpoints. Each breakpoint allows up to a certain amount of columns:

- sm breakpoint (0px+) = 4 columns
- md breakpoint (640px+) = 8 columns
- lg breakpoint (1056px+) = 16 columns

columns will wrap as the sum of col widths exceed that breakpoint's max column width.

Tip: Before specifying width classes, direct children will take full width of the container at every breakpoint to support mobile-first coding. This means that there is no point in applying the full width for small [.ibm-col-sm-4]

Create a full-width col and then multiple columns that split width over larger breakpoints:

    <div class="ibm">
      <div style="background: #a3a4a3">
        <p>All of the grid.</p>
      </div>
      <div class="ibm-col-sm-2 ibm-col-md-8 ibm-col-lg-2" style="background: #b4b4b4">
        <p>Half of the grid at small, all of the grid at medium, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-sm-2 ibm-col-md-2 ibm-col-lg-2" style="background: #c6c6c6">
        <p>Half of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-md-2 ibm-col-lg-2" style="background: #d8d8d8">
        <p>All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-md-2 ibm-col-lg-2" style="background: #eaeaea">
        <p>All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-md-2 ibm-col-lg-2" style="background: #b4b4b4">
        <p>All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-lg-2" style="background: #c6c6c6">
        <p>All of the grid at small, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-lg-2" style="background: #d8d8d8">
        <p>All of the grid at small, and then one-eight of the grid at large.</p>
      </div>
      <div class="ibm-col-lg-2" style="background: #eaeaea">
        <p>All of the grid at small, and then one-eight of the grid at large.</p>
      </div>
    </div>

All of the grid.

Half of the grid at small, all of the grid at medium, and then one-eight of the grid at large.

Half of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.

All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.

All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.

All of the grid at small, a quarter of the grid at medium, and then one-eight of the grid at large.

All of the grid at small, and then one-eight of the grid at large.

All of the grid at small, and then one-eight of the grid at large.

All of the grid at small, and then one-eight of the grid at large.

## 3. Creating Layouts with Groups

Grid frameworks usually refer to a class called "row" and it can not be placed inside other rows. IBM Grid's group class allows you to transform an col into a collection of columns.

Have two bottom halves form a sub-column at the medium breakpoint:

    <div class="ibm">
      <div class="ibm-col-md-4" style="background: #a3a4a3">
        <p>All of the grid at small, and then half of the grid at medium.</p>
      </div>
      <div class="ibm-col-md-4 ibm-col-group">
        <div class="ibm-col-sm-2" style="background: #b4b4b4">
          <p>Half of the grid at small, and then a stacked half of the grid at medium.</p>
        </div>
        <div class="ibm-col-sm-2" style="background: #c6c6c6">
          <p>Half of the grid at small, and then a stacked half of the grid at medium.</p>
        </div>
      </div>
    </div>

All of the grid at small, and then half of the grid at medium.

Half of the grid at small, and then a stacked half of the grid at medium.

Half of the grid at small, and then a stacked half of the grid at medium.

There are two great parts of removing our concepts of "rows" and thinking about columns that turn into "groups":

- You do not have to wrap your columns into a row div if the sum of their widths stay within the breakpoint's amount of columns.

- You can nest as many groups inside of each other as needed for a complex layout.

Create a layout with nested groups:

    <div class="ibm">
      <div class="ibm-col-md-4" style="background: #a3a4a3">
        <p>At the medium breakpoint, this should take the full-height of the grid.</p>
      </div>
      <div class="ibm-col-sm-4 ibm-col-md-4 ibm-col-group">
        <div class="ibm-col-md-4" style="background: #b4b4b4">
          <p>At the medium breakpoint, this should take the second half of the width.</p>
        </div>
        <div class="ibm-col-md-2 ibm-col-group">
          <div class="ibm-col-sm-2 ibm-col-md-2" style="background: #c6c6c6">
            <p>At the medium breakpoint, this should stack at a quarter of the width.</p>
          </div>
          <div class="ibm-col-sm-2 ibm-col-md-2" style="background: #d8d8d8">
            <p>At the medium breakpoint, this should stack at a quarter of the width.</p>
          </div>
        </div>
        <div class="ibm-col-sm-4 ibm-col-md-2" style="background: #eaeaea">
          <p>At the medium breakpoint, this should take the height only of the stack to it's left.</p>
        </div>
      </div>
    </div>

At the medium breakpoint, this should take the full-height of the grid.

At the medium breakpoint, this should take the second half of the width.

At the medium breakpoint, this should stack at a quarter of the width.

At the medium breakpoint, this should stack at a quarter of the width.

At the medium breakpoint, this should take the height only of the stack to it's left.

## 4. Hiding and Displaying Between Breakpoints

Mobile-first design discourages limiting content from users with small screen widths. However, sometimes you have to present content to users with different screen sizes in different ways.

The IBM Grid allows you to specify that you want content to be hidden starting at a certain screen width. You then specify an col width at the next breakpoint you want it to display.

Hide an col at the small breakpoint, but then reveal it at the large breakpoint:

    <div class="ibm">
      <div class="ibm-col-sm-0 ibm-col-lg-16" style="background: #a3a4a3">
        <p>This content is displayed only when the screen is larger than 1056px.</p>
      </div>
    </div>

This content is displayed only when the screen is larger than 1056px.

You can also specify if you want an col to hide only for a specific breakpoint.

Hide an col at each breakpoint, but have it come back in the next breakpoint:

    <div class="ibm">
      <div class="ibm-col-sm-0-only" style="background: #a3a4a3">
        <p>This content is displayed only when the screen is larger than 640px.</p>
      </div>
      <div class="ibm-col-md-0-only" style="background: #b4b4b4">
        <p>This content is displayed only when the screen is smaller than 640px or larger than 1055px.</p>
      </div>
    </div>

This content is displayed only when the screen is larger than 640px.

This content is displayed only when the screen is smaller than 640px or larger than 1055px.

## 5. Removing and Adding Padding

When you turn on the grid checker, you will notice many smaller lines then the dark grey columns. These are what we call the grid’s units. The units scale with the user’s device and there are more of them at each breakpoint:

- sm breakpoint (0px+) = 16 units
- md breakpoint (640px+) = 32 units
- lg breakpoint (1056px+) = 66 units

All columns you create automatically have one unit of padding on all sides. However with situations like media, you would want to remove that.

What if you want to reapply padding to content below the media? You can then use the padding class (ibm-padding) to add one unit of padding to children.

There are also versions of the padding class in case you just want to add horizontal or vertical padding: ibm-padding-horizontal and ibm-padding-vertical.

Add media that ignores the default padding add and content that has extra vertical padding:

    <div class="ibm">
      <div class="ibm-col-sm-0 ibm-col-md-4" style="background: #c6c6c6">
        <div class="ibm-padding-vertical">This content has extra vertical padding.</div>
      </div>
      <div class="ibm-col-md-4 ibm-col-full">
        <img src="./image.jpg" style="display: block; width: 100%;">
        <div class="ibm-padding" style="background: #a3a4a3">
          <h3>Content with padding reapplied</h3>
          <p>A paragraph below the title.</p>
        </div>
      </div>
    </div>

This content has extra vertical padding.

### Content with padding reapplied

A paragraph below the title.

## 6. Bleeding Media and Background Colors on the Sides

The visual spec of IBM Grid applies extra left and right padding when a user reaches the large width breakpoint (1056px). If you have full-sized media or a background color on the left or right edge of the grid, the large breakpoint will reveal that extra padding with white space. You can remove that white space by telling the col if it should bleed on both sides or one of the sides.

Remove white space when the user reaches the large breakpoint:

    <div class="ibm">
      <div class="ibm-col-bleed" style="background: #a3a4a3;">
        <p>col's background color takes full width of grid at 1056px.</p>
      </div>
      <div class="ibm-col-sm-2 ibm-col-bleed-left" style="background: #b4b4b4;">
        <p>col's background color takes full left side of grid at 1056px.</p>
      </div>
      <div class="ibm-col-sm-2 ibm-col-bleed-right" style="background: #c6c6c6;">
        <p>col's background color takes full right side of grid at 1056px.</p>
      </div>
    </div>

col's background color takes full width of grid at 1056px.

col's background color takes full left side of grid at 1056px.

col's background color takes full right side of grid at 1056px.

## 7. Setting heights

An essential part to layouts is the y-axis. IBM Grid encourages this by providing classes for unit-based min-heights.

We use min-height in case you have dynamic content that you want to avoid being cut off. If that is not a concern, you can use the strict modifier (ibm-height-strict) for the element to act like normal height.

Apply heights at the sm and md breakpoints:

    <div class="ibm">
      <div class="ibm-height-sm-8 ibm-height-md-4" style="background: #a3a4a3;">
          <p>Column maintains a height of 8 units at the sm breakpoint, and then 4 units starting at the medium breakpoint.</p>
      </div>

      <div class="ibm-col-sm-2 ibm-height-sm-8 ibm-height-md-8" style="background: #b4b4b4;">
        <p>Column maintains a height of 8 units at the sm breakpoint, and then 8 units starting at the medium breakpoint.</p>
      </div>
      <div class="ibm-col-sm-2 ibm-height-sm-8 ibm-height-md-8" style="background: #c6c6c6;">
        <p>Column maintains a height of 8 units at the sm breakpoint, and then 8 units starting at the medium breakpoint.</p>
      </div>
    </div>

Column maintains a height of 8 units at the sm breakpoint, and then 4 units starting at the medium breakpoint.

Column maintains a height of 8 units at the sm breakpoint, and then 8 units starting at the medium breakpoint.

Column maintains a height of 8 units at the sm breakpoint, and then 8 units starting at the medium breakpoint.

## 8. Putting It All Together

There are a lot of different parts of the IBM Grid to help a variety of scenarios. It is important that these work together.

Create a layout that includes nested groups, full-sized media, and aspect ratios:

    <div class="ibm">
      <div class="ibm-col-md-4 ibm-col-bleed-left" style="background: #a3a4a3">
        <p class="ibm-type-c">At the medium breakpoint, this should take the full-height of the grid. This should also bleed left on the large breakpoint.</p>
      </div>
      <div class="ibm-col-md-4 ibm-col-group">
        <div class="ibm-col-md-4 ibm-height-sm-4 ibm-height-lg-17 ibm-col-bleed-right" style="background: #b4b4b4">
          <p class="ibm-type-c">At the medium breakpoint, this should take the second half of the width. It should maintain a half-square aspect ratio. This should also bleed right on the large breakpoint.</p>
        </div>
        <div class="ibm-col-md-2 ibm-col-group">
          <div class="ibm-col-sm-2 ibm-col-md-2" style="background: #c6c6c6">
            <p class="ibm-type-c">At the medium breakpoint, this should stack at a quarter of the width.</p>
          </div>
          <div class="ibm-col-sm-2 ibm-col-md-2" style="background: #d8d8d8">
            <p class="ibm-type-c">At the medium breakpoint, this should stack at a quarter of the width.</p>
          </div>
        </div>
        <div class="ibm-col-md-2 ibm-height-sm-8 ibm-height-md-16 ibm-height-lg-17 ibm-col-bleed-right ibm-col-full" style="overflow: hidden">
          <img src="./image.jpg" style="height: 100%; min-width: 100%; position: absolute; left: 0; top: 0;">
        </div>
      </div>
    </div>

At the medium breakpoint, this should take the full-height of the grid. This should also bleed left on the large breakpoint.

At the medium breakpoint, this should take the second half of the width. It should maintain a half-square aspect ratio. This should also bleed right on the large breakpoint.

At the medium breakpoint, this should stack at a quarter of the width.

At the medium breakpoint, this should stack at a quarter of the width.