simple responsive percentage grid

grid.less

.grid(
  @gutter-width:30px;
  @phone-min-width:480px;
  @tablet-min-width:768px;
  @netbook-min-width:992px;
  @desktop-min-width:1230px;
  @widescreen-min-width:1440px;
  @rtl-classes:true) {

  .padded() {
    padding-left  : @gutter-width / 2;
    padding-right : @gutter-width / 2;
    box-sizing    : border-box;
    max-width     : 100% }

  .container, .container-fluid, [class*="-col"] { .padded }
  .container-fluid { max-width : @widescreen-min-width }

  [class*="-col"] {
    float        : left;
    margin-left  : 0;
    margin-right : 0;
    min-height   : 1px;

    &.end { float : right }

    & when (@rtl-classes) {
      .rtl &, [dir=rtl] & {
        float : right;
        &.end { float : left }
      }
    }
  }

  .container, .container-fluid { margin-left : auto; margin-right : auto }

  .container(@min-width,@max-width:@min-width ) {
    .container {
      width : @min-width - @gutter-width;
      & when not(@min-width = @max-width) { max-width : @max-width - @gutter-width }
    }
  }

  .row {
    margin-left  : -@gutter-width / 2;
    margin-right : -@gutter-width / 2;
    &:before, &:after { content : ' '; display : table }
    &:after { clear : both }
  }

  [class*="-push-"], [class*="-pull-"] { position : relative }

  .columns(@cols:12) {
    &-push-0 {
      left : 0;

      & when (@rtl-classes) {
        .rtl &, [dir=rtl] & { left : auto; right : 0 }
      }
    }
    &-pull-0 {
      right : 0;
      & when (@rtl-classes) {
        .rtl &, [dir=rtl] & { right : auto; left : 0 }
      }
    }
    &-offset-0 {
      margin-left : 0;
      & when (@rtl-classes) {
        .rtl &, [dir=rtl] & { margin-right : 0 }
      }
    }

    .loop-columns(@col) when (@col <= @cols) {
      &-@{col}-col { width : percentage(@col/@cols) }
      &-push-@{col}-col {
        left : percentage(@col/@cols);

        & when (@rtl-classes) {
          .rtl &, [dir=rtl] & { left : auto; right : percentage(@col/@cols) }
        }
      }
      &-pull-@{col}-col {
        right : percentage(@col/@cols);

        & when (@rtl-classes) {
          .rtl &, [dir=rtl] & { right : auto; left : percentage(@col/@cols) }
        }
      }
      &-offset-@{col}-col {
        margin-left : percentage(@col/@cols);
        & when (@rtl-classes) {
          .rtl &, [dir=rtl] & { margin-left : 0; margin-right : percentage(@col/@cols) }
        }
      }

      .loop-columns(@col + 1) }

    // ignore!
    .loop-columns(@col) when (@col > @cols) { }
    .loop-columns(1);

    //&-12-col {
    //  width : 100%;
    //  }
  }

  .gsm { .columns() }

  @media screen and (min-width : @phone-min-width) {
    .container(@phone-min-width, @tablet-min-width);
    .phone { .columns() }
  }

  @media screen and (min-width : @tablet-min-width) {
    .container(@tablet-min-width, @netbook-min-width);
    .tablet { .columns() }
  }

  @media screen and (min-width : @netbook-min-width) {
    .container(@netbook-min-width, @desktop-min-width);
    .netbook { .columns() }
  }

  @media screen and (min-width : @desktop-min-width) {
    .container(@desktop-min-width, @widescreen-min-width);
    .desktop { .columns() }
  }

  @media screen and (min-width : @widescreen-min-width) {
    .container(@widescreen-min-width);
    .widescreen { .columns() }
  }

}

.grid();

html, body {
  min-height : 100vh;
  padding    : 0;
  margin     : 0 }