typey 1.0.0.beta.6 → 1.0.0.beta.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8898792b278d464c815124ef1afbaa7ae18ea7a6
-  data.tar.gz: 222024e2a09ab32650c7220aa09427c12e54fca8
+  metadata.gz: 085e5f970aa194b2550fc3b61bd25eae2bfecb73
+  data.tar.gz: 60062ba4fdad99e314274aae29764f6723b2a471
 SHA512:
-  metadata.gz: 9d601cc92f82925469b575f6260cf7bf872926dff1ad1e2645f8b8a4cfdc24a4edbb67c10c4f0eefc30b7171466ec9323141619d8c50f5ce25a7a22d7f89ad7f
-  data.tar.gz: 2cdd1be4ec90de348a3ec457be208fe50bcb6663ab628da9e48c4a31e70893408168f06b0ff63fc08d81a18b6f056cec6b1e5b475aba3b5a2fd7c9eff7ec78ad
+  metadata.gz: 77e006349cca554d66f6df6521647e880aabeb1de06e07c037c25a97bd8cf75761c6b2834d234bcbee4f0f74619a33536a31ae1f136aa1382b878100c989046b
+  data.tar.gz: 386985ec32299afac9ec212b527418f754311107f3e33694e48c8cd064b95a7df3be3a251287a47e139d920c93fd71b233aaf41a2ee721f04b33fd4bc97b05d3

data/README.md

@@ -140,8 +140,7 @@ h1 {
 }
 ```
 
-All ratios are outputted as `em` instead of your base unit as they will always
-be relative to their element's font-size.
+All ratios are outputted as unitless values instead of your base unit.
 
 ## Add some margins or padding
 
@@ -266,10 +265,31 @@ strong {
 }
 ```
 
-## More examples
+## Debug grid
+
+You can turn the debug grid on or off with the global variable below (and also choose
+a custom color!).
+
+```sass
+$typey-debug: true;
+$typey-debug-color: red;
+```
+
+Now the grid will show whenever a type-layout() or line-height() mixin is used and will
+be sized to the element's line-height automatically. If you want to output it
+manually you can use the typey-debug-grid() mixin, which takes a few arguments -
+the line-height (as a ratio, multiplier or px value), and the context (only used
+for ems), and also a custom color.
 
-Grab a copy of the source code (make sure you get the same version you have installed) and look in the examples folder for a few more hints.
+```sass
+h1 {
+  @include typey-debug-grid(2, $context: xl, $color: blue);
+}
+```
+
+## More examples
 
+Grab a copy of the source code (make sure you get the same version you have installed) and look in the examples folder to see typey in action.
 ## Reference
 
 The reference section has been removed for now in favour of the better detailed examples above. For explanation on all the individual functions and mixins inside typey you can just download the source code and ogle at the documentation contained within. Once the typey website launches it will include a complete reference section. Stay tuned.

data/stylesheets/_typey.scss

@@ -7,6 +7,7 @@
 @import "typey/functions/depreciated";
 @import "typey/defaults";
 @import "typey/font-stacks";
+@import "typey/mixins/debug";
 @import "typey/mixins/define-type-sizing";
 @import "typey/mixins/font-size";
 @import "typey/mixins/line-height";

data/stylesheets/typey/_defaults.scss

@@ -58,6 +58,13 @@ $font-weight: (
   lighter:                 200
 ) !default;
 
