My mobile first grid

I’ve spent a few months now looking through various CSS frameworks for one that I like.

Generally they’re good, but bloated. I don’t need most of the styling, and usually the reason it’s good is its grid system. But even then the grid is often more than I need.

So I went and created my own responsive grid using LESS that works how I like. Clean, minimal, and mobile first.

.row {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.col(@x;@y;) {
  @media (min-width: 740px) {
    width: percentage((@x/@y));
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
}

.row is simply a clearfix hack.

The columns are created with the .col mixin. This creates the percentage width (above the 740 break point) with the ratio @x:@y.

The easiest way to think of the ratio is;
x = how many columns wide you want
y = of how many total columns.
You then call this mixin into the class of your divs.

For example, lets make a row with two columns; one that is three fifths of the container width and one that is two fifths (making y=5).

.wrapper {
  .row; /* give .wrapper the .row styling */

  .content {
    .col(3,5);
  }

  .sidebar {
    .col(2,5);
  }
}

It’s that simple, they will now stack below 740px, and sit beside each other otherwise. You can, of course, use any ratio.

You can also embed a row into a column. It will just divide the width of that column by y.

Many frameworks use classes for their grids, such as Boostrap’s .span*. This is a legitimate enough system and with this you can create a series of predefined classes if you like.

I prefer to just declare then straight into the styling for the element though. It makes it easier to give responsive variants.

I’m still new to this grid business, so if you think this can be improved (I’m sure it can) then leave a comment. Also feel free to use this as you wish.

Previous article
Now stop, Kirby time 17 May '13