guff-compass 0.7.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b7d670638079b8a5b033112374c92ce6e35b43b9
-  data.tar.gz: ce461aba20f37ad720d81bbc3098938407cd44b2
+  metadata.gz: 7191c95bdd3dd35be6f59fbe563b079b9d706a44
+  data.tar.gz: 75b0ccfd3787ead16371733563f99f8d69ea2fee
 SHA512:
-  metadata.gz: 4b6187ddffc991d19ae2242e7c666a968e6e8408c31a144d2b12c12561476a56b8322d3978614412fc7c86a61304c24f8e1a050d719870e46846ff1532efe653
-  data.tar.gz: 89558aac9aa345d5a72b2bbe005d06b55365fcf8c15ef7ef44ac2e9d4338805e5627881cfd6d1b08ba2cc3fb7cc53fa8258c364e1d9606993606cd02d548da22
+  metadata.gz: b6321222d9055dc402320f7f19a00e5ef495713e6d3fd4e40bcc88b69cc1ea382101bcc76c318ac891db1b24451b349f972b8f4177f067d96dcb32f25afeba7a
+  data.tar.gz: 8364be125aea6e3d683ff66839556222dce56f408375377ad16ee0e35cc64b439ba1fec4e60bc92c8ba3457b60e2f2c8c4405c1c80cb937a5bee462c0132a55e

data/README.md

@@ -10,12 +10,24 @@ It is the most helpful, most used functions,mixins and helpers, for use in actua
 
 ### Installation
 
-You can either manually use the guff.scss file or use bower:
+You can either manually use the guff.scss file, use bower, or use compass.
+
+####Using Bower
 
     bower install guff
     
-In your SASS file, import guff:
+In your Sass file:
 
     @import "guff"
 
+####Using Compass:
+
+    gem install guff-compass
+    
+In your config.rb
+
+    require "guff"
+    
+In your Sass file:
 
+    @import "guff"

data/demo/index.html

@@ -174,11 +174,32 @@ div {
                     <h2>rem-calc()</h2>
                 </header>
                 <code class="prettyprint">
+// rem-calc(int)
 // Calculates rem value for px value
 
 font-size: rem-calc(14);
                 </code>
             </section>
+            <section>
+                <header>
+                    <h2>safe-rem()</h2>
+                </header>
+                <code class="prettyprint">
+// property : string
+// num : int
+
+@include safe-rem(property, num);
+
+// Calculates rem value for px value and renders both for compatibility fallback
+
+@include safe-rem(font-size, 14);
+
+// Outputs:
+
+font-size: 14px;
+font-size: 0.875rem;
+                </code>
+            </section>
             <section>
                 <header>
                     <h2>Helper Mixins</h2>
@@ -289,7 +310,7 @@ gem install guff-compass
 
 // In your config.rb file
 
-require "guff-compass"
+require "guff"
 
 // In your SCSS file
 

data/demo/styles/main.css

@@ -41,25 +41,32 @@ body {
   line-height: 1.625; }
 
 h1 {
+  font-size: 35px;
   font-size: 2.1875rem; }
 
 h2 {
+  font-size: 31px;
   font-size: 1.9375rem; }
 
 h3 {
+  font-size: 27px;
   font-size: 1.6875rem; }
 
 h4 {
+  font-size: 24px;
   font-size: 1.5rem; }
 
 h5 {
+  font-size: 21px;
   font-size: 1.3125rem; }
 
 h6 {
+  font-size: 18px;
   font-size: 1.125rem; }
 
 p {
-  font-size: 16px; }
+  font-size: 16px;
+  font-size: 1rem; }
 
 body {
   font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
@@ -185,7 +192,7 @@ main {
       margin-bottom: 20px; }
       main section .col-container > * {
         text-align: left;
-        font-sze: 1rem; }
+        font-size: 1rem; }
       main section .col-container:after {
         content: '';
         display: inline-block;

data/docs/guff.html

@@ -559,7 +559,7 @@
     <span class="hljs-attribute">max-width</span><span class="hljs-value">: $grid-max-width;</span>
     &amp; &gt; * {
       <span class="hljs-attribute">text-align</span><span class="hljs-value">: left;</span>
-      <span class="hljs-attribute">font</span>-sze<span class="hljs-value">: rem-calc($rem-base);</span>
+      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($rem-base);</span>
     }
     &amp;<span class="hljs-pseudo">:after</span> {
       <span class="hljs-attribute">content</span><span class="hljs-value">: <span class="hljs-string">''</span>;</span>
@@ -1012,6 +1012,35 @@
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-45">&#182;</a>
               </div>
+              <p>Safe Rem</p>
+
+            </div>
+            
+            <div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> safe-rem</span>($property:<span class="hljs-preprocessor"> font-size</span>, $num:<span class="hljs-preprocessor"> 14</span>){</span>
+  $valid<span class="hljs-value">: true;</span>
+  <span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) != <span class="hljs-string">"string"</span> {</span>
+    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"property: #{$property} is not a string"</span>;</span>
+    $valid<span class="hljs-value">: false;</span>
+  }
+  <span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($num) != <span class="hljs-string">"number"</span> {</span>
+    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"num: #{$num} is not a number"</span>;</span>
+    $valid<span class="hljs-value">: false;</span>
+  }
+  <span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
+    #{$property}<span class="hljs-value">: #{_strip-unit($num)}px;</span>
+    #{$property}<span class="hljs-value">: rem-calc($num);</span>
+  }
+}</pre></div></div>
+            
+        </li>
+        
+        
+        <li id="section-46">
+            <div class="annotation">
+              
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-46">&#182;</a>
+              </div>
               <p>Typographic Rhythm Mixin</p>
 
             </div>
