diff --git a/demo/index.html b/demo/index.html index b21cbc8..b36a721 100644 --- a/demo/index.html +++ b/demo/index.html @@ -64,7 +64,7 @@

Span Mixin

// cols : int - Column count -// padding : px - Interior padding : optional +// padding : boolean - Use grid padding : optional @include span(cols, padding); @@ -79,6 +79,30 @@

Span Mixin

.tile { @include span(4); +} + + +
+
+

Col Mixin

+
+ +// Works like span but with margins +// cols : int - Column count +// gutter : boolean - Use grid gutter : optional + +@include col(cols, padding); + +
+
+
+
+
+ +// Requires container with clear() mixin + +.col { + @include col(4); }
@@ -173,6 +197,7 @@

Helper Mixins

// clear:both; // } // +// Use @extend %clear; outside of media queries @include clear; @@ -190,9 +215,10 @@

Helper Mixins

// Hide Text // // overflow:hidden; -// text-indent:-9999px; -// display:block; +// text-indent: 100%; +// white-space: nowrap; // +// Use @extend %hide-text; outside of media queries @include hide-text; @@ -205,13 +231,14 @@

Helper Mixins

// > li{ // display:block; // float:left; -// &:last-child{ -// margin-right:0px; -// } // } @include inline-list; +// Pass false to render list items as inline-block instead of float + +@include inline-list(false); +
@@ -225,7 +252,9 @@

Typographic Rhythm

// $line-height-base - line height base // $type-rhythm-ratio - header scaling ratio -@include type(16px, 26, 1.14); +@include type(16px, 26px, 1.14); + +@include type(16px, 1.5, 1.14); // No arguments required, falls back to settings variables @@ -261,27 +290,26 @@

Settings

Override these variables at the top of your scss file.

