_grid.sass in oulu-1.0.0.beta1

- old
+ new
@@ -1,181 +1,74 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
 
-.#{$container-class-name}
-  +make-container
+.container
+  +container-fixed
   max-width: $container-max-width
 
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
-
-.container-fluid
-  +make-container
-
 // Row
 //
 // Rows contain and clear the floats of your columns.
 
 .row
   +make-row
 
+
 // Columns
 //
 // Common styles for small and large grid columns
 
-.row>[class*=col-]
-  position: relative
-  // Inner gutter via padding
-  +padding(horizontal, $grid-gutter-width / 2)
-
 +make-grid-columns
 
-.col-xs-first
-  order: -1
-.col-xs-last
-  order: 1
 
-+media-breakpoint-up(sm)
-  .col-sm-first
-    order: -1
-  .col-sm-last
-    order: 1
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
 
-+media-breakpoint-up(md)
-  .col-md-first
-    order: -1
-  .col-md-last
-    order: 1
++make-grid(xs)
 
-+media-breakpoint-up(lg)
-  .col-lg-first
-    order: -1
-  .col-lg-last
-    order: 1
 
-+media-breakpoint-up(xl)
-  .col-xl-first
-    order: -1
-  .col-xl-last
-    order: 1
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
 
-// Alignment for every column in row
+@media (min-width: $screen-sm-min)
+  +make-grid(sm)
 
-.row-xs-top
-  align-items: flex-start
-.row-xs-center
-  align-items: center
-.row-xs-bottom
-  align-items: flex-end
 
-+media-breakpoint-up(sm)
-  .row-sm-top
-    align-items: flex-start
-  .row-sm-center
-    align-items: center
-  .row-sm-bottom
-    align-items: flex-end
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
 
-+media-breakpoint-up(md)
-  .row-md-top
-    align-items: flex-start
-  .row-md-center
-    align-items: center
-  .row-md-bottom
-    align-items: flex-end
+@media (min-width: $screen-md-min)
+  +make-grid(md)
 
-+media-breakpoint-up(lg)
-  .row-lg-top
-    align-items: flex-start
-  .row-lg-center
-    align-items: center
-  .row-lg-bottom
-    align-items: flex-end
 
-+media-breakpoint-up(xl)
-  .row-xl-top
-    align-items: flex-start
-  .row-xl-center
-    align-items: center
-  .row-xl-bottom
-    align-items: flex-end
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
 
-// Alignment per column
+@media (min-width: $screen-lg-min)
+  +make-grid(lg)
 
-.col-xs-top
-  align-self: flex-start
-.col-xs-center
-  align-self: center
-.col-xs-bottom
-  align-self: flex-end
-
-+media-breakpoint-up(sm)
-  .col-sm-top
-    align-self: flex-start
-  .col-sm-center
-    align-self: center
-  .col-sm-bottom
-    align-self: flex-end
-
-+media-breakpoint-up(md)
-  .col-md-top
-    align-self: flex-start
-  .col-md-center
-    align-self: center
-  .col-md-bottom
-    align-self: flex-end
-
-+media-breakpoint-up(lg)
-  .col-lg-top
-    align-self: flex-start
-  .col-lg-center
-    align-self: center
-  .col-lg-bottom
-    align-self: flex-end
-
-+media-breakpoint-up(xl)
-  .col-xl-top
-    align-self: flex-start
-  .col-xl-center
-    align-self: center
-  .col-xl-bottom
-    align-self: flex-end
-
 =grid($gutter-size)
   &.row
     +margin(horizontal, $gutter-size/2 * -1)
     >*
       +padding(horizontal, $gutter-size/2)
 
 // helper
 .row
   @for $i from 0 through 16
     $gutter-size: $i * 4
-    $breakpoints: xs, sm, md, lg, xl, false
-    $scopes: up, down, only
-    @each $breakpoint in $breakpoints
-      @if $breakpoint
-        @each $scope in $scopes
-          &.is-gutter-width-#{$gutter-size}-#{$breakpoint}-#{$scope}
-            @if $scope == up
-              +media-breakpoint-up($breakpoint)
-                +margin(horizontal, px_to_rem($gutter-size * 1px, $base-px) / -2)
-                >[class*=col-]
-                  +padding(horizontal, px_to_rem($gutter-size * 1px, $base-px) / 2)
-            @else if $scope == down
-              +media-breakpoint-down($breakpoint)
-                +margin(horizontal, px_to_rem($gutter-size * 1px, $base-px) / -2)
-                >[class*=col-]
-                  +padding(horizontal, px_to_rem($gutter-size * 1px, $base-px) / 2)
-            @else if $scope == only
-              +media-breakpoint-only($breakpoint)
-                +margin(horizontal, px_to_rem($gutter-size * 1px, $base-px) / -2)
-                >[class*=col-]
-                  +padding(horizontal, px_to_rem($gutter-size * 1px, $base-px) / 2)
-      @else
-        &.is-gutter-width-#{$gutter-size}
-          +margin(horizontal, px_to_rem($gutter-size * 1px, $base-px) / -2)
-          >[class*=col-]
-            +padding(horizontal, px_to_rem($gutter-size * 1px, $base-px) / 2)
+    &.is-gutter-width-#{$gutter-size}px
+      +margin(horizontal, $gutter-size / 2 * -1px)
+      >*
+        +padding(horizontal, $gutter-size / 2 * 1px)