Version 1.1.3. px fallback for bottom margin with headings.

typeplate · Mar 7, 2014 · 80da8f9 · 80da8f9
1 parent f9440e3
commit 80da8f9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 85 deletions.
diff --git a/bower.json b/bower.json
@@ -1,8 +1,8 @@
 {
   "name": "typeplate",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "Dennis Gaebel and Zachary Kain",
-  "homepage": "https://github.com/typeplate/typeplate-bower/",
+  "homepage": "https://github.com/typeplate/typeplate-bower",
   "repository": {
     "type": "git",
     "url": "git://github.com/typeplate/typeplate-bower.git"

diff --git a/css/typeplate.css b/css/typeplate.css
@@ -1,26 +1,12 @@
-/*
- *
- *.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
- *
- *  .                                      '||            .           
- *.||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....  
- * ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...|| 
- * ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||      
- * '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...' 
- *      .. |      ||               ||                                 
- *       ''      ''''             ''''                                
- *
- * URL ............ http://typeplate.com
- * VERSION ........ 1.1.2
- * Github ......... https://github.com/typeplate/typeplate.github.io
- * AUTHORS ........ Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
- * LICENSE ........ Creative Commmons Attribution 3.0
- * LICENSE URL .... http://creativecommons.org/licenses/by/3.0
- *
- * .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
- *
- */
-
+/*!
+TYPEPLATE
+URL ........... http://typeplate.com
+VERSION ....... 1.1.3
+Github ........ https://github.com/typeplate/bower
+AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
+LICENSE ....... Creative Commmons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0)
+LICENSE URL ... https://github.com/typeplate/bower/blob/master/license.txt
+*/
 
 
 /**
@@ -177,76 +163,84 @@ h6 {
 *
 * 18, 21, 24, 36, 48, 60, 72, 90, 117
 *
-*/
+*
+* Explanation:
+* margin-bottom = ( base font-size * base line-height ) / current font-size
+*
+* Makes sure that there's always one unit of measure's worth of space between shit
+* for headings. This is better than spacing using line-height because of the wrapping issue where we have
+* wrapping onto 2 lines with a high line-height.
+ */
 
 .tera {
 	font-size: 117px;
 	font-size: 6.5rem; /* 117 / 18 = 6.5 */
-	margin-bottom: 0.25385em;
+	margin-bottom: 0.25385px;
+	margin-bottom: 0.25385rem;
 }
 
 .giga {
 	font-size: 90px;
 	font-size: 5rem; /* 90 / 18 = 5 */
-	margin-bottom: 0.33em;
+	margin-bottom: 0.33px;
+	margin-bottom: 0.33rem;
 }
 
 .mega {
 	font-size: 72px;
 	font-size: 4rem; /* 72 / 18 = 4 */
-	margin-bottom: 0.4125em;
+	margin-bottom: 0.4125px;
+	margin-bottom: 0.4125rem;
 }
 
 h1,
 .alpha {
 	font-size: 60px;
 	font-size: 3.33333rem; /* 60 / 18 = 3.3333 */
-	margin-bottom: 0.495em;
+	margin-bottom: 0.495px;
+	margin-bottom: 0.495rem;
 }
 
 h2,
 .beta {
 	font-size: 48px;
 	font-size: 2.6667rem; /* 48 / 18 = 2.6667 */
-	margin-bottom: 0.61875em;
+	margin-bottom: 0.61875px;
+	margin-bottom: 0.61875rem;
 }
 
 h3,
 .gamma {
 	font-size: 36px;
 	font-size: 2rem; /* 36 / 18 = 2 */
-	margin-bottom: 0.825em;
+	margin-bottom: 0.825px;
+	margin-bottom: 0.825rem;
 }
 
 h4,
 .delta {
 	font-size: 24px;
 	font-size: 1.3333333333333333rem; /* 24 / 18 = 1.3333 */
-	margin-bottom: 1.2375em;
+	margin-bottom: 1.2375px;
+	margin-bottom: 1.2375rem;
 }
 
 h5,
 .epsilon {
 	font-size: 21px;
 	font-size: 1.16667rem; /* 21 / 18 = 1.1667 */
-	margin-bottom: 1.4142857142857141em; /* measure( base font-size(18) * base line-height(1.65) ) / current font-size(21) = margin-bottom(1.4142857142857141) */
+	margin-bottom: 1.41429px;
+	margin-bottom: 1.41429rem;
 }
 
 h6,
 .zeta {
 	font-size: 18px;
 	font-size: 1rem; /* 18 = 18 × 1 */
-	margin-bottom: 1.65em; /* measure( base font-size(18) * base line-height(1.65) ) / current font-size(18) = margin-bottom(1.65) */
+	margin-bottom: 1.65px;
+	margin-bottom: 1.65rem;
 }
 
-/* margin-bottom for headings:
- *
- * Explanation:
- * Makes sure that there's always one unit of measure's worth of space between shit
- * for headings. This is better than spacing using line-height because of the wrapping issue where we have
- * wrapping onto 2 lines with a high line-height.
- */
-
 
 /**
  *

diff --git a/scss/_typeplate.scss b/scss/_typeplate.scss
@@ -1,26 +1,12 @@
-/*!
- *
-.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
-
-	.                                      '||            .
-  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
-   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
-   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
-   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
-		.. |      ||               ||
-		 ''      ''''             ''''      A Typographic Starter Kit
-
-  URL ........... http://typeplate.com
-  VERSION ....... 1.1.2
-  Github ........ https://github.com/typeplate/typeplate.github.io
-  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
-  LICENSE ....... Creative Commmons Attribution 3.0
-  LICENSE URL ... http://creativecommons.org/licenses/by/3.0
-
- .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
- *
- */
-
+/*! 
+TYPEPLATE
+URL ........... http://typeplate.com
+VERSION ....... 1.1.3
+Github ........ https://github.com/typeplate/bower
+AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
+LICENSE ....... Creative Commmons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0)
+LICENSE URL ... https://github.com/typeplate/bower/blob/master/license.txt
+*/
 
 
 // .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
@@ -46,7 +32,7 @@ $custom-font-family: false !default; // Custom font-face stack, if set will be a
 $measure: $font-base * $line-height;
 
 
-// $Variabl $Paragraphs
+// $Variable $Paragraphs
 // -------------------------------------//
 
 // Text Indentation Value
@@ -238,20 +224,27 @@ $dropcap-bg: transparent !default;
 
 // $Mixin $Type-Scale
 // -------------------------------------//
-// provides a pixel fallback if you decide
-// to use 'rems' as a unit over ems.
 
 @mixin type-scale($scale, $base, $value, $measure:"") {
-	// If 'rem' is used as a $value then provide a px fallback.
+
 	@if $value == rem {
+
 		font-size: $scale#{px};
 	}
+
 	font-size: context-calc($scale, $base, $value);
+
 	@if $measure != "" {
+
+		@if $value == rem {
+			margin-bottom: measure-margin($scale, $measure, $value: px);
+		}
+
 		margin-bottom: measure-margin($scale, $measure, $value);
 	}
 }
 
+
 // $Mixin $Hypens
 // -------------------------------------//
 //http://trentwalton.com/2011/09/07/css-hyphenation
@@ -548,6 +541,7 @@ small {
 // Extend included classes on any element of your
 // choosing for adjusting type based on the scale
 // provided.
+// Special Props to Harry Roberts for this trick.
 
 // For example:
 

diff --git a/scss/_vars-typeplate.scss b/scss/_vars-typeplate.scss
@@ -1,18 +1,6 @@
-/*
- *
-.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
-
-    .                                      '||            .
-  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
-   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
-   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
-   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
-        .. |      ||               ||
-         ''      ''''             ''''                      VARIABLES
-
- .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
- *
- */
+// ===================================================
+// TYPEPLATE : Custom Sass Variables
+// ===================================================
 
 
 // $BaseType