Stretch CSS

About

Stretch is a 12 column grid that can have any gutter size you want. Columns can be offset and centred to make manoeuvring content really easy. Columns can be specified differently for three devices sizes.

1 Sass file. 5 variables. Lots of win.

Installation

The easiest way to install Stretch CSS is using bower:
bower install stretch-css

Compile the Sass file with Grunt or Gulp.

If you're not using Bower, just download the .scss from GitHub or download the plain vanilla .css above.

Getting Started

Sass Variables

The best way to use stretch is to include the stretch.scss file in your Sass build. You can set the following variables to whatever you want. These are the default values:

• $wrap: 960px;
• $gutter: 30px;
• $vertical-spacing: 20px;
• $md-breakpoint: 768px;
• $sm-breakpoint: 480px;

Prepare Your Grid

Create a Wrapper

Start by setting a wrap class on the element that will contain all the rows of content. The width for this is set in the $wrap Sass variable.

If you want a full-width grid, then just set $wrap to 100%.

Add Rows

Add a row within the wrap element by setting a row class to the element that will contain the columns for that row.

You can specify the vertical spacing between columns by setting the $vertical-spacing variable to what you prefer.

Define the Gutter

The default gutter width is 30px, but this can be changed to whatever you would like in the $gutter variable.

Create Your Columns

So far, your grid structure will look something like this:

<div class="wrap">
  <div class="row">
    <!-- Add columns here -->
  </div>
</div>

Simple Columns

The quickest way to setup columns is to create ones that don't respond to specific breakpoints (see Responsive Columns for columns that do).

Stretch CSS is based on a 12 column grid. To define a column, create a class on the element like this:

<div class="wrap">
  <div class="row">
    <div class="col__x-12">
      <!-- Content goes here -->
    </div>
  </div>
</div>

Change the value of x to be the number of columns wide the element should be.

Simple Columns – Demo

The demo below shows how different combinations of column widths can be used to create a grid system with Stretch CSS.

Hover over each block to see the class name used.

Centering Columns

Centering a single column in the grid is really simple. Create a new row and add __center on to the end of the class that defines the column's width.

<div class="wrap">
  <div class="row">
    <div class="col__6-12__center">
      <!-- This column will be 6 out of 12 columns wide and positioned centrally. -->
    </div>
  </div>
</div>

Centering Columns Demo

Below is a demo of an element 6 columns wide that has been cetrally positioned.

Responsive Columns

To create responsive columns, first, ensure that the breakpoint variables in the Sass file are set to your preferred sizes.

First, add the simple column class col__x-12 to your columns. This needs to be set and will apply as a default for all screen sizes.

Making columns respond is as easy as adding the following classes where necessary:

col__md-x-12 for medium sized screens and tablets
col__sm-x-12 for mobile devices.

The respsonsive sm and md classes can be applied as and when they are required — the simple column class col__x-12 will always work when respsonsive classes aren't specified. This reduces the amount of text in your HTML structure, but gives you the flexibility to be as verbose as you wish.

Responsive Columns Demo

This demo shows how different responsive classes work for different screen sizes. The HTML structure to create this is shown below. You'll notice that the last two columns don't have an sm class specified. This shows how the simple column class works when a responsive class isn't specified.

<div class="wrap">
  <div class="row">
    <div class="col__4-12 col__md-6-12 col__sm-12-12"></div>
    <div class="col__4-12 col__md-6-12 col__sm-12-12"></div>
    <div class="col__4-12 col__md-12-12 col__sm-12-12"></div>
    <div class="col__6-12 col__md-12-12"></div>
    <div class="col__6-12 col__md-12-12"></div>
  </div>
</div>

Offsetting Columns

Columns can be offset to create the blank areas of space in your layout.

To offset a column, just add the class offset__x-12 to your column, where x is the number of columns you want to offset.

Responsive columns can be offset:

offset__lg-x-12 for large screens and desktops
offset__md-x-12 for medium sized screens and tablets
offset__sm-x-12 for mobile devices.

Offsetting Columns Demo

<div class="wrap">
  <div class="row">
    <div class="col__4-12"></div>
    <div class="col__4-12 offset__4-12"></div>
    <div class="col__6-12"></div>
    <div class="col__3-12 offset__3-12"></div>
    <div class="col__3-12"></div>
    <div class="col__7-12 offset__2-12"></div>
  </div>
</div>