Implement responsive grid system

[genkio]

@gutter: 5px;
@base-cols: 16;

.container {
  .clearfix;
  margin: 0 auto;
  padding-left:  @gutter;
  padding-right: @gutter;
}

.row {
  .clearfix;
  width: 100%;
  margin-left: -@gutter;
  margin-right: -@gutter;
}

.make-cols(@size, @cols, @col: 1) when (@col <= @cols) {
  .col-@{size}-@{col} {
    width: (@col * 100% / @cols);
  }

  .make-cols(@size, @cols, (@col + 1));
}

.make-offset-cols(@size, @cols, @col: 1) when (@col <= @base-cols) {
  .col-@{size}-offset-@{col} {
    margin-left: (@col * 100% / @cols);
  }

  .make-offset-cols(@size, @cols, (@col + 1));
}

[class*="col-"] {
  .pull-left;
  padding-left: @gutter;
  padding-right: @gutter;
};

@media screen and (min-width: 480px) {
  .make-cols(xs, @base-cols);
  .make-offset-cols(xs, @base-cols);
}