sane-scale 0.6 → 0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 967cb2dd85d7c6ad70bc08983405aa7593acbea1
-  data.tar.gz: ee44b4ea907f18b8e16c9f6756426b0d23b7aef9
+  metadata.gz: a1bb5f7d45547764726f6369ca98765ff1abf34a
+  data.tar.gz: d35f636c7d80f015b24c14af2c149779d7c00651
 SHA512:
-  metadata.gz: ac337138bc6f33566991fa2f942bb893b82579f4a6c86a2f2a010f3867ab1f744bddf65d4aa9ccd17ced090d50592df44637249e3e87e02f4dd149d36e3f0c86
-  data.tar.gz: d7480ffec32e0666831e93831b1745ae4a144f4d7644829ce4f87039d89508dd26ae28c05212c8514b9426a3706bbb025b9867359830d7f45ffa82026aad06a2
+  metadata.gz: 1c1819cbd107757e984104e02bf416d8bd1a17905038c85a32d0d8fd21b51e235088055d0ba8e8ff1f4f868cb60cc891eb354af3e40239cbe66945cf41df6bfe
+  data.tar.gz: a32b58f27053436c14bb2a8b0e016212df0f369812cb5d4fabd35ad75fbad258c2913ca0991bded7abf5199fdc1627139e4ef57a3c5c9b932550bc8843b1ed4e

data/README.md

