type-heading 0.0.11 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 00fbaca7ce7ee0da0212f26d431e27a35936e4f8
-  data.tar.gz: b225b572c51e1cc511851194dcebdcae00f9d576
+  metadata.gz: baff6ecab89578b4bf058a21e8769b0addcf3e54
+  data.tar.gz: cd43b78e2651ee84c5611bc32b77f89b1dadf519
 SHA512:
-  metadata.gz: ed262801c66a5c88fc20bffd4834c843f56784a939de24ca71a75e502a6c225a3e5bb8c1ae9fdff9f93b87d4fbd20e8dd19d0c16a6c38cab10336851f0a7b113
-  data.tar.gz: 5f430dbf16853bb60ea207cdf89db8ac184e58cb687bc4c52f286e1fe8e1bebefd42673ae3694e0b2448059d2dd68545072c9b5bdf044863f40f67d0a2982404
+  metadata.gz: 066ba92a26378c2de1d4f56925634d2ace28be17793c26f4444fe152d10104fe553be0bc9b64588893857a1d190048eb9dca577b2b2f5d72fc40b3dd1ea95ee9
+  data.tar.gz: 6fed2c309e2797103f11d634342d1ad017b7829d7c3fda0811cb3e0c4c01ef9c0da36e3be41b050aa9e64fc2caa18b4612bea5e09779bca48058447dda7e9224

data/README.md

