Custom font-face family. Fixes Issue #117. Versions to v1.1.1

bower.json

@@ -0,0 +1,12 @@
+{
+  "name": "typeplate",
+  "version": "1.1.1",
+  "main": "css/main.css",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

demo.html

@@ -16,7 +16,7 @@
 		<meta name="description" content="A typographic starter kit demo for Web developers and designers, where we don’t make too many design choices, but we do set out patterns for proper markup and “pre-designed” styles.">
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
 		<!-- normalize -->
-		<link rel="stylesheet" id="normalize-css" href="./components/normalize-css/normalize.css">
+		<link rel="stylesheet" id="normalize-css" href="./bower_components/normalize-css/normalize.css">
 		<!-- TypePlate -->
 		<link rel="stylesheet" id="typeplate-css" href="./typeplate/css/typeplate.css?1.1.0">
 		<!-- TypePlate Demo Styles -->
@@ -285,7 +285,7 @@ <h2><small>by <cite>Oscar Wilde</cite></small></h2>
 					if(normalizeOffCheck) {
 						$("#normalize-css").attr("href", "");
 					} else {
-						$("#normalize-css").attr("href", "./components/normalize-css/normalize.css");
+						$("#normalize-css").attr("href", "./bower_components/normalize-css/normalize.css");
 					}
 				});
 

index.html

@@ -49,18 +49,18 @@
 			<a href="https://raw.github.com/typeplate/typeplate.github.com/master/typeplate/css/typeplate.css" data-name="CSS Port" class="dl-item btn">
 				<i class="icon-download"></i>CSS
 				<hr>
-				<small>v1.1.0 | 11kb</small>
+				<small>v1.1.1 | 11kb</small>
 			</a>
 			<a href="https://raw.github.com/typeplate/typeplate.github.io/master/typeplate/scss/typeplate-scss.zip" data-name="Sass Port" class="dl-item btn">
 				<i class="icon-download"></i>Sass
 				<hr>
-				<small>v1.1.0 | 3kb</small>
+				<small>v1.1.1 | 3kb</small>
 			</a>
 
 			<a href="https://github.com/TypePlate/typeplate-bower" data-name="Bower Package" class="dl-item btn">
 				<i class="icon-download"></i>Bower Pkg.
 				<hr>
-				<small>v1.1.0</small>
+				<small>v1.1.1</small>
 			</a>
 		</div>
 	</nav>
@@ -117,25 +117,31 @@ <h1 class="gamma section-title"><a class="perma-anchor" href="#base-type">§</a>
 
 		<figure class="typeplate-code-block">
 			<figcaption>_typeplate.scss</figcaption>
-			<pre><code class="language-scss">$weight: normal !default;
+			<pre><code class="language-scss">// $Variable $BaseType
+// -------------------------------------//
+
+//the serif boolean var can be redeclared from another stylesheet. However
+//the var must be placed after your @import "typeplate.scss";
+$serif-boolean: true !default;
+
+$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack
+
+$font-weight: normal !default;
 $line-height: 1.65 !default;
 $font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
 $font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
-$font-family: serif;
-$font-family-sans: sans-serif;
-$font-properties: $weight, $line-height, $font-size, $font-family;
-$serif-boolean: true !default;
+$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
 
-@mixin base-type($weight, $line-height, $font-size, $font-family...) {
-	@if $serif-boolean {
-		font: $weight #{$font-size}%/#{$line-height} $font-family;
-	}@else {
-		font: $weight #{$font-size}%/#{$line-height} $font-family-sans;
-	}
-}
+
+// $Styles $Globals
+// -------------------------------------//
 
 html {
-	@include base-type($font-properties...);
+	@if $custom-font-family {
+		font: $font-weight #{$font-size}%/#{$line-height} $custom-font-family, $font-family;
+	} @else {
+		font: $font-weight #{$font-size}%/#{$line-height} $font-family;
+	}
 }</code></pre>
 		</figure>
 		<a href="#table-of-contents" class="anchorLink btn btn-backtotop">↑ back to top</a>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typeplate",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "homepage": "http://typeplate.com",
   "repository": "https://github.com/typeplate/typeplate.github.io",
   "licenses": "CC-3.0",

scss/_vars-typeplate.scss

@@ -20,7 +20,9 @@ $font-weight: normal;
 $line-height: 1.65;
 $font-size: 112.5; // percentage value (16 * 112.5% = 18px)
 $font-base: 16 * ($font-size/100); // converts our percentage to a pixel value
-$serif-boolean: true; // declares serif or sans-serif for your default type
+$font-family: serif; // Non-font-face font-stack
+
+$custom-font-family: false; // Custom font-face stack, if set will be added to the $base-font-family
 
 
 // $Small Print
