gliss-layout 0.0.0 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c48a75fed0a96d5ec476c4acbb3ea18b5c5c5f01
-  data.tar.gz: d91c3c43e35541b6af630a2e06e98ded60483f58
+  metadata.gz: 96d0fc6c4e645bf9826a608ee848d7cf8b38bb08
+  data.tar.gz: 2e2d54c3e36d974607411604a6cf2c7fd12c0d16
 SHA512:
-  metadata.gz: 83faa853b0a9a88fbc707013e81ff8af029d42f7d8695964aa53b2fc8cd16b83d6771c55292f1ac1a0a97841c6192c62a2fe95e5d632a7b11e9bfadab474fc84
-  data.tar.gz: ccaae1c1a7dbdb77ce6c09c9a21877734ba4eea7a9d9ee595abec84a651d4e04554e1dc2111befd43b2ead401d721b3eeea030c1536e688766cd6d6a08808724
+  metadata.gz: cc089e406d3e974d4a42d6d1dc138bf872743e459a3372d3edfc0daf95a87d632fbf24dff2ae76e0e145cb3003e58463b2501dd40ab4e5945208664447388ca0
+  data.tar.gz: 2050bf10fe24efaebc87d3832dc1c22ea80ef3dbcd6c78cd16d6a9e7539cdc2decf819dfa720ad695cde84e21d0f4c5033b2e312b6976ff86eb8a16541911daf

data/changelog.md

@@ -1,3 +1,7 @@
+# Version 0.1.0
+
+Namespaced mixins, funcitons and variables
+
 # Version 0.0.0
 
 Initial release

data/lib/gliss.rb