+// Debug grid
+// Shows horizontal lines for each elements line height.
+$typey-debug:              false !default;
+
+// Debug grid coloring
+$typey-debug-color:        #4affff !default;
+
 // Warnings for $base-unit.
 @if $base-unit != px and $base-unit != rem and $base-unit != em {
   @error "$base-unit must be one of the following unit types: rem, em or px";

data/stylesheets/typey/functions/_outputters.scss

@@ -37,7 +37,7 @@
   @if $base-unit == rem {
     @return typey-output-in-base-unit(($map-size / $base-font-size));
   }
-  @if $base-unit == px or $base-unit == pt {
+  @if $base-unit == px {
     @return typey-output-in-base-unit(typey-strip-unit($map-size));
   }
   @if $base-unit == em {
@@ -79,5 +79,5 @@
 // @return number
 //   The ratio in em.
 @function output-from-ratio($ratio: $base-line-height-ratio) {
-  @return $ratio * 1em;
+  @return $ratio;
 }

data/stylesheets/typey/mixins/_debug.scss

@@ -0,0 +1,41 @@
+// Output a horizontal grid to help with debugging typography.
+//
+// @param number $line-height
+//   Multiple of line height to be used, line-height ratio or px value to be converted.
+// @param number|string $context
+//   (optional) Only used if em is the $base-unit. The value of the
+//   elements/parents font-size if it differs from $base-font-size.
+//   Specified as a t-shirt size or value in px.
+// @param string $color
+//   (optional) Use a custom grid color.
+@mixin typey-debug-grid($line-height: $base-line-height, $context: $base-font-size, $color: $typey-debug-color) {
+  @if $typey-debug == true {
+    $allowed-types: "multiplier", "px";
+    $type: typey-validator($line-height, $allowed-types);
+    $grid-height: 0;
+    @if $line-height-method == "rhythm" {
+      $grid-height: line-height($line-height, $context);
+    }
+    @if $line-height-method == "ratio" {
+      @if $line-height == $base-line-height {
+        $grid-height: line-height($base-line-height-ratio, $context) * 1em;
+      }
+      @else {
+        $grid-height: line-height($line-height, $context) * 1em;
+      }
+    }
+
+    position: relative;
+    background-image: repeating-linear-gradient(180deg, $color, $color 1px, transparent 1px, transparent $grid-height);
+
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      width: 100%;
+      background-color: $color;
+    }
+  }
+}

data/stylesheets/typey/mixins/_define-type-sizing.scss

@@ -19,7 +19,7 @@
       @if $line-height == $base-line-height {
         $line-height: $base-line-height-ratio;
       }
-      line-height: $line-height * 1em;
+      line-height: $line-height;
     }
     @else {
       @if $base-unit == rem {

data/stylesheets/typey/mixins/_line-height.scss

@@ -1,6 +1,4 @@
 // Define line-height (with fallback).
-// This is only necessary to use if you want to provide fallbacks when you are
-// using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px value to be converted.
@@ -22,4 +20,6 @@
     }
   }
   line-height: line-height($x, $context);
+
+  @include typey-debug-grid($x, $context);
 }

data/stylesheets/typey/mixins/_type-layout.scss

@@ -50,4 +50,6 @@
       line-height: line-height($line-height, $size);
     }
   }
+
+  @include typey-debug-grid($line-height, $context);
 }

data/typey.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
   spec.homepage     = 'http://github.com/jptaranto/typey'
   spec.rubyforge_project =
 
-  spec.version      = '1.0.0.beta.6'
-  spec.date         = '2015-08-05'
+  spec.version      = '1.0.0.beta.7'
+  spec.date         = '2015-08-07'
   spec.licenses     = ['GPL-2']
 
   spec.authors      = ['Jack Taranto']

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: typey
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta.6
+  version: 1.0.0.beta.7
 platform: ruby
 authors:
 - Jack Taranto
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-05 00:00:00.000000000 Z
+date: 2015-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -44,6 +44,7 @@ files:
 - stylesheets/typey/functions/_outputters.scss
 - stylesheets/typey/functions/_sizers.scss
 - stylesheets/typey/functions/_validators.scss
+- stylesheets/typey/mixins/_debug.scss
 - stylesheets/typey/mixins/_define-type-sizing.scss
 - stylesheets/typey/mixins/_font-size.scss
 - stylesheets/typey/mixins/_line-height.scss
@@ -70,7 +71,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 1.0.0.beta.6
+rubyforge_project: 1.0.0.beta.7
 rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4