oulu-rails 0.6.33 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 913d2926042b17e0387b3d152c9e5af3b5dc4722
-  data.tar.gz: 1977caa16d332a16ef452615efdddf5e02510cf8
+  metadata.gz: 8f1c93be9431f5462d4e20157fa35c3b0c8a5104
+  data.tar.gz: d812a338c8cc9ad57f78f49f3c3849ae78e8bc62
 SHA512:
-  metadata.gz: 360c71129e2b7c0e1bf8774914ceef80759f3e7265d0c34a0e46fa2a74d63257e26a9b1b9cfdfc0365be9b99ca275e6de7e7276b755402c532e37d129c8f0290
-  data.tar.gz: ec6440350c3084e8573ceab079890a17c1b9522d44d4b23a3f89ad3bb801bca664326ed143597fbc9e9a1474ff3f435bfa37a7639ce67a546a4a4cf99eab4b6f
+  metadata.gz: dc02cc17f7d94f2d8ddb6042aaf474e958b98e52ee628744186f506a9ed3bbfef92f0647c6e45973ac361c70ae709590128fc2f7364cf94142db30951a761404
+  data.tar.gz: 56146d3acc15802ef3bad9ea225d731572a7eded3aa30bbd227b03b34fd08dc77fe153f29b8e9b331490301dbf9b0d8516c8acc7e6a4d3584fbfabc0dda45b9d

data/lib/oulu-rails/version.rb

@@ -1,3 +1,3 @@
 module OuluRails
-  VERSION = "0.6.33"
+  VERSION = "0.7.1"
 end

data/vendor/assets/stylesheets/_oulu-base.sass

@@ -29,7 +29,7 @@
 @import settings/functions/background
 @import settings/functions/border
 @import settings/functions/animation
-@import settings/functions/grid
+//@import settings/functions/grid
 
 // mixins
 ///////////////////
@@ -49,7 +49,9 @@
 @import settings/mixins/balloon-tail
 @import settings/mixins/margin-padding
 @import settings/mixins/animation
-@import settings/mixins/grids
+@import settings/mixins/grid/grid-framework
+@import settings/mixins/grid/grid
+@import settings/mixins/grid
 @import settings/mixins/responsive-utilities
 @import settings/mixins/background
 @import settings/mixins/line

data/vendor/assets/stylesheets/helpers/_block.sass

@@ -1,7 +1,7 @@
 body
   // layout
   .has-no-gutter-grids
-    +grid-columns(0)
+    +gird(0)
   .is-horizontal-center-block
     display: block
     +margin(horizontal, auto)

data/vendor/assets/stylesheets/modules/buttons/_button-base.sass

@@ -27,7 +27,7 @@
     $border-width: 0
   +text-block($font-size $height - ($border-width*2))
   +rem('height', $height)
-  +padding(horizontal, $height/2)
+  +padding(horizontal, $height/1.6)
   @if $border-radius
     +border-radius($border-radius)
   @if $font-size > 12px

data/vendor/assets/stylesheets/modules/buttons/styles/_flat-emboss.sass

@@ -1,3 +1,5 @@
+body
+  content: #{luma(#f2f2f2)}
 =flat-emboss-button($color: blue)
   +transition(.5s (background-image))
   background-color: $color
@@ -5,19 +7,19 @@
   box-shadow: shade($color, 18%) 0 3px 0
   text-shadow: if(luma_bright($color), lighten($color, 8%) 0 1px 0, darken($color, 8%) 0 -1px 0)
   &:hover,
-  .hover,
-  .is-hover
+  &.hover,
+  &.is-hover
     $color: lighten($color, 6%)
-    @if $color == white
-      background-color: #f4f4f4
+    @if luma($color) > 90
+      background-color: #f2f2f2
     @else
       background-color: $color
   &:active,
-  .active,
-  .is-active
+  &.active,
+  &.is-active
     $color: lighten($color, 6%)