@@ -16,7 +16,7 @@ Compass::Frameworks.register('gliss-layout', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Gliss
-  VERSION = "0.0.0"
+  VERSION = "0.1.0"
   DATE = "2015-04-06"
 end
 

data/readme.md

@@ -42,13 +42,13 @@ First, you are going to want to configure Gliss. Here are the main variables to
 <tr>
 <th>Variable</th><th>Default</th><th>Description</th></tr>
 <tr>
-<td>$max-width</td><td>80rem</td><td>Max width of content container. This must be a fixed width (em, rem or px)</td></tr>
+<td>$gliss-max-width</td><td>80rem</td><td>Max width of content container. This must be a fixed width (em, rem or px)</td></tr>
 <tr>
-<td>$gutter</td><td>1rem</td><td>Gutter width, must be same units as $max-width.</td></tr>
+<td>$gliss-gutter</td><td>1rem</td><td>Gutter width, must be same units as $max-width.</td></tr>
 <tr>
-<td>$margin</td><td>4%</td><td>Margins on either side of the content container.</td></tr>
+<td>$gliss-margin</td><td>4%</td><td>Margins on either side of the content container.</td></tr>
 <tr>
-<td>$cols</td><td>12</td><td>Number of columns the grid is divided into.</td></tr>
+<td>$gliss-cols</td><td>12</td><td>Number of columns the grid is divided into.</td></tr>
 </table>
 
 So far this just provides you with a basic toolset, but if you want to have something more out of the box to work with, set `$gliss-modules` to `true` and define these variables as needed:
@@ -69,11 +69,11 @@ So far this just provides you with a basic toolset, but if you want to have some
 
 Gliss is primarily designed to help out with math by providing a few mixins that set the width constraints and alignment on elements.
 
-The primary mixin you will use is `grid()` and you can pass the small and large constraints to it. If we wanted `foo` to be 6 columns wide at small sizes and 3 columns wide at the largest sizes then we would write it like this:
+The primary mixin you will use is `gliss()` and you can pass the small and large constraints to it. If we wanted `foo` to be 6 columns wide at small sizes and 3 columns wide at the largest sizes then we would write it like this:
 
 ```scss
 foo {
-	@include grid(6,3);
+	@include gliss(6,3);
 }
 ```
 
@@ -90,9 +90,9 @@ For alignment, you can choose left, right, or center by using the following mixi
 
 ```scss
 foo {
-	@include grid-center();
-	@include grid-left();
-	@include grid-right();
+	@include gliss-center();
+	@include gliss-left();
+	@include gliss-right();
 }
 ```
 

data/stylesheets/_gliss.scss

@@ -1,11 +1,11 @@
 // Max width of content container. This must be a fixed width (em or px)
-$max-width:         80rem      !default;
+$gliss-max-width:  80rem     !default;
 // Gutter width, must be same units as $max-width.
-$gutter:            1rem       !default;
+$gliss-gutter:     1rem      !default;
 // Margins on either side of the content container.
-$margin:            4%        !default;
+$gliss-margin:     4%        !default;
 // Number of columns the grid is divided into.
-$cols:              12        !default;
+$gliss-cols:       12        !default;
 
 // Chose to write gliss classes.
 // By default, only the math tools are avalible.

data/stylesheets/gliss/_core.scss

@@ -1,52 +1,52 @@
 // Non-configurable variables for internal use:
 
 // Find the width of the margins within the context of the container
-$margin-inv: (100% / (100 - $margin * 2) * $margin);
+$gliss-margin-inv: (100% / (100 - $gliss-margin * 2) * $gliss-margin);
 
 
 // Upper limit for elements on the grid. This is a fixed width.
 @function grid-max(
     $max:$max,
-    $cols:$cols,
-    $max-width:$max-width,
-    $gutter:$gutter
+    $gliss-cols:$gliss-cols,
+    $gliss-max-width:$gliss-max-width,
+    $gliss-gutter:$gliss-gutter
   ) {
 
   // Total width of the columns minus the gutters
-  $cols-max-width: $max-width - ($gutter * ($cols - 1));
+  $gliss-cols-max-width: $gliss-max-width - ($gliss-gutter * ($gliss-cols - 1));
   // Find the max width of a simgle column as a fixed width.
-  $col-max-width: ($cols-max-width / $cols);
+  $col-max-width: ($gliss-cols-max-width / $gliss-cols);
 
   // All the columns plus gutters.
-  @return ($col-max-width * $max) + ($gutter * ($max - 1));
+  @return ($col-max-width * $max) + ($gliss-gutter * ($max - 1));
 }
 
 // The lower constraint, how small can this get?
 @function grid-min(
     $min:$min,
-    $cols:$cols,
-    $max-width:$max-width,
-    $gutter:$gutter
+    $gliss-cols:$gliss-cols,
+    $gliss-max-width:$gliss-max-width,
+    $gliss-gutter:$gliss-gutter
   ) {
 
   // Make sure not to divide by zero.
-  @if $min < $cols {
-    @return calc(#{(100% / $cols) * $min} + #{$gutter * ($min - $cols) / ($cols)});
+  @if $min < $gliss-cols {
+    @return calc(#{(100% / $gliss-cols) * $min} + #{$gliss-gutter * ($min - $gliss-cols) / ($gliss-cols)});
   }
   @return 100%;
 }
 
-@mixin grid(
+@mixin gliss(
     $min:false,     // Lower limit (compiles to % constraint)
     $max:false,     // Upper limit (compiles to fixed constraint)
-    $cols:$cols,
-    $max-width:$max-width,
-    $gutter:$gutter
+    $gliss-cols:$gliss-cols,
+    $gliss-max-width:$gliss-max-width,
+    $gliss-gutter:$gliss-gutter
   ) {
 
   // Write max width first as it is mapped to just width.
   @if $max {
-    width: grid-max($max,$cols,$max-width,$gutter);
+    width: grid-max($max,$gliss-cols,$gliss-max-width,$gliss-gutter);
   } @else {
     // If unspecified, use 100% to ensure the min-width is fulled.
     width: 100%;
@@ -57,7 +57,7 @@ $margin-inv: (100% / (100 - $margin * 2) * $margin);
   // the elements will hit higher %s.
   // This is the upper bounds on that % but on a smaller screen.
   @if $min {
-    max-width: grid-min($min,$cols,$max-width,$gutter);
+    max-width: grid-min($min,$gliss-cols,$gliss-max-width,$gliss-gutter);
   }
 }
 
@@ -65,33 +65,33 @@ $margin-inv: (100% / (100 - $margin * 2) * $margin);
 // Alignment
 
 // Center a thing
-@mixin grid-center {
+@mixin gliss-center {
   margin-left: auto;
   margin-right: auto;
 }
 
 // Align right
-@mixin grid-right(
+@mixin gliss-right(
     $offset:0
   ) {
 
   @if $offset != 0 {
-    $offset: calc(#{(100% / $cols) * $offset} + #{($gutter * ($offset - $cols) / ($cols)) + ($gutter)});
+    $offset: calc(#{(100% / $gliss-cols) * $offset} + #{($gliss-gutter * ($offset - $gliss-cols) / ($gliss-cols)) + ($gliss-gutter)});
   }
 
   float: right;
-  margin: 0 $offset 0 $gutter;
+  margin: 0 $offset 0 $gliss-gutter;
 }
 
 // Align left
-@mixin grid-left(
+@mixin gliss-left(
     $offset:0
   ) {
 
   @if $offset != 0 {
-    $offset: calc(#{(100% / $cols) * $offset} + #{($gutter * ($offset - $cols) / ($cols)) + ($gutter)});
+    $offset: calc(#{(100% / $gliss-cols) * $offset} + #{($gliss-gutter * ($offset - $gliss-cols) / ($gliss-cols)) + ($gliss-gutter)});
   }
 
   float: left;
-  margin: 0 $gutter 0 $offset;
+  margin: 0 $gliss-gutter 0 $offset;
 }

data/stylesheets/gliss/_modules.scss

@@ -1,14 +1,14 @@
 @if $gliss-modules {
   #{$gliss-wrapper} {
-    padding: 0 $margin;
+    padding: 0 $gliss-margin;
     margin: 0 auto;
-    max-width: $max-width;
+    max-width: $gliss-max-width;
   }
 
   // Text level elements
   #{$gliss-text} {
-    @include grid-center();
-    @include grid(12,6);
+    @include gliss-center();
+    @include gliss(12,6);
     body.show-grid & {
       background: rgba(#f00,.1);
     }
@@ -16,40 +16,40 @@
 
   // figure logic
   #{$gliss-figure} {
-    margin: 0 ($margin-inv * -1);
-    @media (min-width: ($max-width / 3)) {
+    margin: 0 ($gliss-margin-inv * -1);
+    @media (min-width: ($gliss-max-width / 3)) {
       &._quarter {
-        @include grid-right();
-        @include grid(6,3);
+        @include gliss-right();
+        @include gliss(6,3);
         &._left {
-          @include grid-left();
+          @include gliss-left();
         }
       }
 
       &._third {
-        @include grid-right();
-        @include grid(6,4);
+        @include gliss-right();
+        @include gliss(6,4);
         &._left {
-          @include grid-left();
+          @include gliss-left();
         }
       }
 
       &._half {
-        @include grid-right();
-        @include grid(6);
+        @include gliss-right();
+        @include gliss(6);
         &._left {
-          @include grid-left();
+          @include gliss-left();
         }
       }
       &._hang {
-        margin: 0 ($margin-inv * -1) 0 0;
+        margin: 0 ($gliss-margin-inv * -1) 0 0;
         float: right;
         width: calc(
-          (100% - #{grid-max(6)}) / 2 + #{$margin-inv} + #{grid-max(6)}
+          (100% - #{grid-max(6)}) / 2 + #{$gliss-margin-inv} + #{gliss-max(6)}
         );
-        max-width: 100% + $margin-inv * 2;
+        max-width: 100% + $gliss-margin-inv * 2;
         &._left {
-          margin: 0 0 0 ($margin-inv * -1);
+          margin: 0 0 0 ($gliss-margin-inv * -1);
           float: left;
         }
       }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: gliss-layout
 version: !ruby/object:Gem::Version
-  version: 0.0.0
+  version: 0.1.0
 platform: ruby
 authors:
 - Scott Kellum
@@ -42,7 +42,6 @@ files:
 - license.md
 - readme.md
 - stylesheets/_gliss.scss
-- stylesheets/gliss.zip
 - stylesheets/gliss/_core.scss
 - stylesheets/gliss/_modules.scss
 homepage: http://product.voxmedia.com