@@ -1019,15 +1048,15 @@
             <div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> type</span>($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){</span>
   $valid<span class="hljs-value">: true;</span>
   <span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($rem-base) != <span class="hljs-string">"number"</span> {</span>
-    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$rem-base} is not a number"</span>;</span>
+    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"rem-base: #{$rem-base} is not a number"</span>;</span>
     $valid<span class="hljs-value">: false;</span>
   }
   <span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($line-height-base) != <span class="hljs-string">"number"</span> {</span>
-    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$line-height-base} is not a number"</span>;</span>
+    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"line-height: #{$line-height-base} is not a number"</span>;</span>
     $valid<span class="hljs-value">: false;</span>
   }
   <span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($type-rhythm-ratio) != <span class="hljs-string">"number"</span> {</span>
-    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$type-rhythm-ratio} is not a number"</span>;</span>
+    <span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"type-rhythm-ratio: #{$type-rhythm-ratio} is not a number"</span>;</span>
     $valid<span class="hljs-value">: false;</span>
   }
   <span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span></pre></div></div>
@@ -1035,11 +1064,11 @@
         </li>
         
         
-        <li id="section-46">
+        <li id="section-47">
             <div class="annotation">
               
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-46">&#182;</a>
+                <a class="pilcrow" href="#section-47">&#182;</a>
               </div>
               <p>Scale type at $type-rhythm-ratio</p>
 
@@ -1057,11 +1086,11 @@
         </li>
         
         
-        <li id="section-47">
+        <li id="section-48">
             <div class="annotation">
               
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-47">&#182;</a>
+                <a class="pilcrow" href="#section-48">&#182;</a>
               </div>
               <p>Set line-height</p>
 
@@ -1079,42 +1108,42 @@
         </li>
         
         
-        <li id="section-48">
+        <li id="section-49">
             <div class="annotation">
               
               <div class="pilwrap ">
-                <a class="pilcrow" href="#section-48">&#182;</a>
+                <a class="pilcrow" href="#section-49">&#182;</a>
               </div>
               <p>Set heading sizes to size variables</p>
 
             </div>
             
             <div class="content"><div class='highlight'><pre>    <span class="hljs-tag">h1</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h1-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h1-size);</span>
     }
 
     <span class="hljs-tag">h2</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h2-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h2-size);</span>
     }
 
     <span class="hljs-tag">h3</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h3-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h3-size);</span>
     }
 
     <span class="hljs-tag">h4</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h4-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h4-size);</span>
     }
 
     <span class="hljs-tag">h5</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h5-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h5-size);</span>
     }
 
     <span class="hljs-tag">h6</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h6-size);</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $h6-size);</span>
     }
 
     <span class="hljs-tag">p</span> {
-      <span class="hljs-attribute">font-size</span><span class="hljs-value">: $rem-base;</span>
+      <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> safe-rem</span>(font-size, $rem-base);</span>
     }
   }
 }</pre></div></div>

data/guff.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |spec|
   spec.name          = "guff-compass"
-  spec.version       = "0.7.0"
+  spec.version       = "1.0.0"
   spec.authors       = ["Ken Wheeler"]
   spec.email         = ["ken@outlook.com"]
   spec.summary       = %q{ All the Sass framework you need. }

