ama_layout 3.2.2 → 4.0.0

data/app/assets/stylesheets/ama_layout/layout/base-styles.scss

@@ -1,72 +1,2 @@
-/* ============== Base Page Layout Styles ================ */
-html, body{
-  height: auto !important;
-}
-
-html{
-  background: image-url('alberta-blur.jpg') no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-body{
-  background: none;
-}
-
-footer{
-  background: image-url('footer-racetrack-big.png') no-repeat center 0;
-  height: 200px;
-  margin-top: $base-margin*12;
-}
-
-/* ============== Base Typography Styles ================ */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p{
-  font-family: $font-family-sans-serif;
-  margin-bottom: 0.2em;
-  margin-bottom: 0.2rem; //this is so headers have equal padding on bottom and top
-}
-
-h4{
-  margin-top: $base-margin*4;
-  margin-bottom: $base-margin*2;
-}
-
-label{
-  font-family: $font-family-sans-serif;
-  color: $charcoal;
-}
-
-p,
-li,
-select,
-label{
-  font-size: $base-font-size*0.875;
-  color: $charcoal;
-  font-family: $font-family-sans-serif;
-}
-
-a{
-  text-decoration: underline;
-  color: $secondary-color;
-  font-size: $base-font-size*0.875;
-}
-
-hr{
-  margin: $base-margin 0;
-}
-
-small{
-  font-size: 80%;
-}
-
-dl dd{
-  margin-bottom: $base-margin*4;
-}
+/* Most base styles are defined in the settings.scss file as Foundation's defaults,
+but if you need to style something that's not defined there, add it here. */

data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss

@@ -15,7 +15,7 @@
 
 /* ==================== 1. Main Layout Elements ==================== */
 .main-wrapper{
- margin: $base-margin*4 auto;
+  margin: $base-margin auto;
 }
 
 .page-wrapper{
@@ -32,7 +32,7 @@
 .section-title{
   @extend .page-title;
   border: 0;
-  padding: $base-padding*2;
+  padding: $base-padding/2;
   background-color: $stone;
 
   h5{
@@ -40,14 +40,8 @@
   }
 }
 
-.page-steps{
-  text-align: right;
-}
-
 .content-block{
-  margin-bottom: $base-margin*4;
-  background: $white;
-  border: $base-border;
+  margin-bottom: $base-margin;
 }
 
 .content-block-bottom{
@@ -56,6 +50,7 @@
 
 .image-callout{
   border: $base-border;
+  margin-bottom: $base-margin;
 }
 
 .fullwidth{
@@ -64,7 +59,7 @@
 
 /* ==================== 2. Panels ==================== */
 .panel-box{
-  padding: $base-padding*4;
+  padding: $base-padding;
 
   h4, p{
     color: $white;
@@ -83,11 +78,11 @@
 .panel-title{
   @extend .page-title;
   border: 0px;
-  padding: $base-padding*2;
+  padding: $base-padding/2;
 
   h5{
     color: $jet;
-    padding-left: $base-padding*2;
+    padding-left: $base-padding/2;
   }
 }
 
@@ -135,23 +130,23 @@
 
 /* ==================== 4. Margins ==================== */
 .m1{
-  margin: $base-margin*4 !important;
+  margin: $base-margin !important;
 }
 
 .mt1{
-  margin-top: $base-margin*4 !important;
+  margin-top: $base-margin !important;
 }
 
 .mr1{
-  margin-right: $base-margin*4 !important;
+  margin-right: $base-margin !important;
 }
 
 .mb1{
-  margin-bottom: $base-margin*4 !important;
+  margin-bottom: $base-margin !important;
 }
 
 .ml1{
-  margin-left: $base-margin*4 !important;
+  margin-left: $base-margin !important;
 }
 
 .m0{
@@ -163,7 +158,7 @@
 }
 
 .mr0{
-  margin-right: 0px !important;
+  margin-right: 0 !important;
 }
 
 .mb0{
@@ -171,40 +166,28 @@
 }
 
 .ml0{
-  margin-left: 0px !important;
-}
-
-.mt25{
-  margin-top: 25px;
-}
-
-.bmt{
-  margin-top: $base-margin;
-}
-
-.bmb{
-  margin-bottom: $base-margin;
+  margin-left: 0 !important;
 }
 
 /* ==================== 5. Padding ==================== */
 .p1{
-  padding: $base-padding*4 !important;
+  padding: $base-padding !important;
 }
 
 .pt1 {
-  padding-top: $base-margin*4 !important;
+  padding-top: $base-margin !important;
 }
 
 .pr1 {
-  padding-right: $base-margin*4 !important;
+  padding-right: $base-margin !important;
 }
 
 .pb1 {
-  padding-bottom: $base-margin*4 !important;
+  padding-bottom: $base-margin !important;
 }
 
 .pl1 {
-  padding-left: $base-margin*4 !important;
+  padding-left: $base-margin !important;
 }
 
 .p0{
@@ -228,7 +211,7 @@
 }
 
 .bb0{
-  border-bottom: 0px !important;
+  border-bottom: 0 !important;
 }
 
 .b0{
@@ -264,8 +247,8 @@
   background-color: $brand-green;
 }
 
-.notice-orange-bg{
-  background-color: $notice-orange;
+.orange-bg{
+  background-color: $orange;
 }
 
 .red-bg{
@@ -292,7 +275,7 @@
   margin: 0;
 
   li{
-    padding: $base-padding*3 $base-padding*2 $base-padding*2 $base-padding*2;
+    padding: $base-padding $base-padding/2 $base-padding/2 $base-padding/2;
     border-bottom: $base-border;
 
     .table-value{
@@ -313,6 +296,60 @@
 /* ==================== 9. Buttons ==================== */
 .button{
   text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus{
+    background: lighten($button-background, 10%);
+  }
+
+  &--green{
+    @extend .button;
+    $button-background: $brand-green;
+    background: $button-background;
+    float: right;
+  }
+
+  &--dark-blue{
+    @extend .button;
+    $button-background: $brand-blue-dark;
+    background: $button-background;
+    float: right;
+  }
+
+  &--left{
+    @extend .button;
+    float: left;
+  }
+
+  &--right{
+    @extend .button;
+    float: right;
+  }
+
+  &--de-emphasized{
+    @extend .button;
+    float: left;
+    $button-background: $slate;
+    background: $button-background;
+
+    &:hover,
+    &:active,
+    &:focus{
+      background: lighten($button-background, 10%);
+    }
+  }
+
+  &--expand{
+    @extend .button;
+    @extend .expanded;
+  }
+
+  &--xlarge{
+    @extend .button;
+    width: 100%;
+    min-height: 161px;
+  }
 }
 
 .base-button{
@@ -394,6 +431,12 @@ button[disabled],
 .white-text{
   color: $white;
 
+  &--lrg{
+    display: block;
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
   >a{
     color: $white;
   }
@@ -419,7 +462,7 @@ button[disabled],
   font-weight: normal;
   color: $slate;
   text-transform: uppercase;
-  padding: $base-padding*2 $base-padding*0 $base-padding*2 $base-padding*2;
+  padding: $base-padding/2 $base-padding*0 $base-padding/2 $base-padding/2;
 }
 
 .uppercase{
@@ -430,6 +473,7 @@ button[disabled],
   font-weight: bold;
   font-size: $base-font-size*0.875;
   color: $charcoal;
+  padding-bottom: $base-padding;
 }
 
 .brand-blue-dark-text{
@@ -444,15 +488,26 @@ button[disabled],
   font-size: 80%;
 }
 
+.micetype--italic{
+  @extend .micetype;
+  font-style: italic;
+}
+
 .italic{
   font-style: italic;
 }
 
 .hint{
-  font-size: $base-font-size*0.75;
+  font-size: $base-font-size*0.85;
   line-height: $base-font-size;
   color: darken($smoke, 15%);
   font-style: italic;
+  display: block;
+
+  &--white{
+    @extend .hint;
+    color: $white;
+  }
 }
 
 .green-text{
@@ -460,7 +515,7 @@ button[disabled],
 }
 
 .orange-text{
-  color: $notice-orange;
+  color: $orange;
 }
 
 .red-text{

data/app/assets/stylesheets/ama_layout/layout/index.scss

@@ -1,3 +1,5 @@
+@import "mixins-grid";
 @import "variables";
 @import "base-styles";
 @import "helper-classes";
+@import "print";

data/app/assets/stylesheets/ama_layout/layout/mixins-grid.scss

@@ -0,0 +1,847 @@
+@mixin row($width: $global-width){
+  //for rows with a fixed max-width
+  //to use this: @include row($global-width)
+  //for a normal fluid row just use @include grid-row
+  @include grid-row;
+  width: $width;
+}
+
+@mixin nested-row{
+  @include grid-row-nest(null);
+}
+
+@mixin small-12{
+  @include grid-column(12);
+}
+
+@mixin small-11{
+  @include grid-column(11);
+}
+
+@mixin small-10{
+  @include grid-column(10);
+}
+
+@mixin small-9{
+  @include grid-column(9);
+}
+
+@mixin small-8{
+  @include grid-column(8);
+}
+
+@mixin small-7{
+  @include grid-column(7);
+}
+
+@mixin small-6{
+  @include grid-column(6);
+}
+
+@mixin small-5{
+  @include grid-column(5);
+}
+
+@mixin small-4{
+  @include grid-column(4);
+}
+
+@mixin small-3{
+  @include grid-column(3);
+}
+
+@mixin small-2{
+  @include grid-column(2);
+}
+
+@mixin small-1{
+  @include grid-column(1);
+}
+
+@mixin medium-12{
+  @media #{$medium-up}{
+    @include grid-column(12);
+  }
+}
+
+@mixin medium-11{
+  @media #{$medium-up}{
+    @include grid-column(11);
+ }
+}
+
+@mixin medium-10{
+  @media #{$medium-up}{
+    @include grid-column(10);
+  }
+}
+
+@mixin medium-9{
+  @media #{$medium-up}{
+    @include grid-column(9);
+  }
+}
+
+@mixin medium-8{
+  @media #{$medium-up}{
+    @include grid-column(8);
+  }
+}
+
+@mixin medium-7{
+  @media #{$medium-up}{
+    @include grid-column(7);
+  }
+}
+
+@mixin medium-6{
+  @media #{$medium-up}{
+    @include grid-column(6);
+  }
+}
+
+@mixin medium-5{
+  @media #{$medium-up}{
+    @include grid-column(5);
+  }
+}
+
+@mixin medium-4{
+  @media #{$medium-up}{
+    @include grid-column(4);
+  }
+}
+
+@mixin medium-3{
+  @media #{$medium-up}{
+    @include grid-column(3);
+  }
+}
+
+@mixin medium-2{
+  @media #{$medium-up}{
+    @include grid-column(2);
+  }
+}
+
+@mixin medium-1{
+  @media #{$medium-up}{
+    @include grid-column(1);
+  }
+}
+
+@mixin large-12{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(12);
+  }
+}
+
+@mixin large-11{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(11);
+  }
+}
+
+@mixin large-10{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(10);
+  }
+}
+
+@mixin large-9{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(9);
+  }
+}
+
+@mixin large-8{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(8);
+  }
+}
+
+@mixin large-7{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(7);
+  }
+}
+
+@mixin large-6{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(6);
+  }
+}
+
+@mixin large-5{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(5);
+  }
+}
+
+@mixin large-4{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(4);
+  }
+}
+
+@mixin large-3{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(3);
+  }
+}
+
+@mixin large-2{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(2);
+  }
+}
+
+@mixin large-1{
+  @include small-12;
+  @media #{$large-up}{
+    @include grid-column(1);
+  }
+}
+
+ /* Offset */
+
+@mixin small-offset-11{
+  @media #{$small-up}{
+    @include grid-column-offset(11);
+  }
+}
+
+@mixin small-offset-10{
+  @media #{$small-up}{
+    @include grid-column-offset(10);
+  }
+}
+
+@mixin small-offset-9{
+  @media #{$small-up}{
+    @include grid-column-offset(9);
+  }
+}
+
+@mixin small-offset-8{
+  @media #{$small-up}{
+    @include grid-column-offset(8);
+  }
+}
+
+@mixin small-offset-7{
+  @media #{$small-up}{
+    @include grid-column-offset(7);
+  }
+}
+
+@mixin small-offset-6{
+  @media #{$small-up}{
+    @include grid-column-offset(6);
+  }
+}
+
+@mixin small-offset-5{
+  @media #{$small-up}{
+    @include grid-column-offset(5);
+  }
+}
+
+@mixin small-offset-4{
+  @media #{$small-up}{
+    @include grid-column-offset(4);
+  }
+}
+
+@mixin small-offset-3{
+  @media #{$small-up}{
+    @include grid-column-offset(3);
+  }
+}
+
+@mixin small-offset-2{
+  @media #{$small-up}{
+    @include grid-column-offset(2);
+  }
+}
+
+@mixin small-offset-1{
+  @media #{$small-up}{
+    @include grid-column-offset(1);
+  }
+}
+
+@mixin medium-offset-11{
+  @media #{$medium-up}{
+    @include grid-column-offset(11);
+  }
+}
+
+@mixin medium-offset-10{
+  @media #{$medium-up}{
+    @include grid-column-offset(10);
+  }
+}
+
+@mixin medium-offset-9{
+  @media #{$medium-up}{
+    @include grid-column-offset(9);
+  }
+}
+
+@mixin medium-offset-8{
+  @media #{$medium-up}{
+    @include grid-column-offset(8);
+  }
+}
+
+@mixin medium-offset-7{
+  @media #{$medium-up}{
+    @include grid-column-offset(7);
+  }
+}
+
+@mixin medium-offset-6{
+  @media #{$medium-up}{
+    @include grid-column-offset(6);
+  }
+}
+
+@mixin medium-offset-5{
+  @media #{$medium-up}{
+    @include grid-column-offset(5);
+  }
+}
+
+@mixin medium-offset-4{
+  @media #{$medium-up}{
+    @include grid-column-offset(4);
+  }
+}
+
+@mixin medium-offset-3{
+  @media #{$medium-up}{
+    @include grid-column-offset(3);
+  }
+}
+
+@mixin medium-offset-2{
+  @media #{$medium-up}{
+    @include grid-column-offset(2);
+  }
+}
+
+@mixin medium-offset-1{
+  @media #{$medium-up}{
+    @include grid-column-offset(1);
+  }
+}
+
+@mixin large-offset-11{
+  @media #{$large-up}{
+    @include grid-column-offset(11);
+  }
+}
+
+@mixin large-offset-10{
+  @media #{$large-up}{
+    @include grid-column-offset(10);
+  }
+}
+
+@mixin large-offset-9{
+  @media #{$large-up}{
+    @include grid-column-offset(9);
+  }
+}
+
+@mixin large-offset-8{
+  @media #{$large-up}{
+    @include grid-column-offset(8);
+  }
+}
+
+@mixin large-offset-7{
+  @media #{$large-up}{
+    @include grid-column-offset(7);
+  }
+}
+
+@mixin large-offset-6{
+  @media #{$large-up}{
+    @include grid-column-offset(6);
+  }
+}
+
+@mixin large-offset-5{
+  @media #{$large-up}{
+    @include grid-column-offset(5);
+  }
+}
+
+@mixin large-offset-4{
+  @media #{$large-up}{
+    @include grid-column-offset(4);
+  }
+}
+
+@mixin large-offset-3{
+  @media #{$large-up}{
+    @include grid-column-offset(3);
+  }
+}
+
+@mixin large-offset-2{
+  @media #{$large-up}{
+    @include grid-column-offset(2);
+  }
+}
+
+@mixin large-offset-1{
+  @media #{$large-up}{
+    @include grid-column-offset(1);
+  }
+}
+
+/* Push */
+
+@mixin small-push-11{
+  @media #{$small-up}{
+    @include grid-column-position(11);
+  }
+}
+
+@mixin small-push-10{
+  @media #{$small-up}{
+    @include grid-column-position(10);
+  }
+}
+
+@mixin small-push-9{
+  @media #{$small-up}{
+    @include grid-column-position(9);
+  }
+}
+
+@mixin small-push-8{
+  @media #{$small-up}{
+    @include grid-column-position(8);
+  }
+}
+
+@mixin small-push-7{
+  @media #{$small-up}{
+    @include grid-column-position(7);
+  }
+}
+
+@mixin small-push-6{
+  @media #{$small-up}{
+    @include grid-column-position(6);
+  }
+}
+
+@mixin small-push-5{
+  @media #{$small-up}{
+    @include grid-column-position(5);
+  }
+}
+
+@mixin small-push-4{
+  @media #{$small-up}{
+    @include grid-column-position(4);
+  }
+}
+
+@mixin small-push-3{
+  @media #{$small-up}{
+    @include grid-column-position(3);
+  }
+}
+
+
+@mixin small-push-2{
+  @media #{$small-up}{
+    @include grid-column-position(2);
+  }
+}
+
+@mixin small-push-1{
+  @media #{$small-up}{
+    @include grid-column-position(1);
+  }
+}
+
+@mixin medium-push-11{
+  @media #{$medium-up}{
+    @include grid-column-position(11);
+  }
+}
+
+@mixin medium-push-10{
+  @media #{$medium-up}{
+    @include grid-column-position(10);
+  }
+}
+
+@mixin medium-push-9{
+  @media #{$medium-up}{
+    @include grid-column-position(9);
+  }
+}
+
+@mixin medium-push-8{
+  @media #{$medium-up}{
+    @include grid-column-position(8);
+  }
+}
+
+@mixin medium-push-7{
+  @media #{$medium-up}{
+    @include grid-column-position(7);
+  }
+}
+
+@mixin medium-push-6{
+  @media #{$medium-up}{
+    @include grid-column-position(6);
+  }
+}
+
+@mixin medium-push-5{
+  @media #{$medium-up}{
+    @include grid-column-position(5);
+  }
+}
+
+@mixin medium-push-4{
+  @media #{$medium-up}{
+    @include grid-column-position(4);
+  }
+}
+
+@mixin medium-push-3{
+  @media #{$medium-up}{
+    @include grid-column-position(3);
+  }
+}
+
+
+@mixin medium-push-2{
+  @media #{$medium-up}{
+    @include grid-column-position(2);
+  }
+}
+
+@mixin medium-push-1{
+  @media #{$medium-up}{
+    @include grid-column-position(1);
+  }
+}
+
+@mixin large-push-11{
+  @media #{$large-up}{
+    @include grid-column-position(11);
+  }
+}
+
+@mixin large-push-10{
+  @media #{$large-up}{
+    @include grid-column-position(10);
+  }
+}
+
+@mixin large-push-9{
+  @media #{$large-up}{
+    @include grid-column-position(9);
+  }
+}
+
+@mixin large-push-8{
+  @media #{$large-up}{
+    @include grid-column-position(8);
+  }
+}
+
+@mixin large-push-7{
+  @media #{$large-up}{
+    @include grid-column-position(7);
+  }
+}
+
+@mixin large-push-6{
+  @media #{$large-up}{
+    @include grid-column-position(6);
+  }
+}
+
+@mixin large-push-5{
+  @media #{$large-up}{
+    @include grid-column-position(5);
+  }
+}
+
+@mixin large-push-4{
+  @media #{$large-up}{
+    @include grid-column-position(4);
+  }
+}
+
+@mixin large-push-3{
+  @media #{$large-up}{
+    @include grid-column-position(3);
+  }
+}
+
+
+@mixin large-push-2{
+  @media #{$large-up}{
+    @include grid-column-position(2);
+  }
+}
+
+@mixin large-push-1{
+  @media #{$large-up}{
+    @include grid-column-position(1);
+  }
+}
+
+/* Pull */
+
+@mixin small-pull-11{
+  @media #{$small-up}{
+    @include grid-column-position(-11);
+  }
+}
+
+@mixin small-pull-10{
+  @media #{$small-up}{
+    @include grid-column-position(-10);
+  }
+}
+
+@mixin small-pull-9{
+  @media #{$small-up}{
+    @include grid-column-position(-9);
+  }
+}
+
+@mixin small-pull-8{
+  @media #{$small-up}{
+    @include grid-column-position(-8);
+  }
+}
+
+@mixin small-pull-7{
+  @media #{$small-up}{
+    @include grid-column-position(-7);
+  }
+}
+
+@mixin small-pull-6{
+  @media #{$small-up}{
+    @include grid-column-position(-6);
+  }
+}
+
+@mixin small-pull-5{
+  @media #{$small-up}{
+    @include grid-column-position(-5);
+  }
+}
+
+@mixin small-pull-4{
+  @media #{$small-up}{
+    @include grid-column-position(-4);
+  }
+}
+
+@mixin small-pull-3{
+  @media #{$small-up}{
+    @include grid-column-position(-3);
+  }
+}
+
+
+@mixin small-pull-2{
+  @media #{$small-up}{
+    @include grid-column-position(-2);
+  }
+}
+
+@mixin small-pull-1{
+  @media #{$small-up}{
+    @include grid-column-position(-1);
+  }
+}
+
+@mixin medium-pull-11{
+  @media #{$medium-up}{
+    @include grid-column-position(-11);
+  }
+}
+
+@mixin medium-pull-10{
+  @media #{$medium-up}{
+    @include grid-column-position(-10);
+  }
+}
+
+@mixin medium-pull-9{
+  @media #{$medium-up}{
+    @include grid-column-position(-9);
+  }
+}
+
+@mixin medium-pull-8{
+  @media #{$medium-up}{
+    @include grid-column-position(-8);
+  }
+}
+
+@mixin medium-pull-7{
+  @media #{$medium-up}{
+    @include grid-column-position(-7);
+  }
+}
+
+@mixin medium-pull-6{
+  @media #{$medium-up}{
+    @include grid-column-position(-6);
+  }
+}
+
+@mixin medium-pull-5{
+  @media #{$medium-up}{
+    @include grid-column-position(-5);
+  }
+}
+
+@mixin medium-pull-4{
+  @media #{$medium-up}{
+    @include grid-column-position(-4);
+  }
+}
+
+@mixin medium-pull-3{
+  @media #{$medium-up}{
+    @include grid-column-position(-3);
+  }
+}
+
+
+@mixin medium-pull-2{
+  @media #{$medium-up}{
+    @include grid-column-position(-2);
+  }
+}
+
+@mixin medium-pull-1{
+  @media #{$medium-up}{
+    @include grid-column-position(-1);
+  }
+}
+
+@mixin large-pull-11{
+  @media #{$large-up}{
+    @include grid-column-position(-11);
+  }
+}
+
+@mixin large-pull-10{
+  @media #{$large-up}{
+    @include grid-column-position(-10);
+  }
+}
+
+@mixin large-pull-9{
+  @media #{$large-up}{
+    @include grid-column-position(-9);
+  }
+}
+
+@mixin large-pull-8{
+  @media #{$large-up}{
+    @include grid-column-position(-8);
+  }
+}
+
+@mixin large-pull-7{
+  @media #{$large-up}{
+    @include grid-column-position(-7);
+  }
+}
+
+@mixin large-pull-6{
+  @media #{$large-up}{
+    @include grid-column-position(-6);
+  }
+}
+
+@mixin large-pull-5{
+  @media #{$large-up}{
+    @include grid-column-position(-5);
+  }
+}
+
+@mixin large-pull-4{
+  @media #{$large-up}{
+    @include grid-column-position(-4);
+  }
+}
+
+@mixin large-pull-3{
+  @media #{$large-up}{
+    @include grid-column-position(-3);
+  }
+}
+
+
+@mixin large-pull-2{
+  @media #{$large-up}{
+    @include grid-column-position(-2);
+  }
+}
+
+@mixin large-pull-1{
+  @media #{$large-up}{
+    @include grid-column-position(-1);
+  }
+}
+
+/* Unposition -  Resets postion definition - this is one we can
+ discuss if we want to make a placeholder for or not because it's not
+ necessary but might be nice for semantics*/
+
+@mixin unposition{
+  @include grid-column-unposition;
+}
+
+/* Centre */
+
+@mixin small-centered{
+  @include grid-column-position(center);
+}
+
+@mixin medium-centered{
+  @media #{$medium-up}{
+    @include grid-column-position(center);
+  }
+}
+
+@mixin large-centered{
+  @media #{$large-up}{
+    @include grid-column-position(center);
+  }
+}