brevis 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f88794dc8cc100d902f5f89c130ecf3873e695f1
-  data.tar.gz: 8d2e28ba0f235fd1022c58bde78662b5823ab5bd
+  metadata.gz: 766a14b810fb2c477cc00d18ab97d150b78c16a0
+  data.tar.gz: 27163c2a5fdd295a14f1a5fc66a6022cc54c44c4
 SHA512:
-  metadata.gz: 202646c08b07b448efaa43d219c07ae0ddb9292307ec8e641c3ebb000328bc9d1824a26e583f0695fe2b5d8b944b5114bc3aceb1a9fdcd9807ff5aaf08f8ee79
-  data.tar.gz: 104bbca6aff1c1f73449ac7d4a730a2bd6586befb5765cf17af0157a4ce4e052bc96eb34d07d5e97e609eebc0780737bb3513b79e8e06851f10a3160a4ca1ff7
+  metadata.gz: ab00d22c8c148c2a1b27e8e7cc1cfd2d44da80a97ce821fa41178a2d96f6d51b3f9c6d33d00bb50173096e6368fccb6a10abe2a1ee78dd2e4defd220068230d5
+  data.tar.gz: bc24401d8b6784c5674a880ba5dbe261b829849c5a25ecc041b702b3b5254ec3543f878be6a9607eb47bda08533bc481f4daa1c22cb3e675815cbb145a6e952d

