Inline-block grid with Bootstrap-based class names

ibgrid.scss

/**
 * ibgrid.scss
 *
 * An inline-block grid.
 */

/*
Variables
 */
// breakpoints
$break-xs: 35rem;
$break-sm: 48rem;
$break-md: 62rem;
$break-lg: 75rem;
$break-xl: 90rem;

// gutter size
$gutter-width: 1.25rem !default;

/*
Core
 */
/* Container */
.container-fluid,
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: $gutter-size;
  padding-left: $gutter-size;

  /* Clearfix */
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}


/* Rows */
.row {
  display: block;
  margin-left: -$gutter-size;
  margin-right: -$gutter-size;
  text-rendering: optimizespeed;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  // word-spacing: -0.43em;
}

/* Columns */
.row [class^="col-"] {
  position: relative;
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding-left: $gutter-size;
  padding-right: $gutter-size;
  vertical-align: top;
  box-sizing: border-box;
  letter-spacing: normal;
  // word-spacing: normal;
}

// center vertically
.row.middle-xs [class^="col-"] {
  vertical-align: middle;
}

/*
Mobile
 */
@for $i from 1 through 12 {
  .col-xs-#{$i} {
    width: percentage($i/12);
  }
  .col-xs-offset-#{$i} {
    margin-left: percentage($i/12);
  }
  .col-xs-push-#{$i} {
    left: percentage($i/12);
  }
  .col-xs-pull-#{$i} {
    right: percentage($i/12);
  }
}

/*
Small
 */
@media only screen and (min-width: $break-sm) {
  .container {
    width: $break-sm - (2 * $gutter-size);
  }

  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      width: percentage($i/12);
    }
    .col-sm-offset-#{$i} {
      margin-left: percentage($i/12);
    }
    .col-sm-push-#{$i} {
      left: percentage($i/12);
    }
    .col-sm-pull-#{$i} {
      right: percentage($i/12);
    }
  }

  .row.middle-sm [class^="col-"] {
    vertical-align: middle;
  }
}

/*
Medium
 */
@media only screen and (min-width: $break-md) {
  .container {
    width: $break-md - (2 * $gutter-size);
  }

  @for $i from 1 through 12 {
    .col-md-#{$i} {
      width: percentage($i/12);
    }
    .col-md-offset-#{$i} {
      margin-left: percentage($i/12);
    }
    .col-md-push-#{$i} {
      left: percentage($i/12);
    }
    .col-md-pull-#{$i} {
      right: percentage($i/12);
    }
  }

  .row.middle-md [class^="col-"] {
    vertical-align: middle;
  }
}

/*
Large
 */
@media only screen and (min-width: $break-lg) {
  .container {
    width: $break-lg - (2 * $gutter-size);
  }

  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      width: percentage($i/12);
    }
    .col-lg-offset-#{$i} {
      margin-left: percentage($i/12);
    }
    .col-lg-push-#{$i} {
      left: percentage($i/12);
    }
    .col-lg-pull-#{$i} {
      right: percentage($i/12);
    }
  }

  .row.middle-lg [class^="col-"] {
    vertical-align: middle;
  }
}