sane-scale 0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f1c3c844f2da6800cc3529504aeb55450d04b506
+  data.tar.gz: b19e2024fc6edf08ae908ebbb754d55a9ad9bf5b
+SHA512:
+  metadata.gz: 351aeacda072ea1ee1ef212703139bdbe357beb3090a041d529b1aafd30c0fa05f84c45604b3699570ce7f168c86f9d5c6b0fb2848407865d03fc03c92f387a7
+  data.tar.gz: 1c28ba05d43e6ebefd652160702160ee808a5a8c56a0c0003df65a48f89f11349137796db58270ddc6a7c6c0d6df17baa21ed424a95e17377e72b1c277480c97

data/README.md

@@ -0,0 +1,124 @@
+# Sane Scale
+
+Sane Scale is a framework for defining and applying typographic styles. Its goal is to generate a complex, nuanced typographic system from only a few key variables. 
+
+## Features
+
+1. Modular. Typographic measurements are based on proportional lists of values. 
+2. Responsive. Typography adjusts to the constraints of each breakpoint.
+3. Font rebalancing. Different fonts set to the same size often don't appear to be. Fonts are normalized, so every font appears to be exactly the size you intend.
+
+## Install 
+
+* Terminal: `gem install sane-scale`
+* Compass config.rb: `require 'sane-scale'`
+* SCSS: `@import 'sane-scale';`
+
+## Usage
+
+### Declare your fonts
+
+For Sane Scale, fonts are defined via SASS maps in the following format:
+
+```scss
+// Default font
+
+$font-georgia: (
+	"family": unquote("Georgia, serif"),
+	"normalize-ratio": 1.00
+); 
+
+// Additional fonts
+
+$font-verdana: (
+	"family": unquote("Verdana, sans-serif"),
+	"normalize-ratio": 0.89
+);
+ 
+$font-feather: (
+	"family": unquote("'Feather'"),
+	"normalize-ratio": 0.95
+);
+```
+
+Oftentimes two fonts set to different sizes do not appear to be the same size. This is because the height of their lowercase letters is not equal. The `normalize-ratio` is the ratio we'll use to adjust the size of anything set in this font. 
+
+For example, Verdana appears 11% larger than Georgia. To normalize it with Georgia, we need to decrease size by 11% (normalize-ratio: 0.89). The normalized sizes of Verdana will appear to be the same size as Georgia.
+
+### Define your breakpoints
+
+Sane scale uses a SASS map of breakpoints (with relevant parameters) in the following format:
+
+```scss
+$breakpoints: (	
+
+	// Phone sizes
+	"default": (
+		"base-font-size": 18px,
+		"base-line-height": 1.5,
+		"max-font-size": 28px,
+		"max-line-height": 1.35,
+		"rounding": false
+	),
+
+	// Tablet sizes and larger
+	"tablet": (
+		"media-query": "screen and (min-width: 600px)",
+		"base-font-size": 20px,
+		"base-line-height": 1.6,
+		"max-font-size": 42px,
+		"max-line-height": 1.25,
+		"rounding": false
+	)
+); 
+```
+For each breakpoint, you'll need to specify a font-size and line-height for both the base size and the max size. Additional sizes and line-heights will be interpolated from these constraints.
+
+You'll also need to specify a `media-query` for all breakpoints, excluding your `default` breakpoint. Feel free to name the other breakpoints whatever you like.
+
+### Build the scale
+
+All thats left to do is to define the sizes you need and build the scale itself:
+
+```scss
+$numb-smaller-sizes: 1;
+$numb-larger-sizes: 4;
+
+$sane-scale: ss-make-responsive-font-scale($breakpoints, $numb-smaller-sizes, $numb-larger-sizes);
+```
+That's it! Note that `sane-scale` is a key variable. This map will be used by the following mixins to lookup and apply sizes.
+
+### Apply responsize sizing
+
+Use `@include ss-set-responsive-font-size($font, $size)` to apply a responsive size. The sizes available to you are based on your parameters: 
+* 0 is your base size.
+* 1, 2, 3... are your increasingly large sizes.
+* -1, -2, -3... are your increasingly small sizes.
+
+```scss
+p.lead {
+	@include ss-set-responsive-font-size($font-georgia, 1);
+}
+```
+We just created a responsive lead paragraph style. It will use `$font-georgia` at size 1 for each breakpoint: 20.1px by default, and then resizing to 24.1px for tablets and larger.
+
+```scss
+.h4 { 
+	@include ss-set-responsive-font-size($font-verdana, 1);
+}
+```
+We justed used the same size `.h4` heading, but with `$font-verdana`. That will result in a font-size of 17.9px by default and 21.4px for tablets and larger. Mathematically different, but visually equal.
+
+
+
+### Apply static sizing
+
+You might occassionally want finer-grained control of your type styles. For these cases, use the `ss-set-font-size()` mixin which accepts an additional `$breakpoint` parameter:
+
+```scss
+.h4 { 
+	@include ss-set-font-size($font-verdana, 1, "tablet");
+}
+```
+
+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.

data/lib/sane-scale.rb

@@ -0,0 +1,29 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, 
+# and where to find its files. Replace 'extension' with the 
+# name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('sane-scale', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension. Letters, 
+# numbers, and underscores only. Version is a number. If a 
+# version contains alphas, it will be created as a 
+# prerelease version. Date is in the form of YYYY-MM-DD
+module SaneScale
+  VERSION = "0.1"
+  DATE = "2016-05-09"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/_sane-scale.scss

@@ -0,0 +1,8 @@
+@import "sane-scale/map-deep-get";
+@import "sane-scale/make-scale";
+@import "sane-scale/make-font-scale";
+@import "sane-scale/make-responsive-font-scale";
+
+$sane-scale: ss-make-responsive-font-scale() !default; 
+
+@import "sane-scale/set-font-size";

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

@@ -0,0 +1,47 @@
+
+// Create a modular font scale. 
+// Returns a nested list of font-size and line-height values.
+
+@function ss-make-font-scale(
+	$base-size, 
+	$base-line-height,
+	$max-size,
+	$max-line-height,
+	$numb-smaller-sizes: 1,
+	$numb-larger-sizes: 4,
+	$rounding: false 
+) {
+
+	// If line-height params are unitless values, 
+	// covert to unit values.
+	$base-line-height: if(unitless($base-line-height), $base-size * $base-line-height, $base-line-height);
+	$max-line-height: if(unitless($max-line-height), $max-size * $max-line-height, $max-line-height);
+
+	// Create font-size and line-height scales
+	$font-size-scale: ss-make-scale($base-size, $max-size, $numb-smaller-sizes, $numb-larger-sizes, $rounding);
+	$line-height-scale: ss-make-scale($base-line-height, $max-line-height, $numb-smaller-sizes, $numb-larger-sizes, $rounding);
+    
+	$font-scale: ();
+	
+	// Pair each size with the correponding font-size 
+	// and line-height, then add the size to the scale.
+	@for $i from -$numb-smaller-sizes to $numb-larger-sizes + 1 {
+		
+		// Calculate array position in order to lookup sizes in lists.
+		$arr-position: $i + $numb-smaller-sizes + 1;
+
+		// Key for size
+		$name-of-size: $i;
+
+		// Values for size
+		$values: (
+			font-size: nth($font-size-scale, $arr-position),
+			line-height: nth($line-height-scale, $arr-position)
+		);
+
+		// Merge into $font-scale. 
+		$font-scale: map-merge($font-scale, ($name-of-size: $values));
+	}
+ 
+	@return $font-scale;
+}

data/stylesheets/sane-scale/_make-responsive-font-scale.scss

@@ -0,0 +1,51 @@
+
+// Augments a breakpoint map by building a "scale" property
+// containing the specified sizes to each breakpoint.
+
+@function ss-make-responsive-font-scale(
+	$breakpoints: (
+		// Phone sizes
+		"default": (
+			"base-font-size": 18px,
+			"base-line-height": 1.5,
+			"max-font-size": 28px,
+			"max-line-height": 1.35,
+			"rounding": false
+		),
+		// Tablet sizes and larger
+		"tablet": (
+			"media-query": "screen and (min-width: 600px)",
+			"base-font-size": 20px,
+			"base-line-height": 1.6,
+			"max-font-size": 42px,
+			"max-line-height": 1.25,
+			"rounding": false
+		)
+	),
+	$numb-smaller-sizes: 1,
+	$numb-larger-sizes: 4
+) {
+
+	$sane-scale: ();
+
+	// Create a scale for each breakpoint.
+	@each $breakpoint-name, $breakpoint-value in $breakpoints {
+
+		// Create a font scale.
+		$scale: ss-make-font-scale(
+			map-get($breakpoint-value, "base-font-size"),
+			map-get($breakpoint-value, "base-line-height"),
+			map-get($breakpoint-value, "max-font-size"),
+			map-get($breakpoint-value, "max-line-height"), 
+			$numb-smaller-sizes,
+			$numb-larger-sizes,
+			map-get($breakpoint-value, "rounded")
+		);
+
+		// Merge into responsive scale.
+		$new-breakpoint-value: map-merge($breakpoint-value, ("scale": $scale));
+		$sane-scale: map-merge($sane-scale, ($breakpoint-name: $new-breakpoint-value));
+	}
+
+	@return $sane-scale;
+}