data/lib/brevis.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('brevis', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Brevis
-  VERSION = "0.1.5"
-  DATE = "2015-01-29"
+  VERSION = "0.1.6"
+  DATE = "2015-02-03"
 end
 
 # This is where any custom SassScript should be placed. The functions will be

data/stylesheets/brevis_utilities/_layout.scss

@@ -1,33 +1,125 @@
 
-////////////////////////////////////////////////////
-// FLUID GRID COLUMNS  http://sassmeister.com/gist/710eded4e6a323fdfdb6
 ///////////////////////////////////////////////////
-$fluid-grid-cols: 1;
-$fluid-grid-grid-rows: 10;
-$fluid-grid-padding: 20px;
-$fluid-grid-class-name: views-row;
+// SYMMETRIC (FLUID) GRID
+// http://sassmeister.com/gist/9226e7dc2a5f2dc0cef9
+////////////////////////////////////////////////////
+// ----
+// Sass (v3.3.14)
+// Compass (v1.0.1)
+// Breakpoint (v2.5.0)
+// Toolkit (v2.6.0)
+// ----
+
+@import "compass";
+@import "toolkit";
+@import "breakpoint";
+
+// Styles for niceness
+body {
+  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+  background: #dddddd;
+  color: #222222;
+  p {
+    margin: 3px 0;
+  }
+  img {
+    max-width: 100%;
+  }
+}
+*, *:before, *:after {
+  box-sizing: border-box;
+}
 
-@mixin fluid-grid(
- $cols: $fluid-grid-cols,
- $grid-rows: $fluid-grid-grid-rows,
- $padding: $fluid-grid-padding,
- $class-name: $fluid-grid-class-name
-){
-  .#{$class-name} {
-    width: calc((100% / #{$cols}) + (#{$padding} / #{$cols}));
-    padding: 0 0 $padding $padding;
+$sg-cols: 3;
+$sg-spacing: 20px;
+$sg-offset: null;
+$sg-margin-direction: right;
+$sg-rows: 4;
+
+@mixin symmetric-grid(
+  $cols: $sg-cols,
+  $space: $sg-spacing,
+  $offset: $sg-offset,
+  $margin-direction: $sg-margin-direction,
+  $rows: $sg-rows
+  ){
+  margin-#{$margin-direction}: $space;
+  clear: none;
+  max-width: 100%;
+  $minus-margins: ceil($space * ($cols - 1) / $cols) + 1px;
+  @if $margin-direction == "right" {
+    float: left;
   }
-  @for $x from 1 through $grid-rows {
-    .#{$class-name}-#{$x * $cols - ($cols - 1)} {
-      margin-left: -$padding;
-      clear: both;
+  @if $margin-direction == "left" {
+    float: right;
+  }
+  @if $offset {
+    &:nth-child(#{$offset}) {
+      width: 100%;
+    }
+    &:nth-child(n+#{$offset + 1}) {
+      width: calc((100% / #{$cols}) - #{$minus-margins});
+    }
+    @for $i from 1 through $rows {
+      &:nth-child(#{$cols * $i + $offset}) {
+        margin-#{$margin-direction}: 0;
+      }
+      &:nth-child(#{$cols * $i + 1 + $offset}) {
+        clear: left;
+      }
+      &:nth-child(n + #{$i + $offset}) {
+        margin-top: $sg-spacing;
+      }
     }
   }
+  @else {
+    width: calc((100% / #{$cols}) - #{$minus-margins});
+    @for $i from 1 through $rows {
+      &:nth-child(#{$cols * $i}) {
+        margin-#{$margin-direction}: 0;
+      }
+      &:nth-child(#{$cols * $i + 1}) {
+        clear: left;
+      }
+      &:nth-child(n + #{$i * $rows + 1}) {
+        margin-top: $sg-spacing;
+      }
+    }
+  }
+}
+
+// EXAMPLE
+//.view-foobar .views-row {
+//  @include breakpoint(500px 700px){
+//    @include symmetric-grid(2, 10px);
+//  }
+//  @include breakpoint(700px 1000px){
+//    @include symmetric-grid(3, 10px);
+//  }
+//  @include breakpoint(1000px){
+//    @include symmetric-grid(4, 30px, 1);
+//  }
+//}
+
+// old syntax
+@mixin region-col (
+  $rc-cols: $sg-cols,
+  $rc-space: $sg-spacing,
+  $rc-offset: $sg-offset,
+  $rc-margin-direction: $sg-margin-direction,
+  $rc-rows: $sg-rows
+  ){
+  @include fluid-grid($rc-cols,$rc-spacing, $rc-offset, $rc-margin-direction, $rc-rows);
 }
 
-@mixin grid-mobile(
- $class-name: $fluid-grid-class-name
-){
+////////////////////////////////////////////////////
+// DISCONTINUED FLUID GRID:
+$fluid-grid-cols: 1;
+$fluid-grid-grid-rows: 10;
+$fluid-grid-padding: 2%;
+$fluid-grid-class-name: views-row;
+
+@mixin grid-mobile($class-name: $fluid-grid-class-name) {
   .#{$class-name} {
     float: left;
     clear: both;
@@ -36,9 +128,7 @@ $fluid-grid-class-name: views-row;
   }
 }
 
-@mixin grid-desktop(
- $class-name: $fluid-grid-class-name
- ){
+@mixin grid-desktop($class-name: $fluid-grid-class-name) {
   .#{$class-name} {
     float: left;
     clear: none;
@@ -46,14 +136,18 @@ $fluid-grid-class-name: views-row;
   }
 }
 
-// When using the fluid grid mixin, plug in the following variables:
-// the number of columns
-// the number of rows (if you are unsure guess and add 1 or 2)
-// the padding for the left & right edge of each row
-// and the name of the class for the rows themselves.
-
-// Use the grid-mobile mixin for mobile, and then add a breakpoint
-// and use the grid-desktop mixin for columns 2 and up.
+@mixin fluid-grid($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name) {
+  .#{$class-name} {
+    width: (100% + $padding) / $cols;
+    padding: 0 0 $padding $padding;
+  }
+  @for $x from 1 through $grid-rows {
+    .#{$class-name}-#{$x * $cols - ($cols - 1)} {
+      margin-left: -$padding;
+      clear: both;
+    }
+  }
+}
 
 
 
@@ -104,7 +198,6 @@ $fluid-grid-class-name: views-row;
   }
 }
 
-
 @mixin vertical-center(
   $container-height: 300px,
   $inner-name: ".block-inner",
@@ -277,46 +370,4 @@ $content-max-width: 1000px;
     }
   }
 }
-@mixin region-col($cols: 3, $space: $spacing, $offset: null, $margin-direction: right, $rows: 3) {
-  margin-#{$margin-direction}: $spacing;
-  clear: none;
-  max-width: 100%;
-  $minus-margins: ceil($space * (($cols - 1) / $cols)) + 1px;
 
-  @if $margin-direction == "right" {
-    float: left;
-  }
-  @if $margin-direction == "left" {
-    float: right;
-  }
-
-  @if $offset {
-    &:nth-child(n+#{$offset + 1}) {
-      width: calc( (100% / #{$cols}) - #{$minus-margins});
-    }
-    &:nth-child(#{$cols + $offset}),
-    &:nth-child(#{$cols * 2 + $offset}),
-    &:nth-child(#{$cols * 3 + $offset}) {
-      margin-#{$margin-direction}: 0;
-    }
-    &:nth-child(#{$cols + 1 + $offset}),
-    &:nth-child(#{$cols * 2 + 1 + $offset}),
-    &:nth-child(#{$cols * 3 + 1 + $offset}) {
-      clear: left;
-    }
-  }
-  @else {
-    width: calc( (100% / #{$cols}) - #{$minus-margins});
-
-    &:nth-child(#{$cols}),
-    &:nth-child(#{$cols * 2}),
-    &:nth-child(#{$cols * 3}) {
-      margin-#{$margin-direction}: 0;
-    }
-    &:nth-child(#{$cols + 1}),
-    &:nth-child(#{$cols * 2 + 1}),
-    &:nth-child(#{$cols * 3 + 1}), {
-      clear: left;
-    }
-  }
-}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: brevis
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
 platform: ruby
 authors:
 - Kendall Totten
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-01-29 00:00:00.000000000 Z
+date: 2015-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass