responsive-grid.css

*, *:after, *:before
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

.frame
{
    zoom: 1;
}

.frame:after
{
    content: "";
    clear: both;
    display: table;
}

.frame .bit-1,
.frame .bit-2,
.frame .bit-3,
.frame .bit-4,
.frame .bit-5,
.frame .bit-6,
.frame .bit-7,
.frame .bit-8,
.frame .bit-9,
.frame .bit-10,
.frame .bit-11,
.frame .bit-12,
.frame .bit-13,
.frame .bit-14,
.frame .bit-15,
.frame .bit-16
{
    width: 100%;
}

[class*="bit-"]
{
    float: left;
    padding: 0 1em;
}


@media screen and (min-width: 780px) {

    .frame .bit-1       {    width: 6.25%     }
    .frame .bit-2       {    width: 12.5%     }
    .frame .bit-3       {    width: 18.75%    }
    .frame .bit-4       {    width: 25%       }
    .frame .bit-5       {    width: 31.25%    }
    .frame .bit-6       {    width: 37.5%     }
    .frame .bit-7       {    width: 43.75%    }
    .frame .bit-8       {    width: 50%       }
    .frame .bit-9       {    width: 56.25%    }
    .frame .bit-10      {    width: 62.5%     }
    .frame .bit-11      {    width: 68.75%    }
    .frame .bit-12      {    width: 75%       }
    .frame .bit-13      {    width: 81.25%    }
    .frame .bit-14      {    width: 87.5%     }
    .frame .bit-15      {    width: 93.75%    }
    .frame .bit-16      {    width: 100%      }
}


/*
 *   My Concerns:
 *
 *       - My implementation of the "micro-clearfix" is wrong. I intentionally
 *         ommited the "::before" selector. I do not doubt that the implementation
 *         is wrong and that the "::before" selector has good purpose but I
 *         want to learn.
 *
 *       - The naming convention here is borrowed from the open source responsive
 *         grid project named "lemonade". Need to think of my own.
 *
 *       - Media queries should use "em" apparantely. It would also appear that I
 *         should specify both the "min-width" and "max-width" for the media
 *         queries.
 *
 *       - Might not be a bad idea to develop another media query for mobile
 *         devices.
 *
 */