GIPainter-grid 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d572e4e99c8dde566bd55da0ab45c28a245182c4
-  data.tar.gz: 24327d4c3345a979be25ce9796b71f784634ebbd
+  metadata.gz: 0ab6dfb7988cca0cccefeff0babcf9ac8c10c8cd
+  data.tar.gz: e7ef9afb5b46300ed4f40712c160c48b721e0985
 SHA512:
-  metadata.gz: 40a5f50f56f56d7cbab00c895a238b3f063615edb8653e36142b3f8be42c09866e78ef92b10252d3b0c86bdf929b2d56a1d26c119b322cf5ea8c920dee4671a2
-  data.tar.gz: b94e02d67efde27f3de2d044102abd660448a29e0c148f10e7f19617ad59a2610f1f7f2d185b715d1380686f1839654e4ec8630186ff59ef63f488c5dbf4ce4a
+  metadata.gz: 07cd090b848d01bbb10d01c45e06cced66a63d884cf0ffe208b11cf6ec81d6206999c546bc23d604974a3d70f882c6431b5f708650adaaae5b8eff11b56ed19f
+  data.tar.gz: 376aa94281e35c453b228208b37809e078a993f8ce653a0146cd68e90e371f1fafb7a13e11d0232a6f371408f046671646ae85f38b416a83190727b864b14a0d

data/assets/stylesheets/Base/_column.scss

@@ -0,0 +1,151 @@
+.o-column{
+  @include flexboxgrid-sass-col-common;
+
+  &--reverse {
+    @include flex-direction(column-reverse);
+  }
+
+  &--auto{
+    @include flex-basis(auto);
+  }
+
+  @for $i from 1 through $max-grid-columns {
+    @for $j from 1 through $max-grid-columns {
+      &--size-#{$i}of#{$j} {
+        @include flex-basis(grid-size($i, $j));
+        max-width: grid-size($i, $j);
+      }
+    }
+  }
+
+  @for $i from 1 through $max-grid-columns {
+    @for $j from 1 through $max-grid-columns {
+      &--offset-#{$i}of#{$j} {
+        @include flexboxgrid-sass-col-common;
+        @if $i == 0 {
+          margin-left: 0;
+        } @else {
+          margin-left: 100% / $grid-columns * $i;
+        }
+      }
+    }
+  }
+
+  &--start {
+    @include justify-content(flex-start);
+    text-align: start;
+  }
+
+  &--center {
+    @include justify-content(center);
+    text-align: center;
+  }
+
+  &--end {
+    @include justify-content(flex-end);
+    text-align: end;
+  }
+
+  &--around {
+    @include justify-content(space-around);
+  }
+
+  &--between {
+    @include justify-content(space-between);
+  }
+
+  &--top {
+    @include align-items(flex-start);
+  }
+
+  &--middle {
+    @include align-items(center);
+  }
+
+  &--bottom {
+    @include align-items(flex-end);
+  }
+
+  &--first {
+    order: -1;
+  }
+
+  &--last {
+    order: 1;
+  }
+}
+
+@each $name, $value in $default_breakpoint {
+  @include mquery($value) {
+    .o-column--#{"" + $name} {
+      &-size-auto {
+        @include flex-basis(auto);
+      }
+
+      @for $i from 1 through $max-grid-columns {
+        @for $j from 1 through $max-grid-columns {
+          &-size-#{$i}of#{$j} {
+            @include flex-basis(grid-size($i, $j));
+            max-width: grid-size($i, $j);
+          }
+        }
+      }
+
+      @for $i from 1 through $max-grid-columns {
+        @for $j from 1 through $max-grid-columns {
+          &-offset-#{$i}of#{$j} {
+            @include flexboxgrid-sass-col-common;
+            @if $i == 0 {
+              margin-left: 0;
+            } @else {
+              margin-left: 100% / $grid-columns * $i;
+            }
+          }
+        }
+      }
+
+      &-start {
+        @include justify-content(flex-start);
+        text-align: start;
+      }
+
+      &-center {
+        @include justify-content(center);
+        text-align: center;
+      }
+
+      &-end {
+        @include justify-content(flex-end);
+        text-align: end;
+      }
+
+      &-around {
+        @include justify-content(space-around);
+      }
+
+      &-between {
+        @include justify-content(space-between);
+      }
+
+      &-top {
+        @include align-items(flex-start);
+      }
+
+      &-middle {
+        @include align-items(center);
+      }
+
+      &-bottom {
+        @include align-items(flex-end);
+      }
+
+      &-first {
+        order: -1;
+      }
+
+      &-last {
+        order: 1;
+      }
+    }
+  }
+}

