responsive grid (renamed)

renamed bootstrap grid styles

by JakobJingleheimer

HTML

<div class="col twelve-xs four-sm three-md two-lg">div.col.twelve-xs.four-sm.three-md.two-lg</div>
<div class="col eight-xs six-sm four-md one-lg">div.col.eight-xs.six-sm.four-md.one-lg</div>

CSS

html,body { width: 100% }

.col {
  position: relative;
  min-height: 1px; // Prevent columns from collapsing when empty
  padding-left:  10px; // Inner gutter via padding
  padding-right: 10ox; // Inner gutter via padding
  float: left;
}

div {
  background:green;
}

.one-xs    { width: 8.333333333333332%; }
.two-xs    { width: 16.666666666666664%; }
.three-xs  { width: 25%; }
.four-xs   { width: 33.33333333333333%; }
.five-xs   { width: 41.66666666666667%; }
.six-xs    { width: 50%; }
.seven-xs  { width: 58.333333333333336%; }
.eight-xs  { width: 66.66666666666666%;; }
.nine-xs   { width: 75%; }
.ten-xs    { width: 83.33333333333334%; }
.eleven-xs { width: 91.66666666666666%; }
.twelve-xs { width: 100%; float: none; }

@media (min-width: 480px) {
  .container {
    max-width: 560px;
  }

  div {
    background:red;
  }

  .one-sm    { width: 8.333333333333332%; }
  .two-sm    { width: 16.666666666666664%; }
  .three-sm  { width: 25%; }
  .four-sm   { width: 33.33333333333333%; }
  .five-sm   { width: 41.66666666666667%; }
  .six-sm    { width: 50%; }
  .seven-sm  { width: 58.333333333333336%; }
  .eight-sm  { width: 66.66666666666666%;; }
  .nine-sm   { width: 75%; }
  .ten-sm    { width: 83.33333333333334%; }
  .eleven-sm { width: 91.66666666666666%; }
  .twelve-sm { width: 100%; float: none; }
}

@media (min-width: 560px) {
  .container {
    max-width: 720px;
  }

  div {
    background:blue;
  }

  .one-md    { width: 8.333333333333332%; }
  .two-md    { width: 16.666666666666664%; }
  .three-md  { width: 25%; }
  .four-md   { width: 33.33333333333333%; }
  .five-md   { width: 41.66666666666667%; }
  .six-md    { width: 50%; }
  .seven-md  { width: 58.333333333333336%; }
  .eight-md  { width: 66.66666666666666%;; }
  .nine-md   { width: 75%; }
  .ten-md    { width: 83.33333333333334%; }
  .eleven-md { width: 91.66666666666666%; }
  .twelve-md { width: 100%; float: none; }
}