Basic principles

Our layout grid was built to allow precise control on how horizontal space is divided and on targeting several screen sizes. To accomplish this, we use percentages as our base units and CSS @media queries to allow you to decide what width should an element take when viewed in a specific screen size.

Our default layout breakpoints are:

• tiny for screens widths up to 320px.
• small for screen widths between 321 and 640 pixels.
• medium for screen widths between 641 and 960 pixels.
• large for screen widths between 961 and 1260 pixels.
• xlarge for screen widths above 1261 pixels.

• This class must be used for the grid to work.
• This class has breakpoint dependent variants, e.g. large-class-name.
• This class has half and quarter size variants, e.g. half-class-name.

Dividing space

• Css classes:
• all-%
• tiny-%
• small-%
• medium-%
• large-%
• xlarge-%

We have 22 width units, that we'll call columns, ranging from 5% to 100% in 5% increments as well as 33% and 66% for one and two thirds respectively.

All column elements must be inside a column-group element:

<div class="ink-grid">
  <div class="column-group">
    <div class="all-50">
      ...
    </div>
    <div class="all-50">
      ...
    </div>
  </div>
</div>

Example

The example above creates a 50/50 two column layout for all screens.

Grid elements can be nested to create more intricate layouts:

<div class="ink-grid">
  <div class="column-group">
    <div class="all-50">
      <div class="column-group">
        <div class="all-33">...</div>
        <div class="all-33">...</div>
        <div class="all-33">...</div>
      </div>
    </div>
    <div class="all-50">
      <div class="column-group">
        <div class="all-25">...</div>
        <div class="all-25">...</div>
        <div class="all-25">...</div>
        <div class="all-25">...</div>
      </div>
    </div>
  </div>
</div>

Example

The example above further divides each of the 50% columns in to 3 thirds and 4 fourths.

Gutters

• Css classes:
• gutters

Gutters are the space between columns of printed text.

In ink we use the term to describe the space between layout columns.

Horizontal spacing is created by adding padding to the left of the columns and using the border-box box model. Vertical spacing is created with a bottom margin. So, if you want to add a background to a column, you'll need to add an additional element inside it.

To add space between a group of columns in your layout add the gutters class to the parent column-group element. You can also choose the amount of gutter space by using half-gutters or quarter-gutters classes to halve or quarter your column gutters.

<div class="ink-grid">
  <div class="column-group horizontal-gutters">
    <div class="all-50">
      ...
    </div>
    <div class="all-50">
      ...
    </div>
  </div>
</div>

Example

Gutters are applied only to the column-group direct children. Nested elements are left untouched.

<div class="ink-grid">
  <div class="column-group large-half-horizontal-gutters">
    <div class="all-50">
      ...
    </div>
    <div class="all-50">
      ...
    </div>
  </div>
</div>

Example

In the example above half sized gutters are added on the large breakpoint only.

Multiple screen sizes

• Css classes:
• all-%
• tiny-%
• small-%
• medium-%
• large-%
• xlarge-%

Handling layout changes for multiple screen sizes is as simple as adding a few more classes to your markup.

<div class="ink-grid">
  <div class="column-group horizontal-gutters">
    <div class="xlarge-30 large-40 medium-50 small-70 tiny-100">
      <div class="column">50%</div>
    </div>
    <div class="xlarge-70 large-60 medium-50 small-30 tiny-100">
      <div class="column">50%</div>
    </div>
  </div>
</div>

Example

To set the width of a grid column just add the desired width percentage class for the targeted breakpoint: large-50 small-100 ....

If you need your layout to work on multiple screens, you'll have to declare the width for all available breakpoints.

You can also set a width for all breakpoints by using the all- prefix:

<div class="all-50 small-100"></div>

Try resizing your browser window to see it working.