SCSS Grid Framework | Tables & Floats

gistfile1.txt

.table {
  display: table;
  width: 100%;
  .cell {
    display: table-cell;
    &.bottom {
      vertical-align: bottom;
    }
    &.top {
      vertical-align: top;
    }
    &.middle {
      vertical-align: middle;
    }
  }
  &.padding {
    > .cell {
      padding: 0 5px;
      &:first-of-type {
        padding-left: 0;
        padding-right: 10px;
      }
      &:last-of-type {
        padding-right: 0;
        padding-left: 10px;
      }
    }
  }
}

.row {
  width: 100%;
  > div[class*="col-"] {
    float: left;
  }
  &.padding {
    > div[class*="col-"] {
      padding: 0 5px;
      &:first-of-type {
        padding-left: 0;
        padding-right: 10px;
      }
      &:last-of-type {
        padding-right: 0;
        padding-left: 10px;
      }
    }
  }
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.col-100 {
  width: 100%;
}

.col-95 {
  width: 95%;
}

.col-90 {
  width: 90%;
}

.col-85 {
  width: 85%;
}

.col-80 {
  width: 80%;
}

.col-75 {
  width: 75%;
}

.col-70 {
  width: 70%;
}

.col-66 {
  width: 66.666%;
}

.col-60 {
  width: 60%;
}

.col-55 {
  width: 55%;
}

.col-50 {
  width: 50%;
}

.col-45 {
  width: 45%;
}

.col-40 {
  width: 40%;
}

.col-35 {
  width: 35%;
}

.col-33 {
  width: 33.333%;
}

.col-30 {
  width: 30%;
}

.col-25 {
  width: 25%;
}

.col-20 {
  width: 20%;
}

.col-15 {
  width: 15%;
}

.col-10 {
  width: 10%;
}

.col-5 {
  width: 5%;
}