-    @if $color == white
-      background-color: #f4f4f4
+    @if luma($color) > 90
+      background-color: #f2f2f2
     @else
       background-color: $color
     box-shadow: shade($color, 18%) 0 2px 0

data/vendor/assets/stylesheets/modules/buttons/styles/_normal.sass

@@ -16,7 +16,7 @@
 
 =normal-button($color: blue)
   +transition(.5s (background-image))
-  @if $color == white
+  @if luma($color) > 90
     +normal-button-color(#f2f2f2)
   @else
     +normal-button-color($color)
@@ -24,7 +24,7 @@
   &:hover,
   &.hover,
   &.is-hover
-    @if $color == white
+    @if luma($color) > 90
       +normal-button-color(lighten(#f2f2f2, 5%), false)
     @else
       +normal-button-color(lighten($color, 5%), false)
@@ -32,7 +32,7 @@
   &.active,
   &.is-active
     +top(1px)
-    @if $color == white
+    @if luma($color) > 90
       $color: lighten(#f2f2f2, 7%)
       +normal-button-color($color, false)
       box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px

data/vendor/assets/stylesheets/settings/functions/_color.sass

@@ -22,8 +22,8 @@
   @else
     @return null
 
+// Adapted from: https://gist.github.com/voxpelli/6304812
 @function luma($color)
-  // Adapted from: https://gist.github.com/voxpelli/6304812
   $rgba: red($color), green($color), blue($color)
   $rgba2: ()
   @for $i from 1 through 3
@@ -33,8 +33,6 @@
     $rgba2: append($rgba2, $rgb)
   @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3))*100
 
-$ruma-threshold: 100 / pi() !default
-
 @function luma_contrast($color-1, $color-2: null)
   @if $color-2
     @if abs(luma($color-1) - luma($color-2)) > $ruma-threshold
@@ -66,8 +64,6 @@ $ruma-threshold: 100 / pi() !default
     @return null
 
 @function luma_contrast_color($color)
-  $luma-contrast-bright-color: #000000 !default
-  $luma-contrast-dark-color: #ffffff !default
   @if luma_which($color) == bright
     @return $luma-contrast-bright-color
   @else

data/vendor/assets/stylesheets/settings/mixins/_grid.sass

@@ -0,0 +1,88 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.container
+  +container-fixed
+
+  @media (min-width: $screen-sm-min)
+    width: $container-sm
+
+  @media (min-width: $screen-md-min)
+    width: $container-md
+
+  @media (min-width: $screen-lg-min)
+    width: $container-lg
+
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid
+  +container-fixed
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row
+  +make-row
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
++make-grid-columns
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
++make-grid(xs)
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: $screen-sm-min)
+  +make-grid(sm)
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: $screen-md-min)
+  +make-grid(md)
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $screen-lg-min)
+  +make-grid(lg)
+
+.row,
+[class^="col-"]
+  box-sizing: border-box
+
+=gird($gutter-size)
+  &.row
+    +margin(horizontal, $gutter-size/2 * -1)
+    >[class^="col-"]
+      +padding(horizontal, $gutter-size/2)

data/vendor/assets/stylesheets/settings/mixins/_responsive-utilities.sass

@@ -1,3 +1,21 @@
+// device
+=screen-xs
+  @media only screen and (max-width: $screen-xs)
+    @content
+=screen-sm
+  @media only screen and (max-width: $screen-sm)
+    @content
+=screen-md
+  @media only screen and (max-width: $screen-md)
+    @content
+=screen-lg
+  @media only screen and (max-width: $screen-lg)
+    @content
+=screen-xl
+  @media only screen and (min-width: $screen-lg)
+    @content
+
+
 // https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss
 
 =responsive-visibility($parent)

data/vendor/assets/stylesheets/settings/mixins/grid/_grid-framework.scss

