Grids+Type+Queries - start of a micro css layout framework

grids.scss

@import "typography";
@import "mediaqueries";


$top-offset: 25%; //how much we want to offset our row from the top


/**
 * From Nicolas Gallagher, "micro clearfix hack"
 * http://nicolasgallagher.com/micro-clearfix-hack/
 * 
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


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

html, body {
  height:100%;
} 

.col {
  float: left;
  padding: 0 1rem 1rem 1rem;
}

.col.full { width: 100%; }
.col.two-thirds { width: 66.7%; }
.col.half { width: 50%; }
.col.third { width: 33.3%; }
.col.fourth { width: 25%; }
.col.flow-opposite { float: right; }  

.container {
  height: inherit;
}

@include mobile-only{
  .container {
    .col.full,
    .col.two-thirds,
    .col.half,
    .col.third,
    .col.fourth,
    .col.flow-opposite{ 
      width: 100%; 
    }
  }
}

// 4ths become thirds on tablet
@include tablet-only {
  .container .col.fourth { width: 33.3%; }
}

.container.rel {
  position: relative;
  .row {
    position:absolute;
    top:$top-offset;
    width:100%;
  }
}

mediaqueries.scss

$mq-mobile-portrait   :320px !default;
$mq-mobile-landscape  :480px !default;
$mq-tablet-portrait   :768px!default;
$mq-tablet-landscape  :1024px!default;
$mq-desktop           :1280px!default;
$mq-desktop-large     :1600px!default;


//-------------------------------------------------------
// Both portrait and landscape
@mixin mobile-only{
  @media(max-width: $mq-mobile-landscape){
    @content;
  }
}

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only{
  @media (max-width:$mq-mobile-portrait){
    @content;
  }
}

// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below{
  @media (max-width:$mq-mobile-portrait){
    @content;
  }
}

// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up{
  @media (min-width:$mq-mobile-portrait){
    @content;
  }
}

// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only{
  @media only screen and (min-width:$mq-mobile-portrait+1) and (max-width:$mq-mobile-landscape){
    @content;
  }
}

// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below{
  @media only screen and (max-width:$mq-mobile-landscape){
    @content;
  }
}


// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up{
  @media only screen and (min-width:$mq-mobile-portrait+1){
    @content;
  }
}

//-------------------------------------------------------
// Both the portrait and landscape width of the tablet// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only{
  @media only screen and (min-width:$mq-mobile-landscape+1) and (max-width:$mq-tablet-landscape){
    @content;
  }
}


// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only{
  @media only screen and (min-width:$mq-mobile-landscape+1) and (max-width:$mq-tablet-portrait){
    @content;
  }
}

// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below{
  @media only screen and (max-width:$mq-tablet-portrait){
    @content;
  }
}

// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up{
  @media only screen and (min-width:$mq-mobile-landscape+1){
    @content;
  }
}

// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only{
  @media only screen and (min-width:$mq-tablet-portrait+1) and (max-width:$mq-tablet-landscape){
    @content;
  }
}

// Up to and including the tablet landscape
@mixin tablet-landscape-and-below{
  @media only screen and (max-width:$mq-tablet-landscape){
    @content;
  }
}

// Everything larger than portrait tablet
@mixin tablet-landscape-and-up{
  @media only screen and (min-width:$mq-tablet-portrait+1){
    @content;
  }
}

//-------------------------------------------------------
// Everything larger than a landscape tablet
@mixin desktop-and-up{
  @media only screen and (min-width:$mq-tablet-landscape+1){
    @content;
  }
}

// Everything below and including the desktop 
@mixin desktop-and-below{
  @media only screen and (max-width:$mq-desktop){
    @content;
  }
}

// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only{
  @media only screen and (min-width:$mq-tablet-landscape+1) and (max-width:$mq-desktop){
    @content;
  }
}
//-------------------------------------------------------
// Everything larger than a regular desktop
@mixin desktop-large-and-up{
  @media only screen and (min-width:$mq-desktop+1){
    @content;
  }
}

// Everything below and including the desktop-large 
@mixin desktop-large-and-below{
  @media only screen and (max-width:$mq-desktop-large){
    @content;
  }
}

// Everything larger than a regular desktop but less than or equal to the desktop-large
@mixin desktop-large-only{
  @media only screen and (min-width:$mq-desktop+1) and (max-width:$mq-desktop-large){
    @content;
  }
}

typography.scss

/**
 * Typography adapted from Basel;ne
 * http://b4d455.fr/basel/
 */
$font-size:16px;
$baseline:24px;

h1{font-size: $baseline*2.5;} // 60
h2{font-size: $baseline*2;} // 48
h3{font-size: $baseline*1.5;} // 36
h4{font-size: $baseline*1.25;} // 24
h5{font-size: $font-size*1.3125;} // 21
h6{font-size: $font-size*1.125;} // 18
small{font-size: $baseline*0.5;} // 12

/* the trick  */
.simple:before{
  content:'';
  display: inline-block;
  vertical-align: baseline;
  height:$baseline;
}
.simple:after{
  content:'';
  display: inline-block;
  vertical-align: -$baseline;
  height:$baseline;
}
.double:before{
  content:'';
  display: inline-block;
  vertical-align: baseline;
  height:$baseline*2;
}
.double:after{
  content:'';
  display: inline-block;
  vertical-align: -$baseline;
  height:$baseline*2;
}
.triple:before{
  content:'';
  display: inline-block;
  vertical-align: baseline;
  height:$baseline*2.3;
}
.triple:after{
  content:'';
  display: inline-block;
  vertical-align: -$baseline;
  height:$baseline*3;
}
.up{
  margin-top: -$baseline;
}
.down{
  margin-top: $baseline;
}