data/guff.scss

@@ -183,7 +183,7 @@ $grid-max-width: 1024px !default;
     max-width: $grid-max-width;
     & > * {
       text-align: left;
-      font-sze: rem-calc($rem-base);
+      font-size: rem-calc($rem-base);
     }
     &:after {
       content: '';
@@ -447,19 +447,36 @@ $grid-max-width: 1024px !default;
 }
 // ###Typography
 
+// Safe Rem
+@mixin safe-rem($property: font-size, $num: 14){
+  $valid: true;
+  @if type-of($property) != "string" {
+    @warn "property: #{$property} is not a string";
+    $valid: false;
+  }
+  @if type-of($num) != "number" {
+    @warn "num: #{$num} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    #{$property}: #{_strip-unit($num)}px;
+    #{$property}: rem-calc($num);
+  }
+}
+
 // Typographic Rhythm Mixin
 @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
   $valid: true;
   @if type-of($rem-base) != "number" {
-    @warn "#{$rem-base} is not a number";
+    @warn "rem-base: #{$rem-base} is not a number";
     $valid: false;
   }
   @if type-of($line-height-base) != "number" {
-    @warn "#{$line-height-base} is not a number";
+    @warn "line-height: #{$line-height-base} is not a number";
     $valid: false;
   }
   @if type-of($type-rhythm-ratio) != "number" {
-    @warn "#{$type-rhythm-ratio} is not a number";
+    @warn "type-rhythm-ratio: #{$type-rhythm-ratio} is not a number";
     $valid: false;
   }
   @if $valid == true {
@@ -484,31 +501,31 @@ $grid-max-width: 1024px !default;
 
     // Set heading sizes to size variables
     h1 {
-      font-size: rem-calc($h1-size);
+      @include safe-rem(font-size, $h1-size);
     }
 
     h2 {
-      font-size: rem-calc($h2-size);
+      @include safe-rem(font-size, $h2-size);
     }
 
     h3 {
-      font-size: rem-calc($h3-size);
+      @include safe-rem(font-size, $h3-size);
     }
 
     h4 {
-      font-size: rem-calc($h4-size);
+      @include safe-rem(font-size, $h4-size);
     }
 
     h5 {
-      font-size: rem-calc($h5-size);
+      @include safe-rem(font-size, $h5-size);
     }
 
     h6 {
-      font-size: rem-calc($h6-size);
+      @include safe-rem(font-size, $h6-size);
     }
 
     p {
-      font-size: $rem-base;
+      @include safe-rem(font-size, $rem-base);
     }
   }
 }

data/lib/stylesheets/_guff.scss

@@ -183,7 +183,7 @@ $grid-max-width: 1024px !default;
     max-width: $grid-max-width;
     & > * {
       text-align: left;
-      font-sze: rem-calc($rem-base);
+      font-size: rem-calc($rem-base);
     }
     &:after {
       content: '';
@@ -447,19 +447,36 @@ $grid-max-width: 1024px !default;
 }
 // ###Typography
 