@@ -71,7 +71,8 @@ $typography: ss-build-typography((
 
 	// Define your font scales and their constraints.
 	"scales": (
-		// Phone sizes. 
+
+		// Phone sizes 
 		"default": (
 			"base-font-size": 16px,
 			"base-line-height": 1.5,
@@ -79,7 +80,7 @@ $typography: ss-build-typography((
 			"max-line-height": 1.35
 		),
 
-		// Tablet sizes and larger. 
+		// Tablet sizes and larger 
 		"tablet": (
 			"media-query": "screen and (min-width: 768px)",
 			"base-font-size": 18px,
@@ -123,7 +124,7 @@ We just applied responsive styling to the lead paragraph style. It will use medi
 	@include ss-set-responsive-font-size($font-verdana, 1);
 }
 ```
-We used the same size for the `.h4` heading, but with `$font-verdana`. That will result in a font-size of 16.4px by default and 19.8px for tablets and larger. Mathematically different, but visually equal.
+We used the same size for the `.h4` heading, but with `$font-verdana`. This will result in a font-size of 16.4px by default and 19.8px for tablets and larger. Mathematically different, but visually equal.
 
 
 
@@ -140,7 +141,51 @@ You might occassionally want finer-grained control of your type styles. For thes
 Here we just styled our h4 to have the size 1 for only the tablet breakpoint. With `ss-set-responsive-font-size()` the corresponding sizes for each other breakpoint would have also been applied.
 
 
-### Working with uppercase
+## Advanced Usage
+
+### Rounding 
+
+Rounding to any precision is supported. 
+
+```scss
+$typography: ss-build-typography((	
+
+	// Define your font scales and their constraints.
+	"scales": (
+
+		// Phone sizes 
+		"default": (
+			"base-font-size": 16px,
+			"base-line-height": 1.5,
+			"max-font-size": 28px,
+			"max-line-height": 1.35,
+			"font-size-precision": 0.1,
+			"line-height-precision: 0.01
+		),
+
+		// ...
+));
+```
+
+### Solid and tight line-height
+
+Oftentimes you may need to set very narrow lines of text, causing your line-height to look too loose. For a tighter line-height, use the `"line-height": "tight"` option.
+
+```scss
+.caption-tight { 
+	@include ss-set-responsive-font-size($font-verdana, -1, opts: ("line-height": "tight"));
+}
+```
+
+Other times you may want to set text to be solid (meaning no "leading"). In terms of CSS, this setting the line-height to be equal to the font-size. To do this, use the `"line-height": "solid"` option.
+
+```scss
+.btn { 
+	@include ss-set-responsive-font-size($font-verdana, 1, opts: ("line-height": "solid"));
+}
+```
+
+### Uppercase styles
 
 If you'd like to set something in all caps and have it align to your font scales, include an `uppercase-adjustment` when defining fonts:
 
@@ -151,12 +196,12 @@ $font-verdana: (
 	"line-height-adjustment": 0.94,
 	"uppercase-adjustment": 0.85
 );
-``
+```
 
-Apply the uppercase style like so:
+Apply an uppercase style like so:
 ```scss
 .h4 { 
-	@include ss-set-responsive-font-size($font-verdana, 1, $uppercase: true);
+	@include ss-set-responsive-font-size($font-verdana, 1, opts: ("uppercase": true));
 }
 ```
 

data/lib/sane-scale.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('sane-scale', :path => extension_path)
 # version contains alphas, it will be created as a 
 # prerelease version. Date is in the form of YYYY-MM-DD
 module SaneScale
-  VERSION = "0.6"
-  DATE = "2016-07-17"
+  VERSION = "0.7"
+  DATE = "2016-08-07"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/_sane-scale.scss

@@ -5,4 +5,6 @@
 
 $typography: ss-build-typography() !default; 
  
+@import "sane-scale/round";
 @import "sane-scale/set-font-size";
+

data/stylesheets/sane-scale/_build-font-scale.scss

@@ -10,13 +10,11 @@
 		"base-line-height": 1.5,
 		"max-font-size": 28px,
 		"max-line-height": 1.35,
-		"round-under": null,
 		"numb-smaller-sizes": 1,
 		"numb-larger-sizes": 4
 	), $opts);
 
-
-	// Create font-size and line-height scales
+	// Create font-size scale
 	$font-size-scale: ss-build-scale((
 		"base-value": map-get($opts, "base-font-size"),
 		"max-value": map-get($opts, "max-font-size"),
@@ -24,13 +22,14 @@
 		"numb-larger-values": map-get($opts, "numb-larger-sizes")
 	));
 
+	// Create line-height scale
 	$line-height-scale: ss-build-scale((
 		"base-value": map-get($opts, "base-line-height"),
 		"max-value": map-get($opts, "max-line-height"),
 		"numb-smaller-values": map-get($opts, "numb-smaller-sizes"),
 		"numb-larger-values": map-get($opts, "numb-larger-sizes")
 	));
-    
+
 	$sizes: ();
 	
 	// Pair each size with the correponding font-size 
@@ -45,11 +44,11 @@
 
 		// Values for size
 		$values: (
-			font-size: nth($font-size-scale, $arr-position),
-			line-height: nth($line-height-scale, $arr-position)
+			"font-size": nth($font-size-scale, $arr-position),
+			"line-height": nth($line-height-scale, $arr-position)
 		);
 
-		// Merge into $font-scale. 
+		// Add to size array.
 		$sizes: map-merge($sizes, ($name-of-size: $values));
 	}
 

data/stylesheets/sane-scale/_round.scss

@@ -0,0 +1,8 @@
+ 
+// Round a value to any precision
+
+@function ss-round($value: 1.0, $precision: 1.0) {
+	$scale: 1 / $precision;
+	$result: round($value * $scale) / $scale;
+	@return $result;
+}

data/stylesheets/sane-scale/_set-font-size.scss

@@ -3,37 +3,81 @@
 ******************************************************/
 
 // Apply styles for a specific font, breakpoint, and size.
-@mixin ss-apply-font-styles($font, $size, $scale-name, $uppercase: false) {
+@mixin ss-apply-font-styles($font, $size, $scale-name, $opts: ()) {
+
+	// Extend default opts
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
+	// FONT SIZE
+	// Get and apply adjustments.
 
-	// Get font-size and apply adjustments.
 	$unadjusted-font-size: map-deep-get($typography, $scale-name, "sizes", $size, "font-size"); 
 	$font-size-adjustment: map-get($font, "font-size-adjustment") or 1.00;
 	$uppercase-adjustment: map-get($font, "uppercase-adjustment") or 1.00;
 
-	@if $uppercase {
+	@if map-get($opts, "uppercase") {
 		$font-size-adjustment: $font-size-adjustment * $uppercase-adjustment;
 	}
 
 	$font-size: $unadjusted-font-size * $font-size-adjustment;
 
 	// Round font-size.
-	$font-size-precision: map-deep-get($typography, $scale-name, "font-size-precision") or 0.001;
+	$font-size-precision: map-deep-get($typography, $scale-name, "font-size-precision") or null;
+	@if ($font-size-precision) {
+        $font-size: ss-round($font-size, $font-size-precision);
+    } 
 	
-	// Get line-height and apply adjustments.
-	$unadjusted-line-height: map-deep-get($typography, $scale-name, "sizes", $size, "line-height");
-	$line-height-adjustment: map-get($font, "line-height-adjustment") or 1.00;
-
-	// If using relative line heights, the font-size-adjustment will 
-	// affect the line-height. This removes the unwanted effect.
-	@if unitless($unadjusted-line-height) {
-		$line-height-adjustment: $line-height-adjustment * (1 / $font-size-adjustment);
-	}
 
-	$line-height: $unadjusted-line-height * $line-height-adjustment;
+
+	// LINE HEIGHT
+	// Get and apply adjustments.
+
+	$line-height-setting: map-get($opts, "line-height");
+	$unadjusted-line-height: null;
+	$line-height: null;
+
+	// Use line-height associated with scale and size.
+	$normal-line-height: map-deep-get($typography, $scale-name, "sizes", $size, "line-height");
+
+	// No space between lines. 1.0 if unitless, otherwise equal to font-size.
+	$solid-line-height: if(unitless($normal-line-height), 1.0, $font-size);
+	
+	// Halfway between default and solid line-height.
+	$tight-line-height: (($normal-line-height - $solid-line-height) / 2) + $solid-line-height;
+	
+	// If line-height is set to solid, use 1.0 or font-size.
+	@if $line-height-setting == "solid" { 
+		$line-height: $solid-line-height;
+
+	} @else {
+
+		// Line-height setting determines corresponding basis.
+		@if $line-height-setting == "tight" {
+    		$unadjusted-line-height: $tight-line-height;
+		} @else {
+			$unadjusted-line-height: $normal-line-height;
+		}
+
+		// Apply adjustments.
+		$line-height-adjustment: map-get($font, "line-height-adjustment") or 1.00;
+
+		// If using relative line heights, the font-size-adjustment will 
+		// affect the line-height. This removes the unwanted effect.
+		@if unitless($unadjusted-line-height) { 
+			$line-height-adjustment: $line-height-adjustment * (1 / $font-size-adjustment);
+		}
+
+		$line-height: $unadjusted-line-height * $line-height-adjustment;
+	}
 
 	// Round line-height.
-	$line-height-precision: map-deep-get($typography, $scale-name, "line-height-precision") or 0.001;
-	// $line-height: ss-round($line-height, $line-height-precision);
+	$line-height-precision: map-deep-get($typography, $scale-name, "line-height-precision") or null;
+	@if ($line-height-precision) {
+		$line-height: ss-round($line-height, $line-height-precision);
+	}
 
 	font-size: $font-size; 
 	line-height: $line-height;
@@ -41,24 +85,36 @@
 
 // Apply non-responsive styling. Only the size used for
 // the specified media query will be applied.
-@mixin ss-set-font-size($font, $size, $scale-name, $uppercase: false) {
+@mixin ss-set-font-size($font, $size, $scale-name, $opts: ()) {
 	
+	// Extend default opts
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
+
 	font-family: map-get($font, "family");
 
-	@if $uppercase {
+	@if map-get($opts, "uppercase") {
 		text-transform: uppercase;
 	}
 
-	@include ss-apply-font-styles($font, $size, $scale-name);
+	@include ss-apply-font-styles($font, $size, $scale-name, $opts);
 }
 
 // Apply responsive styling. Corresponding sizes for
 // each media query will be applied.
-@mixin ss-set-responsive-font-size($font, $size: 0, $uppercase: false) {
+@mixin ss-set-responsive-font-size($font, $size: 0, $opts: ()) {
+	
+	// Extend default opts
+	$opts: map-merge((
+		"uppercase": false,
+		"line-height": "normal"
+	), $opts);
 
 	font-family: map-get($font, "family");
 
-	@if $uppercase {
+	@if map-get($opts, "uppercase") {
 		text-transform: uppercase;
 	}
 
@@ -66,14 +122,14 @@
 
 		// For the default styles, don't include a media query.
 		@if $scale-name == "default" {
-			@include ss-apply-font-styles($font, $size, $scale-name, $uppercase);
+			@include ss-apply-font-styles($font, $size, $scale-name, $opts);
 		}
 
 		// For other breakpoints, set style with a media query.
 		@else {
 			$media-query: map-deep-get($typography, $scale-name, "media-query");
 			@media #{$media-query} {
-				@include ss-apply-font-styles($font, $size, $scale-name, $uppercase);
+				@include ss-apply-font-styles($font, $size, $scale-name, $opts);
 			} 
 		}
 	}

data/templates/project/sass/_typography-config.scss

@@ -53,7 +53,7 @@ $typography: ss-build-typography((
 	// Define your font scales and their constraints.
 	"scales": (
 
-		// Phone sizes. 
+		// Phone sizes 
 		"default": (
 			"base-font-size": 16px,
 			"base-line-height": 1.5,
@@ -61,7 +61,7 @@ $typography: ss-build-typography((
 			"max-line-height": 1.35
 		),
 
-		// Tablet sizes and larger. 
+		// Tablet sizes and larger
 		"tablet": (
 			"media-query": "screen and (min-width: 768px)",
 			"base-font-size": 18px,

data/templates/project/sass/main.scss

@@ -120,6 +120,9 @@ nav {
 	@include ss-set-responsive-font-size($font-heading, 0);
 }
 
+
+// Copy
+
 .copy-larger4 { 
 	@include ss-set-responsive-font-size($font-copy, 4);
 } 
@@ -132,6 +135,8 @@ nav {
 	@include ss-set-responsive-font-size($font-copy, 2); 
 }
 
+// Icons
+
 .icon-larger4 { 
 	@include ss-set-responsive-font-size($font-icon, 4);
 } 

data/templates/project/stylesheets/main.css

@@ -102,14 +102,15 @@ body {
 /* line 22, ../sass/_typography.scss */
 .h1 {
   font-family: Verdana, sans-serif;
-  font-size: 24.92px;
-  line-height: 1.42584;
+  text-transform: uppercase;
+  font-size: 21.182px;
+  line-height: 1.67746;
 }
 @media screen and (min-width: 768px) {
   /* line 22, ../sass/_typography.scss */
   .h1 {
-    font-size: 37.38px;
-    line-height: 1.32022;
+    font-size: 31.773px;
+    line-height: 1.55321;
   }
 }
 
@@ -1113,127 +1114,126 @@ nav a {
   }
 }
 
-/* line 123, ../sass/main.scss */
+/* line 126, ../sass/main.scss */
 .copy-larger4 {
   font-family: Georgia, serif;
-  text-transform: uppercase;
-  font-size: 22.96px;
-  line-height: 1.64634;
+  font-size: 28.0px;
+  line-height: 1.35;
 }
 @media screen and (min-width: 768px) {
-  /* line 123, ../sass/main.scss */
+  /* line 126, ../sass/main.scss */
   .copy-larger4 {
-    font-size: 34.44px;
-    line-height: 1.52439;
+    font-size: 42px;
+    line-height: 1.25;
   }
 }
 
-/* line 127, ../sass/main.scss */
+/* line 130, ../sass/main.scss */
 .copy-larger3 {
   font-family: Georgia, serif;
   font-size: 24.34437px;
   line-height: 1.38603;
 }
 @media screen and (min-width: 768px) {
-  /* line 127, ../sass/main.scss */
+  /* line 130, ../sass/main.scss */
   .copy-larger3 {
     font-size: 33.98248px;
     line-height: 1.32957;
   }
 }
 
-/* line 131, ../sass/main.scss */
+/* line 134, ../sass/main.scss */
 .copy-larger2 {
   font-family: Georgia, serif;
   font-size: 21.16601px;
   line-height: 1.42302;
 }
 @media screen and (min-width: 768px) {
-  /* line 131, ../sass/main.scss */
+  /* line 134, ../sass/main.scss */
   .copy-larger2 {
     font-size: 27.49545px;
     line-height: 1.41421;
   }
 }
 
-/* line 135, ../sass/main.scss */
+/* line 140, ../sass/main.scss */
 .icon-larger4 {
   font-family: 'Feather';
   font-size: 26.6px;
   line-height: 1.42105;
 }
 @media screen and (min-width: 768px) {
-  /* line 135, ../sass/main.scss */
+  /* line 140, ../sass/main.scss */
   .icon-larger4 {
     font-size: 39.9px;
     line-height: 1.31579;
   }
 }
 
-/* line 139, ../sass/main.scss */
+/* line 144, ../sass/main.scss */
 .icon-larger3 {
   font-family: 'Feather';
   font-size: 23.12715px;
   line-height: 1.45898;
 }
 @media screen and (min-width: 768px) {
-  /* line 139, ../sass/main.scss */
+  /* line 144, ../sass/main.scss */
   .icon-larger3 {
     font-size: 32.28336px;
     line-height: 1.39955;
   }
 }
 
-/* line 143, ../sass/main.scss */
+/* line 148, ../sass/main.scss */
 .icon-larger2 {
   font-family: 'Feather';
   font-size: 20.10771px;
   line-height: 1.49792;
 }
 @media screen and (min-width: 768px) {
-  /* line 143, ../sass/main.scss */
+  /* line 148, ../sass/main.scss */
   .icon-larger2 {
     font-size: 26.12068px;
     line-height: 1.48865;
   }
 }
 
-/* line 147, ../sass/main.scss */
+/* line 152, ../sass/main.scss */
 .icon-larger1 {
   font-family: 'Feather';
   font-size: 17.48248px;
   line-height: 1.5379;
 }
 @media screen and (min-width: 768px) {
-  /* line 147, ../sass/main.scss */
+  /* line 152, ../sass/main.scss */
   .icon-larger1 {
     font-size: 21.13442px;
     line-height: 1.58341;
   }
 }
 
-/* line 151, ../sass/main.scss */
+/* line 156, ../sass/main.scss */
 .icon-base {
   font-family: 'Feather';
   font-size: 15.2px;
   line-height: 1.57895;
 }
 @media screen and (min-width: 768px) {
-  /* line 151, ../sass/main.scss */
+  /* line 156, ../sass/main.scss */
   .icon-base {
     font-size: 17.1px;
     line-height: 1.68421;
   }
 }
 
-/* line 155, ../sass/main.scss */
+/* line 160, ../sass/main.scss */
 .icon-smaller {
   font-family: Georgia, serif;
   font-size: 13.91107px;
   line-height: 1.54004;
 }
 @media screen and (min-width: 768px) {
-  /* line 155, ../sass/main.scss */
+  /* line 160, ../sass/main.scss */
   .icon-smaller {
     font-size: 14.56392px;
     line-height: 1.70185;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sane-scale
 version: !ruby/object:Gem::Version
-  version: '0.6'
+  version: '0.7'
 platform: ruby
 authors:
 - David Fusilier
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-17 00:00:00.000000000 Z
+date: 2016-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassy-math
@@ -66,6 +66,7 @@ files:
 - stylesheets/sane-scale/_build-scale.scss
 - stylesheets/sane-scale/_build-typography.scss
 - stylesheets/sane-scale/_map-deep-get.scss
+- stylesheets/sane-scale/_round.scss
 - stylesheets/sane-scale/_set-font-size.scss
 - templates/project/config.rb
 - templates/project/fonts/feather-webfont.eot