Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Basic visual grid

- TODO: Make the grid overlay responsive
  • Loading branch information...
commit 22f0bed7900d80c1cf389de7d84d7ef692efe866 1 parent ad0c7e1
@kaishin kaishin authored
Showing with 61 additions and 0 deletions.
  1. +1 −0  _neat.scss
  2. +1 −0  grid/_grid.scss
  3. +59 −0 grid/_visual-grid.scss
View
1  _neat.scss
@@ -11,3 +11,4 @@
// The Grid
@import "grid/grid";
+@import "grid/visual-grid";
View
1  grid/_grid.scss
@@ -8,6 +8,7 @@ $fg-column: $column;
$fg-gutter: $gutter;
$fg-max-columns: $grid-columns;
$fg-max-width: $max-width;
+$show-grid: true;
// outer wrapper center container
@mixin outer-container() {
View
59 grid/_visual-grid.scss
@@ -0,0 +1,59 @@
+@mixin grid-column-gradient($values...) {
+ background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+ background-image: -webkit-linear-gradient(left, $values);
+ background-image: -moz-linear-gradient(left, $values);
+ background-image: -ms-linear-gradient(left, $values);
+ background-image: -o-linear-gradient(left, $values);
+ background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@function is-even($int) {
+ @if $int%2 == 0 {
+ @return true;
+ }
+
+ @return false;
+}
+
+
+@function gradient-stops($grid-columns, $color: rgba(255,89,251,0.4)) {
+ $transparent: rgba(0,0,0,0);
+
+ $column-width: flex-grid(1, $grid-columns);
+ $gutter-width: flex-gutter($grid-columns);
+ $column-offset: $column-width;
+
+ $values: ($transparent 0, $color 0);
+
+ @for $i from 1 to $grid-columns*2 {
+ @if is-even($i) {
+ $values: append($values, $transparent $column-offset);
+ $values: append($values, $color $column-offset);
+ $column-offset: $column-offset + $column-width;
+ }
+
+ @else {
+ $values: append($values, $color $column-offset);
+ $values: append($values, $transparent $column-offset);
+ $column-offset: $column-offset + $gutter-width;
+ }
+ }
+
+ @return $values;
+}
+
+@if $show-grid == true {
+ body:before {
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ content: '';
+ display: inline-block;
+ height: 100%;
+ max-width: $max-width;
+ position: fixed;
+ width: 100%;
+ z-index: -1;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.