+// Safe Rem
+@mixin safe-rem($property: font-size, $num: 14){
+  $valid: true;
+  @if type-of($property) != "string" {
+    @warn "property: #{$property} is not a string";
+    $valid: false;
+  }
+  @if type-of($num) != "number" {
+    @warn "num: #{$num} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    #{$property}: #{_strip-unit($num)}px;
+    #{$property}: rem-calc($num);
+  }
+}
+
 // Typographic Rhythm Mixin
 @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
   $valid: true;
   @if type-of($rem-base) != "number" {
-    @warn "#{$rem-base} is not a number";
+    @warn "rem-base: #{$rem-base} is not a number";
     $valid: false;
   }
   @if type-of($line-height-base) != "number" {
-    @warn "#{$line-height-base} is not a number";
+    @warn "line-height: #{$line-height-base} is not a number";
     $valid: false;
   }
   @if type-of($type-rhythm-ratio) != "number" {
-    @warn "#{$type-rhythm-ratio} is not a number";
+    @warn "type-rhythm-ratio: #{$type-rhythm-ratio} is not a number";
     $valid: false;
   }
   @if $valid == true {
@@ -484,31 +501,31 @@ $grid-max-width: 1024px !default;
 
     // Set heading sizes to size variables
     h1 {
-      font-size: rem-calc($h1-size);
+      @include safe-rem(font-size, $h1-size);
     }
 
     h2 {
-      font-size: rem-calc($h2-size);
+      @include safe-rem(font-size, $h2-size);
     }
 
     h3 {
-      font-size: rem-calc($h3-size);
+      @include safe-rem(font-size, $h3-size);
     }
 
     h4 {
-      font-size: rem-calc($h4-size);
+      @include safe-rem(font-size, $h4-size);
     }
 
     h5 {
-      font-size: rem-calc($h5-size);
+      @include safe-rem(font-size, $h5-size);
     }
 
     h6 {
-      font-size: rem-calc($h6-size);
+      @include safe-rem(font-size, $h6-size);
     }
 
     p {
-      font-size: $rem-base;
+      @include safe-rem(font-size, $rem-base);
     }
   }
 }

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "guff",
   "main": "./guff.scss",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "dependencies": {},
   "devDependencies": {
     "gulp": "~3.5.0",

data/sache.json

@@ -0,0 +1,5 @@
+{
+  "name": "guff",
+  "description": "All the Sass framework you'll ever need",
+  "tags": ["ui", "grid", "type","vertical rhythm","prefixes","gridding","breakpoint","breakpoints","reset"]
+}

data/src/_mixins.scss

@@ -37,7 +37,7 @@
     max-width: $grid-max-width;
     & > * {
       text-align: left;
-      font-sze: rem-calc($rem-base);
+      font-size: rem-calc($rem-base);
     }
     &:after {
       content: '';

data/src/_typography.scss

@@ -1,18 +1,35 @@
 // ###Typography
 
+// Safe Rem
+@mixin safe-rem($property: font-size, $num: 14){
+  $valid: true;
+  @if type-of($property) != "string" {
+    @warn "property: #{$property} is not a string";
+    $valid: false;
+  }
+  @if type-of($num) != "number" {
+    @warn "num: #{$num} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    #{$property}: #{_strip-unit($num)}px;
+    #{$property}: rem-calc($num);
+  }
+}
+
 // Typographic Rhythm Mixin
 @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
   $valid: true;
   @if type-of($rem-base) != "number" {
-    @warn "#{$rem-base} is not a number";
+    @warn "rem-base: #{$rem-base} is not a number";
     $valid: false;
   }
   @if type-of($line-height-base) != "number" {
-    @warn "#{$line-height-base} is not a number";
+    @warn "line-height: #{$line-height-base} is not a number";
     $valid: false;
   }
   @if type-of($type-rhythm-ratio) != "number" {
-    @warn "#{$type-rhythm-ratio} is not a number";
+    @warn "type-rhythm-ratio: #{$type-rhythm-ratio} is not a number";
     $valid: false;
   }
   @if $valid == true {
@@ -37,31 +54,31 @@
 
     // Set heading sizes to size variables
     h1 {
-      font-size: rem-calc($h1-size);
+      @include safe-rem(font-size, $h1-size);
     }
 
     h2 {
-      font-size: rem-calc($h2-size);
+      @include safe-rem(font-size, $h2-size);
     }
 
     h3 {
-      font-size: rem-calc($h3-size);
+      @include safe-rem(font-size, $h3-size);
     }
 
     h4 {
-      font-size: rem-calc($h4-size);
+      @include safe-rem(font-size, $h4-size);
     }
 
     h5 {
-      font-size: rem-calc($h5-size);
+      @include safe-rem(font-size, $h5-size);
     }
 
     h6 {
-      font-size: rem-calc($h6-size);
+      @include safe-rem(font-size, $h6-size);
     }
 
     p {
-      font-size: $rem-base;
+      @include safe-rem(font-size, $rem-base);
     }
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: guff-compass
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Ken Wheeler
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-12 00:00:00.000000000 Z
+date: 2014-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -47,10 +47,8 @@ extra_rdoc_files: []
 files:
 - .editorconfig
 - .gitignore
-- Gemfile
 - LICENSE.txt
 - README.md
-- Rakefile
 - demo/bower_components/jquery/.bower.json
 - demo/bower_components/jquery/.editorconfig
 - demo/bower_components/jquery/.gitattributes
@@ -226,7 +224,7 @@ files:
 - lib/guff.rb
 - lib/stylesheets/_guff.scss
 - package.json
-- pkg/guff-0.7.0.gem
+- sache.json
 - src/_functions.scss
 - src/_mixins.scss
 - src/_reset.scss