modular-scale 3.0.0.alpha1 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b8a2fcc008da1ed4e223740529f01dac381ff840
-  data.tar.gz: 5bafbba66d06b231d4d9287545d17d0d6f3f095f
+  metadata.gz: 5b218cce633b1fbb7aa11f3f1e98b2e591396b3c
+  data.tar.gz: 67816e15cee10a7d617928b1dfdff05822062903
 SHA512:
-  metadata.gz: 75d4b2cb0753bec81d6bb6bf8ef75b86ecaab8176c0b6967356a4b97b5b2d7d8f04989901def48a0964f45e0062bac14d7be13d70b43b327e13d641cf631c04d
-  data.tar.gz: 0a953c02680c0e0addad76f1eca31f90a2568aa20302feba84fc8976194b822d16968598d4318518bd1612866ea18dcfbd6971173a7a2ca47aafdbd3eacf5569
+  metadata.gz: 3fd24052162a00771535e631b8c53bb6497b08d5f49d2ebb3f2bbf2e1ac41c993ec8e6bef7794dd18f6bfc2878d9a2bcee0817586518b6846ddb57facc2bf1a2
+  data.tar.gz: 78b428cbd8d9cf7e12da30ca10b83b7e3534f812006368abb1d7f051b8f0ca7a6b49d46a1c43398ef25be53d89db65794a46e70c83cc4f4a951c3d075e8cfcf9

data/changelog.md

@@ -8,6 +8,7 @@
   * Removed multiple ratio support because it was confusing and you should use multiple threads anyway. This dramatically reduced the core logic and bugs.
   * Fluid is the only responsive setting.
   * Responsive mixin automatically pulls breakpoints from map threads.
+  * find ratios based on target sizes at points on the scale.
 
 # Version 2.1.1
 

data/lib/modular-scale.rb