@@ -115,4 +117,4 @@ $dropcap-margin: 0;
 $dropcap-padding: 0.125em 0.125em 0 0;
 $dropcap-color: inherit;
 $dropcap-line-height: 0.5;
-$dropcap-bg: transparent;
+$dropcap-bg: transparent;

scss/main.scss

@@ -50,15 +50,15 @@
 // ============================================================
 
 // @Since v2.1.0
-@import "../components/normalize.scss/normalize";
+@import "../bower_components/normalize.scss/normalize";
 
 
 // $Typeplate
 // ============================================================
 
-// @Since v1.1.0
+// @Since v1.1.1
 @import "vars-typeplate"; // Custom Typeplate Variables
-// @Since v1.1.0
+// @Since v1.1.1
 @import "../typeplate/scss/typeplate"; // Typeplate Presets
 
 

typeplate/scss/_typeplate.scss

@@ -2,16 +2,16 @@
  *
 .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 
-    .                                      '||            .           
-  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....  
-   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...|| 
-   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||      
-   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...' 
-        .. |      ||               ||                                 
-         ''      ''''             ''''      A Typographic Starter Kit
-  
+	.                                      '||            .
+  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
+   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
+   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
+   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
+		.. |      ||               ||
+		 ''      ''''             ''''      A Typographic Starter Kit
+
   URL ........... http://typeplate.com
-  VERSION ....... 1.1.0
+  VERSION ....... 1.1.1
   Github ........ https://github.com/typeplate/typeplate.github.io
   AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
   LICENSE ....... Creative Commmons Attribution 3.0
@@ -32,19 +32,18 @@
 
 // $Variable $BaseType
 // -------------------------------------//
+//the serif boolean var can be redeclared from another stylesheet. However
+//the var must be placed after your @import "typeplate.scss";
+$serif-boolean: true !default;
+
+$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack
 
 $font-weight: normal !default;
 $line-height: 1.65 !default;
 $font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
 $font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
+$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
 $measure: $font-base * $line-height;
-$font-family: serif;
-$font-family-sans: sans-serif;
-$font-properties: $font-weight, $line-height, $font-size, $font-family;
-
-//the serif boolean var can be redeclared from another stylesheet. However
-//the var must be placed after your @import "typeplate.scss";
-$serif-boolean: true !default;
 
 
 // $Variable $Small-Print
@@ -247,19 +246,6 @@ $dropcap-bg: transparent !default;
 	}
 }
 
-
-// $Mixin $Body-Copy
-// -------------------------------------//
-
-@mixin base-type($font-weight, $line-height, $font-size, $font-family...) {
-	@if $serif-boolean {
-		font: $font-weight #{$font-size}%/#{$line-height} $font-family;
-	}@else {
-		font: $font-weight #{$font-size}%/#{$line-height} $font-family-sans;
-	}
-}
-
-
 // $Mixin $Hypens
 // -------------------------------------//
 //http://trentwalton.com/2011/09/07/css-hyphenation
@@ -422,8 +408,8 @@ $dropcap-bg: transparent !default;
  *
  */
 
-// Use @include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg); 
-// to pass the following arguments below. Feel free to pass in custom 
+// Use @include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
+// to pass the following arguments below. Feel free to pass in custom
 // values for the variables we've provided.
 //
 // Make sure you add the class “drop-cap” to your markup in order to operate.
@@ -527,7 +513,11 @@ $dropcap-bg: transparent !default;
 // -------------------------------------//
 
 html {
-	@include base-type($font-properties...);
+	@if $custom-font-family {
+		font: $font-weight #{$font-size}%/#{$line-height} $custom-font-family, $font-family;
+	} @else {
+		font: $font-weight #{$font-size}%/#{$line-height} $font-family;
+	}
 }
 
 body {

typeplate/scss/_vars-typeplate.scss

@@ -1,13 +1,13 @@
 // .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 
-//   .                                      '||            .           
-// .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....  
-//  ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...|| 
-//  ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||      
-//  '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...' 
-//       .. |      ||               ||                                 
+//   .                                      '||            .
+// .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
+//  ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
+//  ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
+//  '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
+//       .. |      ||               ||
 //        ''      ''''             ''''                      VARIABLES
-// 
+//
 
 // .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 
@@ -20,7 +20,9 @@ $font-weight: normal;
 $line-height: 1.65;
 $font-size: 112.5; // percentage value (16 * 112.5% = 18px)
 $font-base: 16 * ($font-size/100); // converts our percentage to a pixel value
-$serif-boolean: true; // declares serif or sans-serif for your default type
+$font-family: serif; // Non-font-face font-stack
+
+$custom-font-family: false; // Custom font-face stack, if set will be added to the $font-family
 
 
 // $Small Print