A super simple responsive CSS grid framework.
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.
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
GitHub or download the plain vanilla
The best way to use stretch is to include the
file in your Sass build. You can set the following variables to
whatever you want. These are the default values:
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
Add a row within the wrap element by setting a
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.
The default gutter width is
30px, but this can be
changed to whatever you would like in the
So far, your grid structure will look something like this:
<div class="wrap"> <div class="row"> <!-- Add columns here --> </div> </div>
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.
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 a single column in the grid is really simple. Create a new row
__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>
Below is a demo of an element 6 columns wide that has been cetrally positioned.
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.
md classes can be applied as and
when they are required — the simple column class
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.
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>
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.
<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>