@@ -0,0 +1,81 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+  }
+  #{$list} {
+    position: relative;
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    // Inner gutter via padding
+    padding-left:  ceil(($grid-gutter-width / 2));
+    padding-right: floor(($grid-gutter-width / 2));
+  }
+}
+
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-#{$class}-#{$i}";
+  }
+  #{$list} {
+    float: left;
+  }
+}
+
+
+@mixin calc-grid-column($index, $class, $type) {
+  @if ($type == width) and ($index > 0) {
+    .col-#{$class}-#{$index} {
+      width: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index > 0) {
+    .col-#{$class}-push-#{$index} {
+      left: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index == 0) {
+    .col-#{$class}-push-0 {
+      left: auto;
+    }
+  }
+  @if ($type == pull) and ($index > 0) {
+    .col-#{$class}-pull-#{$index} {
+      right: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == pull) and ($index == 0) {
+    .col-#{$class}-pull-0 {
+      right: auto;
+    }
+  }
+  @if ($type == offset) {
+    .col-#{$class}-offset-#{$index} {
+      margin-left: percentage(($index / $grid-columns));
+    }
+  }
+}
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin loop-grid-columns($columns, $class, $type) {
+  @for $i from 0 through $columns {
+    @include calc-grid-column($i, $class, $type);
+  }
+}
+
+
+// Create grid for specific class
+@mixin make-grid($class) {
+  @include float-grid-columns($class);
+  @include loop-grid-columns($grid-columns, $class, width);
+  @include loop-grid-columns($grid-columns, $class, pull);
+  @include loop-grid-columns($grid-columns, $class, push);
+  @include loop-grid-columns($grid-columns, $class, offset);
+}

data/vendor/assets/stylesheets/settings/mixins/grid/_grid.scss

