There are many responsive grid solutions out there. I believe most of them however, overcomplicate things. Enter Columnus. With the shorthand Stylus syntax, we can get a fully customizable grid with a minimal amount of code.

Foundation

This grid system is loosely based off of the Foundation Twelve Column Grid, with a few important differences:

  1. The absence of grid rows. While they can provide more layout options, grid rows are often times difficult to implement in a dynamic system, where the grid elements are constantly changing.
  2. Simplification. This grid provides a simple, twelve column structure that can be quickly implemented. Let’s keep things light weight!

Grid Function

grid(class = 'small', columns = 12)

  // Iterate through our columns
  for colCount in (1 .. columns)

    // Convert each column count to a percentage: i.e. 1/12
    percentWidth = 1% * ((colCount / columns) * 100)

    // Column class for the width
    .l_{class}_{colCount}
      width percentWidth

Yep, that’s it. You’ll notice the function defaults the columns to twelve, but you can change this if needed. All that’s happening here is a loop through the column count, and some simple math to figure out the percentage width for each column class. We then write out a class for each column, from one to twelve.

Grid Styles

.l_grid_wrap,
.l_grid
  overflow hidden

.l_grid
  list-style none
  margin 0 -1em
  clearfix()

  *
    box-sizing border-box

.l_column
  float left
  position relative
  padding 0 1em 2em

  img
    max-width 100%
    height auto

The grid styles are extremely vanilla for a reason. This code is meant to be a starter set for a grid system, that you as the developer can build onto. Basically, each element in the grid has a padding, and the parent element’s negative margin counteracts that padding on the left and right sides. You can overwrite this if you’d like.

A few things to note: First, I’m using a variant of the SMACSS syntax for my naming here. These are layout classes, so they are prepended with the l_ to denote that. Second, I’m relying on nib, a Stylus add-on for the transparent vendor prefixing, and clear fix.

Implementation: Stylus

grid()

@media '(min-width: 768px)'

  grid('med')

@media '(min-width: 768px)'

  grid('large')

In the example above we are setting up our grid for three breakpoints. First, we call the grid function at our base level for our smallest devices. Then, we call the same function for our breakpoints as we build our way up. You can use any names for the classes you would like; I usually stick to small(the default), med, and large.

Implementation: Html

<div class="l_grid">
  <div class="small_6 med_4 large_3 l_column">...</div>
  <div class="small_6 med_4 large_3 l_column">...</div>
  <div class="small_6 med_4 large_3 l_column">...</div>
  <div class="small_6 med_4 large_3 l_column">...</div>
</div>

Since the classes are object-oriented, you can add and remove them as you need. Remember, the classes are named from the number of columns in the twelve column grid, so small_6 would span 50% of the with (12/6).

In the above example, you would have a grid with 50% width columns for the smallest devices, 33.33333% at the next breakpoint, and 25% at the largest.

If you have any questions, feel free to comment. I’d love to help!