- // Set base font size $rem-base: 16px !default; -// Set line height ratio base -$line-height-base: 26; +// Set line height ratio base. Accepts px, em, rem or int values +$line-height-base: 26px !default; // Vertical rhythm ratio -$type-rhythm-ratio: 1.14; - +$type-rhythm-ratio: 1.14 !default; // Desktop Media Query -$desktop: "(min-width: 1024px)"; +$desktop: "(min-width: 1024px)" !default; // Tablet Media Query -$tablet: "(min-width: 768px) and (max-width: 1023px)"; +$tablet: "(min-width: 768px) and (max-width: 1023px)" !default; // Mobile Media Query -$mobile: "(max-width: 767px)"; - +$mobile: "(max-width: 767px)" !default; // Set Grid Column Count -$grid-columns: 12; -// Set Grid Gutter -$grid-gutter: 20px; -// Set Grid Max Width -$grid-max-width: 1024px; +$grid-columns: 12 !default; +// Set Grid Gutter (percentage) +$grid-gutter: 4 !default; +// Set Grid Padding (as px) +$grid-padding: 20px !default; +// Set Grid Max Width (as px) +$grid-max-width: 1024px !default;
diff --git a/demo/styles/main.css b/demo/styles/main.css index 5fd7e36..5c48efe 100644 --- a/demo/styles/main.css +++ b/demo/styles/main.css @@ -1,3 +1,5 @@ + + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; @@ -24,9 +26,9 @@ table { border-spacing: 0; } * { + box-sizing: border-box; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } + -moz-box-sizing: border-box; } body { line-height: 1.625; } @@ -84,12 +86,13 @@ a.download-button { font-weight: bold; background: #eee; border: 1px solid #ddd; + border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; - border-radius: 5px; + transition: all 50ms linear; -webkit-transition: all 50ms linear; -moz-transition: all 50ms linear; - transition: all 50ms linear; + -ms-transition: all 50ms linear; margin: 0px 0px 20px; } a.download-button:hover { @@ -115,16 +118,16 @@ header.primary { padding: 0px 0px 20px 0px; } @media (max-width: 767px) { header.primary { + padding-left: 20px; + padding-right: 20px; + width: 100%; width: 100%; - max-width: 600px; - padding-left: 10px; - padding-right: 10px; float: left; } header.primary h1 { + padding-left: 20px; + padding-right: 20px; + width: 100%; width: 100%; - max-width: 600px; - padding-left: 10px; - padding-right: 10px; float: left; margin-left: 0%; } } @@ -137,10 +140,10 @@ main { display: table; clear: both; } main section { + padding-left: 20px; + padding-right: 20px; + width: 100%; width: 100%; - max-width: 600px; - padding-left: 10px; - padding-right: 10px; float: left; } main section header { margin: 0px 0px 20px 0px; @@ -167,10 +170,10 @@ main { display: table; clear: both; } main section .float-tile { + padding-left: 20px; + padding-right: 20px; + width: 33.33333%; width: 33.33333%; - max-width: 600px; - padding-left: 10px; - padding-right: 10px; float: left; background: #fee; border: 1px solid #dcc; @@ -178,15 +181,17 @@ main { float: left; } main section .float-tile.offset-tile { margin-left: 33.33333%; } - main section .inline-tile { - width: 33.33333%; - max-width: 600px; - padding-left: true/2; - padding-right: true/2; + main section .col-tile { + width: 30.66667%; + margin-left: 4%; float: left; background: #fee; border: 1px solid #dcc; height: 100px; } + main section .col-tile:first-child { + margin-left: 0; } + main section .col-tile:last-child { + float: right; } footer.primary { width: 100%; diff --git a/demo/styles/main.scss b/demo/styles/main.scss index e0622ae..c084001 100644 --- a/demo/styles/main.scss +++ b/demo/styles/main.scss @@ -36,7 +36,7 @@ a.download-button { font-weight: bold; background: #eee; border: 1px solid #ddd; - @include prefixer(border-radius, 5px, webkit moz o spec); + @include prefixer(border-radius, 5px, webkit moz); @include transition(all 50ms linear); margin: 0px 0px 20px; } @@ -103,7 +103,7 @@ main { margin-bottom: 20px; } .float-tile { - @include span(4); + @include span(4, true); background: #fee; border: 1px solid #dcc; height: 100px; @@ -112,8 +112,8 @@ main { @include offset(4); } } - .inline-tile { - @include span(4, true); + .col-tile { + @include col(4, true); background: #fee; border: 1px solid #dcc; height: 100px; diff --git a/docs/guff.html b/docs/guff.html index 0d4fd6b..1664210 100644 --- a/docs/guff.html +++ b/docs/guff.html @@ -229,7 +229,7 @@

Settings

- 
$line-height-base: 26;
+ 
$line-height-base: 26px !default;
@@ -244,7 +244,7 @@

Settings

- 
$type-rhythm-ratio: 1.14;
+ 
$type-rhythm-ratio: 1.14 !default;
@@ -259,7 +259,7 @@

Settings

- 
$desktop: "(min-width: 1024px)";
+ 
$desktop: "(min-width: 1024px)" !default;
@@ -274,7 +274,7 @@

Settings

- 
$tablet: "(min-width: 768px) and (max-width: 1023px)";
+ 
$tablet: "(min-width: 768px) and (max-width: 1023px)" !default;
@@ -289,7 +289,7 @@

Settings

- 
$mobile: "(max-width: 767px)";
+ 
$mobile: "(max-width: 767px)" !default;
@@ -304,7 +304,7 @@

Settings

- 
$grid-columns: 12;
+ 
$grid-columns: 12 !default;
@@ -315,11 +315,11 @@

Settings

-

Set Grid Gutter

+

Set Grid Gutter (percentage)

- 
$grid-gutter: 20px;
+ 
$grid-gutter: 4 !default;
@@ -330,11 +330,11 @@

Settings

-

Set Grid Max Width

+

Set Grid Padding (as px)

- 
$grid-max-width: 1024px;
+ 
$grid-padding: 20px !default;
@@ -345,10 +345,12 @@

Settings

-

Functions

+

Set Grid Max Width (as px)

+ 
$grid-max-width: 1024px !default;
+ @@ -358,6 +360,19 @@

Functions

+

Functions

+ + + + + + +
  • +
    + +
    + +

    Strips unit suffix from value

    @@ -369,11 +384,11 @@

    Functions

    • -
  • +
  • - +

    Converts to rem, utility for rem-calc

    @@ -381,18 +396,18 @@

    Functions

    @function convert-to-rem($value, $base-value: $rem-base)  {
   $value: strip-unit($value) / strip-unit($base-value) * 1rem;
-  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
+  @if (strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0
   @return $value;
 }
    • -
  • +
  • - +

    Calculates rem value from number

    @@ -413,11 +428,11 @@

    Functions

    • -
  • +
  • - +

    Gets grid column width

    @@ -430,11 +445,11 @@

    Functions

    • -
  • +
  • - +

    Gets grid gutter

    @@ -447,11 +462,11 @@

    Functions

    • -
  • +
  • - +

    Mixins

    @@ -460,11 +475,11 @@

    Mixins

    • -
  • +
  • - +

    Sets container styles

    @@ -479,38 +494,72 @@

    Mixins

    • -
  • +
  • - +

    Sets grid column width

    - 
    @mixin span($cols: 4,$gutter: $grid-gutter) {
-  width: percentage($cols/$grid-columns);
-  max-width: $grid-max-width;
-  padding-left: $gutter / 2;
-  padding-right: $gutter / 2;
+            
    @mixin span($cols: 4, $padding: true) {
+  $column-width: $cols / $grid-columns;
+  @if $padding != false {
+  padding-left: $grid-padding;
+  padding-right: $grid-padding;
+  width: percentage($column-width);
+  }
+  width: percentage($column-width);
   float: left;
 }
    • -
  • +
  • - + +
    +

    Sets grid column width (with gutter)

    + +
    + + 
    @mixin col($cols: 4, $gutter: false) {
+  $column-width: $cols / $grid-columns;
+  @if $gutter != false {
+    $single-col: (100% - ($grid-gutter * ($grid-columns - 1))) / $grid-columns;
+    width: ($single-col * $cols) + ($grid-gutter * ($cols - 1));
+    margin-left: percentage($grid-gutter / 100);
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      float: right;
+    }
+  }@else {
+    width: percentage($column-width);
+  }
+  float: left;
+}
    + +
    • + + +
  • +
    + +
    +

    Sets grid offet margin

    - 
    @mixin offset($cols: 4,$gutter: '') {
+            
    @mixin offset($cols: 4) {
   margin-left: percentage($cols/$grid-columns)
 }
 
@@ -519,11 +568,11 @@ 
    Mixins
    • -
  • +
  • - +

    Wraps interior content in a media query

    @@ -538,75 +587,69 @@

    Mixins

    • -
  • +
  • - +

    Renders fully prefixed transistion

    - 
    @mixin transition ($properties...) {
-  @if length($properties) >= 1 {
-    @include prefixer(transition, $properties, webkit moz spec);
-  }
-
-  @else {
-    $properties: all 0.15s ease-out 0s;
-    @include prefixer(transition, $properties, webkit moz spec);
-  }
+            
    @mixin transition ($property: 0.15s) {
+    @include prefixer(transition, $property, webkit moz ms);
 }
    • -
  • +
  • - +

    Renders fully prefixed transform

    @mixin transform($property: none) {
-  @include prefixer(transform, $property, webkit moz ms spec);
+  @include prefixer(transform, $property, webkit moz ms);
 }
    • -
  • +
  • - +

    Renders fully prefixed box-sizing

    @mixin box-sizing ($box) {
-  @include prefixer(box-sizing, $box, webkit moz spec);
+  @include prefixer(box-sizing, $box, webkit moz);
 }
    • -
  • +
  • - +

    Utility for prefixing mixins

    @mixin prefixer ($property, $value, $prefixes) {
+        #{$property}: $value;
   @each $prefix in $prefixes {
     @if $prefix == webkit {
         -webkit-#{$property}: $value;
@@ -617,9 +660,6 @@ 
    Mixins
    
     @else if $prefix == ms {
         -ms-#{$property}: $value;
     }
-    @else if $prefix == spec {
-        #{$property}: $value;
-    }
     @else  {
       @warn "Unrecognized prefix: #{$prefix}";
     }
@@ -629,11 +669,11 @@ 
    Mixins
    • -
  • +
  • - +

    Sets ellipsis overflow

    @@ -650,11 +690,11 @@

    Mixins

    • -
  • +
  • - +

    Clearfix include

    @@ -671,11 +711,28 @@

    Mixins

    • -
  • +
  • - + +
    +

    Placeholder for clear

    + +
    + + 
    %clear {
+  @include clear;
+}
    + +
    • + + +
  • +
    + +
    +

    Text hider

    @@ -684,46 +741,64 @@

    Mixins

     @mixin hide-text{
     overflow:hidden;
-    text-indent:-9999px;
-    display:block;
+    text-indent: 100%;
+    white-space: nowrap;
 }
    • -
  • +
  • - + +
    +

    Placeholder for hide-text

    + +
    + + 
    %hide-text {
+  @include hide-text;
+}
    + +
    • + + +
  • +
    + +
    +

    Inline List

    -@mixin inline-list {
+@mixin inline-list($float: true) {
     list-style-type:none;
     padding:0;
     margin:0;
     overflow:hidden;
     > li{
+        @if $float == true {
         display:block;
         float:left;
-        &:last-child{
-            margin-right:0px;
-        }
+      } @else {
+        display: inline-block;
+      }
     }
 }
    • -
  • +
  • - +

    Typography

    @@ -732,11 +807,11 @@

    Typography

    • -
  • +
  • - +

    Scale type at $type-rhythm-ratio

    @@ -752,43 +827,50 @@

    Typography

    • -
  • +
  • - +

    Typographic Rhythm Mixin

    - 
    @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
    + 
    @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
+
+  @if unit($line-height-base) == "px" {
    • -
  • +
  • - +

    Set line-height

    - 
      body {
-    line-height: $line-height-base / strip-unit($rem-base);
+            
        body {
+      line-height: strip-unit($line-height-base) / strip-unit($rem-base);
+    }
+  } @else {
+    body {
+      line-height: $line-height-base;
+    }
   }
    • -
  • +
  • - +

    Set heading sizes to size variables

    diff --git a/guff.scss b/guff.scss index 2432c8c..a7ccd8c 100644 --- a/guff.scss +++ b/guff.scss @@ -65,23 +65,23 @@ // Set base font size $rem-base: 16px !default; // Set line height ratio base -$line-height-base: 26; +$line-height-base: 26px !default; // Vertical rhythm ratio -$type-rhythm-ratio: 1.14; - +$type-rhythm-ratio: 1.14 !default; // Desktop Media Query -$desktop: "(min-width: 1024px)"; +$desktop: "(min-width: 1024px)" !default; // Tablet Media Query -$tablet: "(min-width: 768px) and (max-width: 1023px)"; +$tablet: "(min-width: 768px) and (max-width: 1023px)" !default; // Mobile Media Query -$mobile: "(max-width: 767px)"; - +$mobile: "(max-width: 767px)" !default; // Set Grid Column Count -$grid-columns: 12; -// Set Grid Gutter -$grid-gutter: 20px; -// Set Grid Max Width -$grid-max-width: 1024px; +$grid-columns: 12 !default; +// Set Grid Gutter (percentage) +$grid-gutter: 4 !default; +// Set Grid Padding (as px) +$grid-padding: 20px !default; +// Set Grid Max Width (as px) +$grid-max-width: 1024px !default; // ###Functions // Strips unit suffix from value @@ -92,7 +92,7 @@ $grid-max-width: 1024px; // Converts to rem, utility for rem-calc @function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; - @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 + @if (strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0 @return $value; } @@ -128,16 +128,38 @@ $grid-max-width: 1024px; } // Sets grid column width -@mixin span($cols: 4,$gutter: $grid-gutter) { - width: percentage($cols/$grid-columns); - max-width: $grid-max-width; - padding-left: $gutter / 2; - padding-right: $gutter / 2; +@mixin span($cols: 4, $padding: true) { + $column-width: $cols / $grid-columns; + @if $padding != false { + padding-left: $grid-padding; + padding-right: $grid-padding; + width: percentage($column-width); + } + width: percentage($column-width); + float: left; +} + +// Sets grid column width (with gutter) +@mixin col($cols: 4, $gutter: false) { + $column-width: $cols / $grid-columns; + @if $gutter != false { + $single-col: (100% - ($grid-gutter * ($grid-columns - 1))) / $grid-columns; + width: ($single-col * $cols) + ($grid-gutter * ($cols - 1)); + margin-left: percentage($grid-gutter / 100); + &:first-child { + margin-left: 0; + } + &:last-child { + float: right; + } + }@else { + width: percentage($column-width); + } float: left; } // Sets grid offet margin -@mixin offset($cols: 4,$gutter: '') { +@mixin offset($cols: 4) { margin-left: percentage($cols/$grid-columns) } @@ -149,29 +171,23 @@ $grid-max-width: 1024px; } // Renders fully prefixed transistion -@mixin transition ($properties...) { - @if length($properties) >= 1 { - @include prefixer(transition, $properties, webkit moz spec); - } - - @else { - $properties: all 0.15s ease-out 0s; - @include prefixer(transition, $properties, webkit moz spec); - } +@mixin transition ($property: 0.15s) { + @include prefixer(transition, $property, webkit moz ms); } // Renders fully prefixed transform @mixin transform($property: none) { - @include prefixer(transform, $property, webkit moz ms spec); + @include prefixer(transform, $property, webkit moz ms); } // Renders fully prefixed box-sizing @mixin box-sizing ($box) { - @include prefixer(box-sizing, $box, webkit moz spec); + @include prefixer(box-sizing, $box, webkit moz); } // Utility for prefixing mixins @mixin prefixer ($property, $value, $prefixes) { + #{$property}: $value; @each $prefix in $prefixes { @if $prefix == webkit { -webkit-#{$property}: $value; @@ -182,9 +198,6 @@ $grid-max-width: 1024px; @else if $prefix == ms { -ms-#{$property}: $value; } - @else if $prefix == spec { - #{$property}: $value; - } @else { @warn "Unrecognized prefix: #{$prefix}"; } @@ -209,27 +222,38 @@ $grid-max-width: 1024px; } } +// Placeholder for clear +%clear { + @include clear; +} + // Text hider @mixin hide-text{ overflow:hidden; - text-indent:-9999px; - display:block; + text-indent: 100%; + white-space: nowrap; +} + +// Placeholder for hide-text +%hide-text { + @include hide-text; } // Inline List -@mixin inline-list { +@mixin inline-list($float: true) { list-style-type:none; padding:0; margin:0; overflow:hidden; > li{ + @if $float == true { display:block; float:left; - &:last-child{ - margin-right:0px; - } + } @else { + display: inline-block; + } } } // ###Typography @@ -245,9 +269,15 @@ $h1-size: round($h2-size * $type-rhythm-ratio); // Typographic Rhythm Mixin @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){ - // Set line-height - body { - line-height: $line-height-base / strip-unit($rem-base); + @if unit($line-height-base) == "px" { + // Set line-height + body { + line-height: strip-unit($line-height-base) / strip-unit($rem-base); + } + } @else { + body { + line-height: $line-height-base; + } } // Set heading sizes to size variables diff --git a/src/_functions.scss b/src/_functions.scss index 41b7696..372b5fa 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -8,7 +8,7 @@ // Converts to rem, utility for rem-calc @function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; - @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 + @if (strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0 @return $value; } diff --git a/src/_mixins.scss b/src/_mixins.scss index eb96743..0d8845a 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -8,16 +8,38 @@ } // Sets grid column width -@mixin span($cols: 4,$gutter: $grid-gutter) { - width: percentage($cols/$grid-columns); - max-width: $grid-max-width; - padding-left: $gutter / 2; - padding-right: $gutter / 2; +@mixin span($cols: 4, $padding: true) { + $column-width: $cols / $grid-columns; + @if $padding != false { + padding-left: $grid-padding; + padding-right: $grid-padding; + width: percentage($column-width); + } + width: percentage($column-width); + float: left; +} + +// Sets grid column width (with gutter) +@mixin col($cols: 4, $gutter: false) { + $column-width: $cols / $grid-columns; + @if $gutter != false { + $single-col: (100% - ($grid-gutter * ($grid-columns - 1))) / $grid-columns; + width: ($single-col * $cols) + ($grid-gutter * ($cols - 1)); + margin-left: percentage($grid-gutter / 100); + &:first-child { + margin-left: 0; + } + &:last-child { + float: right; + } + }@else { + width: percentage($column-width); + } float: left; } // Sets grid offet margin -@mixin offset($cols: 4,$gutter: '') { +@mixin offset($cols: 4) { margin-left: percentage($cols/$grid-columns) } @@ -29,29 +51,23 @@ } // Renders fully prefixed transistion -@mixin transition ($properties...) { - @if length($properties) >= 1 { - @include prefixer(transition, $properties, webkit moz spec); - } - - @else { - $properties: all 0.15s ease-out 0s; - @include prefixer(transition, $properties, webkit moz spec); - } +@mixin transition ($property: 0.15s) { + @include prefixer(transition, $property, webkit moz ms); } // Renders fully prefixed transform @mixin transform($property: none) { - @include prefixer(transform, $property, webkit moz ms spec); + @include prefixer(transform, $property, webkit moz ms); } // Renders fully prefixed box-sizing @mixin box-sizing ($box) { - @include prefixer(box-sizing, $box, webkit moz spec); + @include prefixer(box-sizing, $box, webkit moz); } // Utility for prefixing mixins @mixin prefixer ($property, $value, $prefixes) { + #{$property}: $value; @each $prefix in $prefixes { @if $prefix == webkit { -webkit-#{$property}: $value; @@ -62,9 +78,6 @@ @else if $prefix == ms { -ms-#{$property}: $value; } - @else if $prefix == spec { - #{$property}: $value; - } @else { @warn "Unrecognized prefix: #{$prefix}"; } @@ -89,26 +102,37 @@ } } +// Placeholder for clear +%clear { + @include clear; +} + // Text hider @mixin hide-text{ overflow:hidden; - text-indent:-9999px; - display:block; + text-indent: 100%; + white-space: nowrap; +} + +// Placeholder for hide-text +%hide-text { + @include hide-text; } // Inline List -@mixin inline-list { +@mixin inline-list($float: true) { list-style-type:none; padding:0; margin:0; overflow:hidden; > li{ + @if $float == true { display:block; float:left; - &:last-child{ - margin-right:0px; - } + } @else { + display: inline-block; + } } } \ No newline at end of file diff --git a/src/_settings.scss b/src/_settings.scss index afb70c9..211554e 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -3,20 +3,20 @@ // Set base font size $rem-base: 16px !default; // Set line height ratio base -$line-height-base: 26; +$line-height-base: 26px !default; // Vertical rhythm ratio -$type-rhythm-ratio: 1.14; - +$type-rhythm-ratio: 1.14 !default; // Desktop Media Query -$desktop: "(min-width: 1024px)"; +$desktop: "(min-width: 1024px)" !default; // Tablet Media Query -$tablet: "(min-width: 768px) and (max-width: 1023px)"; +$tablet: "(min-width: 768px) and (max-width: 1023px)" !default; // Mobile Media Query -$mobile: "(max-width: 767px)"; - +$mobile: "(max-width: 767px)" !default; // Set Grid Column Count -$grid-columns: 12; -// Set Grid Gutter -$grid-gutter: 20px; -// Set Grid Max Width -$grid-max-width: 1024px; \ No newline at end of file +$grid-columns: 12 !default; +// Set Grid Gutter (percentage) +$grid-gutter: 4 !default; +// Set Grid Padding (as px) +$grid-padding: 20px !default; +// Set Grid Max Width (as px) +$grid-max-width: 1024px !default; \ No newline at end of file diff --git a/src/_typography.scss b/src/_typography.scss index 5f506bd..e942245 100644 --- a/src/_typography.scss +++ b/src/_typography.scss @@ -11,9 +11,15 @@ $h1-size: round($h2-size * $type-rhythm-ratio); // Typographic Rhythm Mixin @mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){ - // Set line-height - body { - line-height: $line-height-base / strip-unit($rem-base); + @if unit($line-height-base) == "px" { + // Set line-height + body { + line-height: strip-unit($line-height-base) / strip-unit($rem-base); + } + } @else { + body { + line-height: $line-height-base; + } } // Set heading sizes to size variables