@@ -0,0 +1,122 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+  @include clearfix;
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+  margin-left:  ceil(($gutter / -2));
+  margin-right: floor(($gutter / -2));
+  @include clearfix;
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  float: left;
+  width: percentage(($columns / $grid-columns));
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+}
+@mixin make-xs-column-offset($columns) {
+  margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+  left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+  right: percentage(($columns / $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-sm-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-sm-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-sm-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-md-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-md-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-md-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-lg-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-lg-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-lg-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-lg-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}

data/vendor/assets/stylesheets/settings/variables/_default.sass

@@ -29,22 +29,74 @@ $input-selection-tx-color: black !default
 
 $bright-text-color: white !default
 $dark-text-color: black !default
+$ruma-threshold: 100 / pi() !default
 
 /////////////////
 // grids
 ////////////////
 
 // screens
+//== Media queries breakpoints
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
 $screen-xs: 480px !default
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs !default
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:  $screen-xs-min !default
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
 $screen-sm: 768px !default
+$screen-sm-min: $screen-sm !default
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min !default
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
 $screen-md: 992px !default
+$screen-md-min: $screen-md !default
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min !default
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
 $screen-lg: 1200px !default
+$screen-lg-min: $screen-lg !default
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min !default
 
-// 横一列の最大カラム数
-$columns-count: 12 !default
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default
+$screen-sm-max: ($screen-md-min - 1) !default
+$screen-md-max: ($screen-lg-min - 1) !default
+$screen-lg-max: ($screen-lg-min - 1) !default
 
+// 横一列の最大カラム数
+$grid-columns: 12 !default
 // カラムとカラムの間のスペース
-$gutter-width: 50px !default
+$grid-gutter-width: 32px
+
+
+//== Container sizes
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet: (720px + $grid-gutter-width) !default
+//** For `$screen-sm-min` and up.
+$container-sm: $container-tablet !default
+
+// Medium screen / desktop
+$container-desktop: (940px + $grid-gutter-width) !default
+//** For `$screen-md-min` and up.
+$container-md: $container-desktop !default
+
+// Large screen / wide desktop
+$container-large-desktop: (1140px + $grid-gutter-width) !default
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop !default
 
 /////////////////
 // font
@@ -83,3 +135,10 @@ $twitter: #55acee
 $facebook: #3b5998
 $hatena: #008FDE
 $pocket: #f23c53
+
+$default-text: black !default
+$reversal-text: white !default
+
+// luma contrast color
+$luma-contrast-bright-color: $default-text !global
+$luma-contrast-dark-color: $reversal-text !global

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: oulu-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.33
+  version: 0.7.1
 platform: ruby
 authors:
 - machida
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-29 00:00:00.000000000 Z
+date: 2015-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass-rails
@@ -156,7 +156,7 @@ files:
 - vendor/assets/stylesheets/settings/mixins/_border.sass
 - vendor/assets/stylesheets/settings/mixins/_filters.sass
 - vendor/assets/stylesheets/settings/mixins/_form.sass
-- vendor/assets/stylesheets/settings/mixins/_grids.sass
+- vendor/assets/stylesheets/settings/mixins/_grid.sass
 - vendor/assets/stylesheets/settings/mixins/_ie-hacks.sass
 - vendor/assets/stylesheets/settings/mixins/_image.sass
 - vendor/assets/stylesheets/settings/mixins/_line.sass
@@ -170,6 +170,8 @@ files:
 - vendor/assets/stylesheets/settings/mixins/_responsive-utilities.sass
 - vendor/assets/stylesheets/settings/mixins/_table.sass
 - vendor/assets/stylesheets/settings/mixins/_text.sass
+- vendor/assets/stylesheets/settings/mixins/grid/_grid-framework.scss
+- vendor/assets/stylesheets/settings/mixins/grid/_grid.scss
 - vendor/assets/stylesheets/settings/variables/_default.sass
 homepage: http://oulu.github.io/
 licenses: []

data/vendor/assets/stylesheets/settings/mixins/_grids.sass

@@ -1,146 +0,0 @@
-// Extra small screen / phone
-//** Deprecated `$screen-xs-min` as of v3.2.0
-$screen-xs-min: $screen-xs !default
-//** Deprecated `$screen-phone` as of v3.0.1
-$screen-phone: $screen-xs-min !default
-
-// Small screen / tablet
-$screen-sm-min: $screen-sm !default
-//** Deprecated `$screen-tablet` as of v3.0.1
-$screen-tablet: $screen-sm-min !default
-
-// Medium screen / desktop
-$screen-md-min: $screen-md !default
-//** Deprecated `$screen-desktop` as of v3.0.1
-$screen-desktop: $screen-md-min !default
-
-// Large screen / wide desktop
-$screen-lg-min: $screen-lg !default
-//** Deprecated `$screen-lg-desktop` as of v3.0.1
-$screen-lg-desktop: $screen-lg-min !default
-
-// So media queries don't overlap when required, provide a maximum
-$screen-xs-max: ($screen-sm-min - 1) !default
-$screen-sm-max: ($screen-md-min - 1) !default
-$screen-md-max: ($screen-lg-min - 1) !default
-$screen-lg-max: ($screen-lg-min - 1) !default
-
-// device
-=screen-xs
-  @media only screen and (max-width: $screen-xs)
-    @content
-=screen-sm
-  @media only screen and (max-width: $screen-sm)
-    @content
-=screen-md
-  @media only screen and (max-width: $screen-md)
-    @content
-=screen-lg
-  @media only screen and (max-width: $screen-lg)
-    @content
-=screen-xl
-  @media only screen and (min-width: $screen-lg)
-    @content
-
-// カラムのラッパーのクラス名
-$row-class-name: '.row' !default
-// カラムのネームスペース ※classの".（カンマ）"もネームスペースの一部
-$column-namespace: '.col-' !default
-// オフセットカラムのネームスペース
-$column-offset-namespace: 'offset-' !default
-// ブレイクポイントごとのカラムのプレフィックスのネームスペース
-$break-point-xs-namespace: 'xs-' !default
-$break-point-sm-namespace: 'sm-' !default
-$break-point-md-namespace: 'md-' !default
-$break-point-lg-namespace: 'lg-' !default
-$break-point-xl-namespace: 'xl-' !default
-
-// ブレイクポイントを配列にする
-$break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace,  $break-point-xl-namespace
-
-// デバイスごとの media query を作る
-=break-points($break-point: $break-point-xs-namespace)
-  @if $screen-xs and $break-point == $break-point-xs-namespace
-    @content
-  @else if $screen-sm and $break-point == $break-point-sm-namespace
-    @media only screen and (min-width: $screen-xs)
-      @content
-  @else if $screen-md and $break-point == $break-point-md-namespace
-    @media only screen and (min-width: $screen-sm)
-      @content
-  @else if $screen-lg and $break-point == $break-point-lg-namespace
-    @media only screen and (min-width: $screen-md)
-      @content
-  @else if $screen-lg and $break-point == $break-point-xl-namespace
-    @media only screen and (min-width: $screen-lg)
-      @content
-
-// カラムのラッパーの設定
-#{$row-class-name}
-  // カラムのマージン分だけ両サイドにネガティブマージンを取る
-  +margin(horizontal, ($gutter-width / 2) * -1)
-  +rem('min-height', 1px)
-  +clearfix
-
-// カラムの基本設定
-=column($number, $columns-gutter-width: $gutter-width)
-  +rem('width', 100 / $columns-count * $number * 1%)
-  +padding(horizontal, $columns-gutter-width / 2)
-  box-sizing: border-box
-  float: left
-
-// カラムをサイズごとに作る
-@each $break-point in $break-points
-  +break-points($break-point)
-    @for $i from 1 through $columns-count
-      #{$column-namespace}#{$break-point}#{$i}
-        +column($i)
-
-// オフセットカラムの基本設定
-=column-offset($number)
-  +rem('margin-left', 100 / $columns-count * $number * 1%)
-
-// オフセットカラムをサイズごとに作る
-@each $break-point in $break-points
-  +break-points($break-point)
-    @for $i from 1 through $columns-count
-      #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
-        +column-offset($i)
-
-=grid-columns($values)
-  $columns-gutter-width: 0 !default
-  $temp-columns-count: 12 !default
-  $temp-break-points: 'xs', 'sm', 'md', 'lg' !default
-  $grid-columns-row-class-name: '.row' !default
-  $offsets: false !default
-  @for $i from 1 through length($values)
-    @if gutter_width(nth($values, $i))
-      $columns-gutter-width: nth($values, $i)
-    @else if columns_count(nth($values, $i))
-      $temp-columns-count: nth($values, $i)
-    @else if break_point(nth($values, $i))
-      $temp-break-points: nth($values, $i)
-    @else if row_class_name(nth($values, $i))
-      $grid-columns-row-class-name: nth($values, $i)
-    @else if offsets(nth($values, $i))
-      $offsets: nth($values, $i)
-  #{$grid-columns-row-class-name}
-    // カラムのマージン分だけ両サイドにネガティブマージンを取る
-    +margin(horizontal, ($columns-gutter-width / 2) * -1)
-    +clearfix
-    // カラムをサイズごとに作る
-    $break-points: ()
-    @each $temp-break-point in $temp-break-points
-      $break-points: append($break-points, if($temp-break-point == 'xs', $break-point-xs-namespace, null))
-      $break-points: append($break-points, if($temp-break-point == 'sm', $break-point-sm-namespace, null))
-      $break-points: append($break-points, if($temp-break-point == 'md', $break-point-md-namespace, null))
-      $break-points: append($break-points, if($temp-break-point == 'lg', $break-point-lg-namespace, null))
-      $break-points: append($break-points, if($temp-break-point == 'xl', $break-point-xl-namespace, null))
-    @each $break-point in $break-points
-      +break-points($break-point)
-        @for $i from 1 through $temp-columns-count
-          #{$column-namespace}#{$break-point}#{$i}
-            +column($i, $columns-gutter-width)
-          @if $offsets
-            #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
-              +column-offset($i)