data/stylesheets/sane-scale/_make-scale.scss

@@ -0,0 +1,41 @@
+
+// Create a modular scale. Returns a list of values.
+
+@function ss-make-scale(
+	$base: 16px, 
+	$max: 32px, 
+	$smaller-values: 1,
+	$larger-values: 4,
+	$rounding: false
+) {
+
+	$scale: ();
+
+	// The ratio we'll use to calculate the missing sizes.
+	$scaling-ratio: nth-root($max / $base, $larger-values); 
+
+	// Calculate and add smaller values to the scale.
+	@for $i from -$smaller-values through -1 {
+		$size: $base * power($scaling-ratio, $i);
+		$scale: append($scale, $size);
+	}
+
+	// Add the base value to the scale.
+	$scale: append($scale, $base);
+
+	// Calculate and add larger values to the scale.
+	@for $i from 1 through ($larger-values) {
+		$size: $base * power($scaling-ratio, $i);
+		$scale: append($scale, $size);
+	}
+
+	// Optionally round the scale.
+	@if $rounding == true {
+		@each $size-name, $size-value in $scale {
+			$new-value: round($size-value);
+			$scale: map-merge($scale, ($size-name: $new-value));
+		}
+	}
+
+	@return $scale;
+}

data/stylesheets/sane-scale/_map-deep-get.scss

@@ -0,0 +1,6 @@
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

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

@@ -0,0 +1,42 @@
+/******************************************************
+* MIXINS
+******************************************************/
+
+// Apply styles for a specific font, breakpoint, and size.
+@mixin ss-apply-font-styles($font, $size, $breakpoint-name) {
+
+	// Get font-size and adjust by the normalize ratio.
+	$normalize-ratio: map-get($font, "normalize-ratio");
+	font-size: map-deep-get($sane-scale, $breakpoint-name, "scale", $size, "font-size") * $normalize-ratio;
+
+	// Get line-height, but don't adjust by the normalize ratio.
+	line-height: map-deep-get($sane-scale, $breakpoint-name, "scale", $size, "line-height");
+}
+
+// Apply non-responsive styling. Only the size used for
+// the specified media query will be applied.
+@mixin ss-set-font-size($font, $size, $breakpoint-name) {
+	font-family: map-get($font, "family");
+	@include ss-apply-font-styles($font, $size, $breakpoint-name);
+}
+
+// Apply responsive styling. Corresponding sizes for
+// each media query will be applied.
+@mixin ss-set-responsive-font-size($font, $size) {
+	font-family: map-get($font, "family");
+	@each $breakpoint-name, $breakpoint-value in $sane-scale {
+
+		// For the default styles, don't include a media query.
+		@if $breakpoint-name == "default" {
+			@include ss-apply-font-styles($font, $size, $breakpoint-name);
+		}
+
+		// For other breakpoints, set style with a media query.
+		@else {
+			$media-query: map-deep-get($sane-scale, $breakpoint-name, "media-query");
+			@media #{$media-query} {
+				@include ss-apply-font-styles($font, $size, $breakpoint-name);
+			} 
+		}
+	}
+}

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: sane-scale
+version: !ruby/object:Gem::Version
+  version: '0.1'
+platform: ruby
+authors:
+- David Fusilier
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-05-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.3
+description: Modular, responsive, scalable typography
+email:
+- dfusil2@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/sane-scale.rb
+- stylesheets/_sane-scale.scss
+- stylesheets/sane-scale/_make-font-scale.scss
+- stylesheets/sane-scale/_make-responsive-font-scale.scss
+- stylesheets/sane-scale/_make-scale.scss
+- stylesheets/sane-scale/_map-deep-get.scss
+- stylesheets/sane-scale/_set-font-size.scss
+homepage: http://www.davidfusilier.com
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: sane-scale
+rubygems_version: 2.6.4
+signing_key: 
+specification_version: 4
+summary: A SASS framework for defining and applying typographic styles. Generate a
+  nuanced typographic system that is both modular and responsive with only a few key
+  variables. Using multiple fonts? Sane scale makes it simple to normalize your fonts
+  so they appear visually equal when set to the same size.
+test_files: []