data/assets/stylesheets/Base/_core.scss

@@ -0,0 +1,32 @@
+.m-grid {
+  clear: both;
+  display: block;
+  letter-spacing: -0.31em;
+  *letter-spacing: normal;
+  *word-spacing: -0.43em;
+  text-rendering: optimizespeed;
+
+  .m-grid {
+    margin-left: -$grid-padding;
+    margin-right: -$grid-padding;
+  }
+
+  > .m-grid {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &__wrapper {
+    *zoom: 1;
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+      line-height: 0;
+    }
+    &:after {
+      clear: both;
+    }
+  }
+}
+

data/assets/stylesheets/Base/_row.scss

@@ -0,0 +1,19 @@
+.o-row {
+  display: block;
+  @include flexbox();
+  @include flex(0, 1, auto);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+  margin: 0 auto;
+  padding: 0 $outer-margin;
+  max-width: $grid-max-width;
+  box-sizing: border-box;
+
+  &--full {
+    max-width: 100% !important;
+  }
+
+  &--reverse {
+    @include flex-direction(row-reverse);
+  }
+}

data/assets/stylesheets/Functions/_grid.scss

@@ -0,0 +1,3 @@
+@function grid-size($column, $size) {
+  @return ($column/$size)*100%
+}

data/assets/stylesheets/Mixins/_grid.scss

@@ -0,0 +1,10 @@
+@mixin flexboxgrid-sass-col-common {
+  box-sizing: border-box;
+
+  @include flex-grow(0);
+  @include flex-shrink(0);
+
+  padding-right: $half-gutter-width;
+  padding-left: $half-gutter-width;
+  max-width: 100%;
+}

data/assets/stylesheets/Variables/_grid.scss

@@ -0,0 +1,31 @@
+//-----------------------------------
+// GRID VARIABLES
+//-----------------------------------
+
+////
+/// @access public
+/// @group Grid
+/// @type String
+////
+
+/// Grid variables
+/// @prop {Number} max-grid-columns [$max-grid-columns]
+/// @prop {Length} gutter-width [$gutter-width]
+/// @prop {Length} outer-margin [$outer-margin]
+/// @prop {Length} grid-max-width [$grid-max-width]
+/// @prop {Length} grid-padding [$grid-padding]
+/// @prop {Length} half-gutter-width [$half-gutter-width]
+
+$max-grid-columns: 12 !default;
+$gutter-width: 1rem !default;
+$outer-margin: 2rem !default;
+$grid-max-width: 1200px !default;
+$grid-padding: 0.71429em !default;
+$half-gutter-width: $gutter-width * .5;
+
+$default_breakpoint: (
+        xs: $screen-xs,
+        sm: $screen-sm,
+        md: $screen-md,
+        lg: $screen-lg
+);

data/lib/GIPainter-grid/version.rb

@@ -1,3 +1,3 @@
 module GIPainter_grid
-  VERSION       = '0.1.0'
+  VERSION       = '0.2.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: GIPainter-grid
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Genious Interactive
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-17 00:00:00.000000000 Z
+date: 2017-02-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: GIPainter-base
@@ -144,7 +144,12 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
+- assets/stylesheets/Base/_column.scss
 - assets/stylesheets/Base/_core.scss
+- assets/stylesheets/Base/_row.scss
+- assets/stylesheets/Functions/_grid.scss
+- assets/stylesheets/Mixins/_grid.scss
+- assets/stylesheets/Variables/_grid.scss
 - assets/stylesheets/_GIPainter-grid.scss
 - lib/GIPainter-grid.rb
 - lib/GIPainter-grid/version.rb