_grid.sass in oulu-0.11.0

- old
+ new
@@ -1,74 +1,165 @@
+// Container widths
 //
-// Grid system
-// --------------------------------------------------
+// Set the container width, and override it for fixed navbars in media queries.
 
+.#{$container-class-name}
+  +make-container
 
-// Container widths
+  // For each breakpoint, define the maximum width of the container in a media query
+  @each $breakpoint, $container-max-width in $container-max-widths
+    +media-breakpoint-up($breakpoint)
+      max-width: $container-max-width
+
+// Fluid container
 //
-// Set the container width, and override it for fixed navbars in media queries.
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
 
-.container
-  +container-fixed
-  max-width: $container-max-width
+.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
+  // Prevent columns from collapsing when empty
+  min-height: 1px
+  // Inner gutter via padding
+  +padding(horizontal, $grid-gutter-width / 2)
+
 +make-grid-columns
 
+.col-xs-first
+  order: -1
+.col-xs-last
+  order: 1
 
-// Extra small grid
-//
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
++media-breakpoint-up(sm)
+  .col-sm-first
+    order: -1
+  .col-sm-last
+    order: 1
 
-+make-grid(xs)
++media-breakpoint-up(md)
+  .col-md-first
+    order: -1
+  .col-md-last
+    order: 1
 
++media-breakpoint-up(lg)
+  .col-lg-first
+    order: -1
+  .col-lg-last
+    order: 1
 
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
++media-breakpoint-up(xl)
+  .col-xl-first
+    order: -1
+  .col-xl-last
+    order: 1
 
-@media (min-width: $screen-sm-min)
-  +make-grid(sm)
+// Alignment for every column in row
 
+.row-xs-top
+  align-items: flex-start
+.row-xs-center
+  align-items: center
+.row-xs-bottom
+  align-items: flex-end
 
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
++media-breakpoint-up(sm)
+  .row-sm-top
+    align-items: flex-start
+  .row-sm-center
+    align-items: center
+  .row-sm-bottom
+    align-items: flex-end
 
-@media (min-width: $screen-md-min)
-  +make-grid(md)
++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-breakpoint-up(lg)
+  .row-lg-top
+    align-items: flex-start
+  .row-lg-center
+    align-items: center
+  .row-lg-bottom
+    align-items: flex-end
 
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
++media-breakpoint-up(xl)
+  .row-xl-top
+    align-items: flex-start
+  .row-xl-center
+    align-items: center
+  .row-xl-bottom
+    align-items: flex-end
 
-@media (min-width: $screen-lg-min)
-  +make-grid(lg)
+// Alignment per column
 
+.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
-    &.is-gutter-width-#{$gutter-size}px
-      +margin(horizontal, $gutter-size / 2 * -1px)
+    &.is-gutter-width-#{$gutter-size}#{if($gutter-size == 0, null, rem)}
+      +margin(horizontal, $gutter-size / 2 * -1)
       >*
-        +padding(horizontal, $gutter-size / 2 * 1px)
+        +padding(horizontal, $gutter-size / 2 * 1)