@@ -1,12 +1,11 @@
 [![Gem Version](https://badge.fury.io/rb/type-heading.svg)](http://badge.fury.io/rb/type-heading)
 
-# Type Heading - Alpha
+# Type Heading - BETA
 
 A responsive typography tool.
 
-**Note:** Type heading is currently in [Alpha](http://en.wikipedia.org/wiki/Software_release_life_cycle#Alpha).
-Currently, Type Heading should only be used for testing and/or development, not
-production work.
+Type heading is currently in **BETA**. It should only be used for testing and/or
+development, not production work.
 
 ## Requirements
 

data/stylesheets/_type-heading.scss

@@ -5,6 +5,8 @@
 
 @import "type-heading/settings";
 @import "type-heading/functions/helpers";
+@import "type-heading/functions/core";
+@import "type-heading/mixins/core";
 @import "type-heading/functions/heading";
 @import "type-heading/functions/property";
 @import "type-heading/mixins/breakpoint";

data/stylesheets/type-heading/functions/_core.scss

@@ -0,0 +1,38 @@
+// Breakpoint
+//
+// @group Functions / Core
+// @author Elliot Mitchum
+
+// _th-core-global-breakpoint
+// Allows breakpoint override for sections of code.
+//
+// @since 0.0.12
+// @type Number
+// @access private
+
+$_th-core-global-breakpoint: false !default;
+
+// _th-core-global-breakpoint
+// Returns global breakpoint property.
+//
+// @since 0.0.12
+// @type function
+// @access private
+// @group breakpoint
+//
+// @param {number} $breakpoint A heading list breakpoint (required).
+//
+// @returns {Number} The breakpoint parameter.
+//
+// @example scss Return $th-breakpoint-global parameter.
+// // $breakpoint: _th-core-global-breakpoint($breakpoint);
+
+@function _th-core-global-breakpoint(
+  $breakpoint
+){
+  @if global-variable-exists('_th-core-global-breakpoint') and $_th-core-global-breakpoint {
+    @return $_th-core-global-breakpoint;
+  } @else {
+    @return $breakpoint;
+  }
+}

data/stylesheets/type-heading/functions/_heading.scss

@@ -12,6 +12,7 @@
 // @requires {function} th-heading-get-map
 // @requires {function} _th-heading-has-next
 // @requires {function} _th-heading-get-next
+// @requires {function} _th-core-global-breakpoint
 //
 // @param {list | string} $heading A heading map key or list (required).
 // @param {number} $breakpoint A heading list breakpoint.
@@ -32,6 +33,7 @@
   $breakpoint: false
 ){
   $_return: $heading;
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
   @if string == type-of($heading) {
     $_return: th-heading-get-map($heading);
     @if _th-heading-has-next($_return) {

data/stylesheets/type-heading/functions/_property.scss

@@ -27,6 +27,7 @@ $th-properties: (
 // @requires {function} th-property-get
 // @requires {function} th-property-default
 // @requires {function} _th-property-unit-convert
+// @requires {function} _th-core-global-breakpoint
 //
 // @param {list | string} $heading A heading map key or list (required).
 // @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name (required).
@@ -69,6 +70,7 @@ $th-properties: (
 ){
   $_return: false;
   $heading: th-heading($heading, $breakpoint);
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
   $_return: _th-property-get($heading, $property-name);
   @if $_return == default or $_return == false { 
     $_return: th-property-default($property-name, $base-font-size, false);

data/stylesheets/type-heading/mixins/_breakpoint.scss

@@ -3,49 +3,34 @@
 // @group Mixins / Breakpoint
 // @author Elliot Mitchum
 
-// th-breakpoint-heading
-// Output styles for a heading list within a media query.
+// th-breakpoint
+// Output styles with a breakpoint within a media query.
 //
 // @since 0.0.10
 // @type mixin
 //
-// @requires {mixin} th-heading
+// @requires {mixin} th-with-breakpoint
+// @requires {gem} breakpoint - https://github.com/at-import/breakpoint
 //
-// @param {list | string} $heading A heading map key or list (required).
-// @param {number | boolean} $breakpoint (false) A heading list breakpoint (required).
-// @param {string} $direction (min-width | max-width) Media query direction.
-// @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
+// @param {List} $query The media query to parse (https://github.com/at-import/breakpoint/wiki/Basic-Media-Queries) (required).
+// @param {number | boolean} $breakpoint (false) A heading list breakpoint.
 //
-// @example scss Output h1 styles with min width media query.
-// // @include th-breakpoint-heading(
-// //   $heading: h1,
-// //   $breakpoint: 768px
-// // )
-// @example scss Output h1 styles with max width media query.
-// // @include th-breakpoint-heading(
-// //   $heading: h1,
-// //   $breakpoint: 768px,
-// //   $direction: max-width
-// // )
-// @example scss Output h1 styles with a base font size of 48px.
-// // @include th-breakpoint-heading(
-// //   $heading: h1,
-// //   $base-font-size: 48px
-// // )
+// @example scss Output a heading with a 768px within a 768px min-width media query.
+// // @include th-breakpoint(min-width 768px, 768px) {
+// //   @include th-heading(h1);
+// // }
 
-@mixin th-breakpoint-heading(
-  $heading,
-  $breakpoint,
-  $direction: min-width,
-  $convert: true,
-  $base-font-size: $th-base-font-size
+@mixin th-breakpoint(
+  $query,
+  $breakpoint
 ){
-  @media screen and (#{$direction}: #{$breakpoint}){
-    @include th-heading(
-      $heading: $heading,
-      $breakpoint: $breakpoint,
-      $convert: $convert,
-      $base-font-size: $base-font-size
-    );
+  @if variable-exists('breakpoint') and mixin-exists('breakpoint') {
+    @include breakpoint($query) {
+      @include th-with-breakpoint($breakpoint) {
+        @content;
+      }
+    }
+  } @else {
+    @warn 'th-breakpoint requires the Breakpoint gem - https://github.com/at-import/breakpoint';
   }
 }

data/stylesheets/type-heading/mixins/_core.scss

@@ -0,0 +1,37 @@
+// Core
+//
+// @group Mixins / Core
+// @author Elliot Mitchum
+
+// _th-core-global-breakpoint
+// Allows breakpoint override for sections of code.
+//
+// @since 0.0.12
+// @type Number
+// @access private
+
+$_th-core-global-breakpoint: false !default;
+
+// th-with-breakpoint
+// Use a breakpoint for a section of code.
+//
+// @since 0.0.12
+// @type mixin
+//
+// @requires {variable} $_th-core-global-breakpoint
+//
+// @param {number} $breakpoint (false) A heading list breakpoint (required).
+//
+// @example scss Output a heading with a 768px breakpoint.
+// // @include th-with-breakpoint(768px) {
+// //   @include th-heading(h1);
+// // }
+
+@mixin th-with-breakpoint(
+  $breakpoint
+){
+  $cache: $_th-core-global-breakpoint;
+  $_th-core-global-breakpoint: $breakpoint !global;
+  @content;
+  $_th-core-global-breakpoint: $cache !global;
+}

data/stylesheets/type-heading/mixins/_heading.scss

@@ -11,14 +11,18 @@
 //
 // @requires {function} th-heading
 // @requires {function} th-property-font-size
+// @requires {function} _th-core-global-breakpoint
 // @requires {mixin} th-property-margin-top
 // @requires {mixin} th-property-margin-bottom
 // @requires {mixin} th-property-font-size
 // @requires {mixin} th-property-line-height
+// @requires {mixin} th-with-breakpoint
 //
 // @param {string} $heading A heading map key (required).
 // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
+// @param {list | boolean} $include (false font-size line-height margin-top margin-bottom) Include only certain properties in the mixin output.
 //
 // @example scss Output h1 styles.
 // // th-heading(h1)
@@ -37,12 +41,18 @@
 // //   $heading: h1,
 // //   $base-font-size: 48px
 // // )
+// @example scss Output h1 styles but only include font-size and line-height
+// // th-heading(
+// //   $heading: h1,
+// //   $include: (font-size line-height)
+// // )
 
 @mixin th-heading(
   $heading,
   $breakpoint: false,
   $convert: true,
-  $base-font-size: $th-base-font-size
+  $base-font-size: $th-base-font-size,
+  $include: false
 ){
   $heading: th-heading(
     $heading: $heading,
@@ -54,30 +64,39 @@
     $base-font-size: $base-font-size,
     $convert: false
   );
-  @include th-property-margin-top(
-    $heading: $heading,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: $font-size
-  );
-  @include th-property-margin-bottom(
-    $heading: $heading,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: $font-size
-  );
-  @include th-property-font-size(
-    $heading: $heading,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: $base-font-size
-  );
-  @include th-property-line-height(
-    $heading: $heading,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: $font-size
-  );
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
+  @if not $include or th-list-has($include, margin-top) {
+    @include th-property-margin-top(
+      $heading: $heading,
+      $breakpoint: $breakpoint,
+      $convert: $convert,
+      $base-font-size: $font-size
+    );
+  }
+  @if not $include or th-list-has($include, margin-bottom) {
+    @include th-property-margin-bottom(
+      $heading: $heading,
+      $breakpoint: $breakpoint,
+      $convert: $convert,
+      $base-font-size: $font-size
+    );
+  }
+  @if not $include or th-list-has($include, font-size) {
+    @include th-property-font-size(
+      $heading: $heading,
+      $breakpoint: $breakpoint,
+      $convert: $convert,
+      $base-font-size: $base-font-size
+    );
+  }
+  @if not $include or th-list-has($include, line-height) {
+    @include th-property-line-height(
+      $heading: $heading,
+      $breakpoint: $breakpoint,
+      $convert: $convert,
+      $base-font-size: $font-size
+    );
+  }
 }
 
 // th-headings
@@ -89,51 +108,60 @@
 // @requires {function} th-heading-get-map
 // @requires {function} _th-heading-has-next
 // @requires {function} th-property
-// @requires {mixin} th-breakpoint-heading
+// @requires {mixin} th-breakpoint
 // @requires {mixin} th-heading
+// @requires {gem} breakpoint - https://github.com/at-import/breakpoint
 //
 // @param {list | string} $heading A heading map key or list (required).
 // @param {string} $direction (min-width | max-width) Media query direction.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
 //
-// @example scss Output all h1 styles.
+// @example scss Output all h1 styles across all breakpoints.
 // // @include th-headings(h1)
-// @example scss Output all h1 styles with max width media queries.
-// // @include th-headings(
+// @example scss Output font-size and line-height h1 styles across all breakpoints.
+// // th-headings(
 // //   $heading: h1,
-// //   $direction: max-width
+// //   $include: (font-size line-height)
 // // )
 
 @mixin th-headings(
   $heading,
-  $direction: min-width,
   $convert: true,
-  $base-font-size: $th-base-font-size
+  $base-font-size: $th-base-font-size,
+  $include: false
 ){
   $heading-map: th-heading-get-map($heading);
   @if _th-heading-has-next($heading-map) {
     @each $heading in $heading-map {
       $breakpoint: th-property($heading, breakpoint);
       @if $breakpoint {
-        @include th-breakpoint-heading(
+        @include th-breakpoint(
+        $query: $breakpoint,
+        $breakpoint: $breakpoint
+        ){
+          @include th-heading(
           $heading: $heading,
-          $breakpoint: $breakpoint,
-          $direction: $direction,
           $convert: $convert,
-          $base-font-size: $base-font-size
-        );
+          $base-font-size: $base-font-size,
+          $include: $include
+          );
+        }
       } @else {
         @include th-heading(
-          $heading: $heading,
-          $convert: $convert,
-          $base-font-size: $base-font-size
+        $heading: $heading,
+        $convert: $convert,
+        $base-font-size: $base-font-size,
+        $include: $include
         );
       }
     }
   } @else {
     @include th-heading(
-      $heading: $heading,
-      $base-font-size: $base-font-size
+    $heading: $heading,
+    $convert: $convert,
+    $base-font-size: $base-font-size,
+    $include: $include
     );
   }
 }

data/stylesheets/type-heading/mixins/_property.scss

@@ -10,9 +10,11 @@
 // @type mixin
 //
 // @requires {function} th-property-font-size
+// @requires {function} _th-core-global-breakpoint
 //
 // @param {string} $heading A heading map key (required).
 // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
 //
 // @example scss Output h1 font size styles.
@@ -29,6 +31,7 @@
 	$convert: true,
 	$base-font-size: $th-base-font-size
 ){
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
 	font-size: th-property-font-size(
 		$heading: $heading,
 		$breakpoint: $breakpoint,
@@ -47,6 +50,7 @@
 //
 // @param {string} $heading A heading map key (required).
 // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
 //
 // @example scss Output h1 line height styles.
@@ -63,6 +67,7 @@
 	$convert: true,
 	$base-font-size: $th-base-font-size
 ){
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
 	line-height: th-property-line-height(
 		$heading: $heading,
 		$breakpoint: $breakpoint,
@@ -81,6 +86,7 @@
 //
 // @param {string} $heading A heading map key (required).
 // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
 //
 // @example scss Output h1 margin top styles.
@@ -97,6 +103,7 @@
 	$convert: true,
 	$base-font-size: $th-base-font-size
 ){
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
 	margin-top: th-property-margin-top(
 		$heading: $heading,
 		$breakpoint: $breakpoint,
@@ -115,6 +122,7 @@
 //
 // @param {string} $heading A heading map key (required).
 // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
+// @param {boolean} $convert (true) If returned value should be unit converted.
 // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
 //
 // @example scss Output h1 margin bottom styles.
@@ -131,6 +139,7 @@
 	$convert: true,
 	$base-font-size: $th-base-font-size
 ){
+  $breakpoint: _th-core-global-breakpoint($breakpoint);
 	margin-bottom: th-property-margin-bottom(
 		$heading: $heading,
 		$breakpoint: $breakpoint,

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: type-heading
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.0.13
 platform: ruby
 authors:
 - Elliot Mitchum
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-12 00:00:00.000000000 Z
+date: 2015-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -62,10 +62,12 @@ files:
 - lib/type-heading.rb
 - stylesheets/_type-heading.scss
 - stylesheets/type-heading/_settings.scss
+- stylesheets/type-heading/functions/_core.scss
 - stylesheets/type-heading/functions/_heading.scss
 - stylesheets/type-heading/functions/_helpers.scss
 - stylesheets/type-heading/functions/_property.scss
 - stylesheets/type-heading/mixins/_breakpoint.scss
+- stylesheets/type-heading/mixins/_core.scss
 - stylesheets/type-heading/mixins/_heading.scss
 - stylesheets/type-heading/mixins/_property.scss
 - templates/project/manifest.rb