@@ -16,8 +16,8 @@ Compass::Frameworks.register('modular-scale', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module ModularScale
-  VERSION = "3.0.0.alpha1"
-  DATE = "2015-11-08"
+  VERSION = "3.0.0"
+  DATE = "2017-04-02"
 end
 
 # This is where any custom SassScript should be placed. The functions will be

data/readme.md

@@ -10,7 +10,7 @@ To get started, you need to select a ratio and a base value. The base value is u
 
 ### Compass
 
-* Terminal: `gem install modular-scale`
+* Terminal: `gem install modular-scale --pre`
 * Compass config: `require 'modular-scale'`
 * SCSS: `@import 'modular-scale';`
 
@@ -98,20 +98,24 @@ If you wish to put breakpoints into your settings for use with responsive typogr
 $modularscale: (
   base: 12px,
   ratio: 1.5,
-  30em: (
+  400px: (
     ratio: 1.2,
   ),
-  40em: (
+  900px: (
     base: 16px,
     ratio: 1.3,
   ),
-  60em: (
+  1200px: (
     base: 16px,
     ratio: 1.6,
   ),
 );
 ```
 
+_Note that you must use the same units for both your type and your breakpoints for this to work_
+
+This technique is based on [Mike Riethmuller’s](https://twitter.com/MikeRiethmuller) [_Precise control over responsive typography_](http://madebymike.com.au/writing/precise-control-responsive-typography/). A fantastic technique for fluidly scaling typography.
+
 Then, call the mixin `@include ms-respond();` and a fully fluid and responsive scale will be generated.
 
 ```scss
@@ -122,15 +126,13 @@ h2 {
 
 If you do happen to have any values that are just named without numbers they will be ignored by the responsive mixin, it’s smart enough to just pull values that look like breakpoints.
 
-#### Non-integer values and target
-
-Unfortunately Sass doesn’t natively support exponents. You will need to either use Compass, math-sass, or another library that has a fully featured `pow()` function to use non-integer values in modular scale.
+#### Note on non-integer values
 
-Fortunately Compass and math-sass are excellent and if you install them alongside modular scale it will pick up on the added functionality and you will be able to write values like `ms(2.5)`.
+Unfortunately [Sass doesn’t natively support exponents](https://github.com/sass/sass/issues/684#issuecomment-196852515). This isn’t all bad news, you can use either use [Compass](http://compass-style.org/), [mathsass](https://github.com/terkel/mathsass), or another library that has a `pow()` function that supports non-integer values and this plugin will pick up on that function and use it. You will then be able to write values like `ms(2.5)`. This is also a prerequisite for _target sizes_ below.
 
-#### Target sizes*
+#### Target sizes
 
-_NOTE: Please see above on using a robust pow function_
+_NOTE: Please see above section on non-integer values before using this feature_
 
 One of the more difficult parts of setting up your scales is finding a ratio that works for you. In many cases you know what size you want your text to be and what size you want larger headings to be. The `at` helper allows you to plug in a target size into the ratio value and it will generate your ratio.
 

data/stylesheets/_modularscale.scss

@@ -1,9 +1,6 @@
 // Defaults and variables
 @import 'modularscale/vars';
 
-// Feature tests
-@import 'modularscale/tests';
-
 // Core functions
 @import 'modularscale/settings';
 @import 'modularscale/pow';

data/stylesheets/modularscale/_function.scss

@@ -1,5 +1,6 @@
 @function ms-function($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
 
+  // Parse settings
   $ms-settings: ms-settings($base,$ratio,$thread,$settings);
   $base: nth($ms-settings, 1);
   $ratio: nth($ms-settings, 2);

data/stylesheets/modularscale/_pow.scss

@@ -1,8 +1,17 @@
+// Sass does not have native pow() support so this needs to be added.
+// Compass and other libs implement this more extensively.
+// In order to keep this simple, use those when they are avalible.
+// Issue for pow() support in Sass: https://github.com/sass/sass/issues/684
+
 @function ms-pow($b,$e) {
+
+  // If pow() exists (compass or mathsass) use that.
   @if function-exists('pow') {
     @return pow($b,$e);
   }
 
+  // This does not support non-integer exponents,
+  // Check and return an error if a non-integer exponent is passed.
   @if (floor($e) != $e) {
     @error '
 ======================================================================
@@ -14,7 +23,10 @@ https://github.com/terkel/mathsass
 '
   }
 
+  // Seed the return.
   $ms-return: $b;
+
+  // Multiply or divide by the specified number of times.
   @if $e > 0 {
     @for $i from 1 to $e {
       $ms-return: $ms-return * $b;

data/stylesheets/modularscale/_respond.scss

@@ -1,6 +1,10 @@
 // Generate calc() function
+// based on Mike Riethmuller's Precise control over responsive typography
+// http://madebymike.com.au/writing/precise-control-responsive-typography/
 @function ms-fluid($val1: 1em, $val2: 1em, $break1: 0, $break2: 0) {
   $diff: ms-unitless($val2) - ms-unitless($val1);
+
+  // v1 + (v2 - v1) * ( (100vw - b1) / b2 - b1 )
   @return calc( #{$val1} + #{ms-unitless($val2) - ms-unitless($val1)} * ( ( 100vw - #{$break1}) / #{ms-unitless($break2) - ms-unitless($break1)} ) );
 }
 
@@ -17,11 +21,16 @@
     @if type-of($v) == number {
       @if unit($v) != '' {
 
+        // Write out the first value without a media query.
         @if $first-write {
           #{$prop}: ms-function($val, $thread: $v, $settings: $map);
+
+          // Not the first write anymore, reset to false to move on.
           $first-write: false;
           $last-break: $v;
         }
+
+        // Write intermediate breakpoints.
         @else {
           @media (min-width: $last-break) and (max-width: $v) {
             $val1: ms-function($val, $thread: $last-break, $settings: $map);
@@ -33,6 +42,8 @@
       }
     }
   }
+
+  // Write the last breakpoint.
   @if $last-break {
     @media (min-width: $last-break) {
       #{$prop}: ms-function($val, $thread: $last-break, $settings: $map);

data/stylesheets/modularscale/_round-px.scss

@@ -1,3 +1,6 @@
+// No reason to have decimal pixel values,
+// normalize them to whole numbers.
+
 @function ms-round-px($r) {
   @if unit($r) == 'px' {
     @return round($r);

data/stylesheets/modularscale/_settings.scss

@@ -1,3 +1,7 @@
+// Parse settings starting with defaults.
+// Settings should cascade down like you would expect in CSS.
+// More specific overrides previous settings.
+
 @function ms-settings($b: false, $r: false, $t: false, $m: $modularscale) {
   $base: $ms-base;
   $ratio: $ms-ratio;

data/stylesheets/modularscale/_sort.scss

@@ -1,18 +1,34 @@
+// Basic list sorting
+// Would like to replace with http://sassmeister.com/gist/30e4863bd03ce0e1617c
+// Unfortunately libsass has a bug with passing arguments into the min() funciton.
+
 @function ms-sort($l) {
 
+  // loop until the list is confirmed to be sorted
   $sorted: false;
   @while $sorted == false {
+
+    // Start with the assumption that the lists are sorted.
     $sorted: true;
+
+    // Loop through the list, checking each value with the one next to it.
+    // Swap the values if they need to be swapped.
+    // Not super fast but simple and modular scale doesn't lean hard on sorting.
     @for $i from 2 through length($l) {
       $n1: nth($l,$i - 1);
       $n2: nth($l,$i);
+
+      // If the first value is greater than the 2nd, swap them.
       @if $n1 > $n2 {
         $l: set-nth($l, $i, $n1);
         $l: set-nth($l, $i - 1, $n2);
+
+        // The list isn't sorted and needs to be looped through again.
         $sorted: false;
       }
     }
   }
 
+  // Return the sorted list.
   @return $l;
 }

data/stylesheets/modularscale/_strip-units.scss

@@ -3,6 +3,5 @@
 // It is used here because calc() doesn't do unit logic
 // AND target ratios use units as a hack to get a number.
 @function ms-unitless($val) {
-  $val: $val / ($val - $val + 1);
-  @return $val;
+  @return ($val / ($val - $val + 1));
 }

data/stylesheets/modularscale/_sugar.scss

@@ -1,3 +1,7 @@
+// To attempt to avoid conflicts with other libraries
+// all funcitons are namespaced with `ms-`.
+// However, to increase usability, a shorthand function is included here.
+
 @function ms($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
   @return ms-function($v, $base, $ratio, $thread, $settings);
 }

data/stylesheets/modularscale/_target.scss

@@ -1,37 +1,49 @@
-@function ms-target($t,$b) {
-
-  @if type-of($b) == 'list' {
-    @error 'Target ratios don’t work with multi-stranded modular scales.'
+// Convert number string to number
+@function ms-to-num($n) {
+  $l: str-length($n);
+  $r: 0;
+  $m: str-index($n,'.');
+  @if $m == null {
+    $m: $l + 1;
   }
+  // Loop through digits and convert to numbers
+  @for $i from 1 through $l {
+    $v: str-slice($n,$i,$i);
+    @if $v == '1' { $v: 1; }
+    @elseif $v == '2' { $v: 2; }
+    @elseif $v == '3' { $v: 3; }
+    @elseif $v == '4' { $v: 4; }
+    @elseif $v == '5' { $v: 5; }
+    @elseif $v == '6' { $v: 6; }
+    @elseif $v == '7' { $v: 7; }
+    @elseif $v == '8' { $v: 8; }
+    @elseif $v == '9' { $v: 9; }
+    @elseif $v == '0' { $v: 0; }
+    @else { $v: null; }
+    @if $v != null {
+      $m: $m - 1;
+      $r: $r + ms-pow(10,$m - 1) * $v;
+    } @else {
+      $l: $l - 1;
+    }
+  }
+  @return $r;
+}
 
-  // target value
-  $v: ms-unitless($t);
-  // base
-  $b: ms-unitless($b);
-  // Target place on the scale the value should match
-  $t: str-slice(unit($t), 3);
-
-  // Convert strings into numbers...
-  @if $t == '0' { $t: 0; }
-  @if $t == '1' { $t: 1; }
-  @if $t == '2' { $t: 2; }
-  @if $t == '3' { $t: 3; }
-  @if $t == '4' { $t: 4; }
-  @if $t == '5' { $t: 5; }
-  @if $t == '6' { $t: 6; }
-  @if $t == '7' { $t: 7; }
-  @if $t == '8' { $t: 8; }
-  @if $t == '9' { $t: 9; }
-  @if $t == '10' { $t: 10; }
-  @if $t == '11' { $t: 11; }
-  @if $t == '12' { $t: 12; }
-  @if $t == '13' { $t: 13; }
-  @if $t == '14' { $t: 14; }
+// Find a ratio based on a target value
+@function ms-target($t,$b) {
+  // Convert to string
+  $t: $t + '';
+  // Remove base units to calulate ratio
+  $b: ms-unitless(nth($b,1));
+  // Find where 'at' is in the string
+  $at: str-index($t,'at');
 
-  @if type-of($t) == 'string' {
-    @error 'Please select an integer between 0 and 14 for a target value in modular scale.'
-  }
+  // Slice the value and target out
+  // and convert strings to numbers
+  $v: ms-to-num(str-slice($t,0,$at - 1));
+  $t: ms-to-num(str-slice($t,$at + 2));
 
-  // todo make this n root with n being $t
-  @return pow(($v/$b),(1/$t));
+  // Solve the modular scale function for the ratio.
+  @return ms-pow(($v/$b),(1/$t));
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: modular-scale
 version: !ruby/object:Gem::Version
-  version: 3.0.0.alpha1
+  version: 3.0.0
 platform: ruby
 authors:
 - Scott Kellum
@@ -10,22 +10,8 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-08 00:00:00.000000000 Z
-dependencies:
-- !ruby/object:Gem::Dependency
-  name: compass
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.0.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.0.0
+date: 2017-04-02 00:00:00.000000000 Z
+dependencies: []
 description: |-
   A modular scale is a list of values that share the same relationship. These
   values are often used to size type and create a sense of harmony in a design. Proportions within
@@ -57,7 +43,6 @@ files:
 - stylesheets/modularscale/_strip-units.scss
 - stylesheets/modularscale/_sugar.scss
 - stylesheets/modularscale/_target.scss
-- stylesheets/modularscale/_tests.scss
 - stylesheets/modularscale/_vars.scss
 homepage: http://modularscale.com
 licenses:

data/stylesheets/modularscale/_tests.scss

@@ -1,12 +0,0 @@
-// Feature testing
-
-
-// Test if the pow() function exists
-@function ms-pow-exists() {
-  @if pow(4, 2) == 16 {
-    @return true;
-  }
-  @return false;
-}
-
-$ms-pow-exists: ms-pow-exists();