modular-scale 1.0.2 → 3.0.8

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d514928d9de108ca949fe047fdf2e906f40bf68e
+  data.tar.gz: d25cab2c356567128b340e8c4500d07745b350f0
+SHA512:
+  metadata.gz: d90e8b63152db176cc0ccdc23e5dba0c2e16afc87d57bc1a3e3424fc038a195b84a37f655c478a2fc683885f83c9d5f86b4450f5c257c6d362dd878361fc473e
+  data.tar.gz: f3dbabced398cd32d8d76fc8ed6dce98a8d93a8a915af5ee5dc7b5a49568ac7a914cb59bd93a37dfea07824ca1af42869f4675748658cb4da564f439fcdc9eee

data/changelog.md

@@ -0,0 +1,74 @@
+# Version 3.0.8
+
+* Fix issues with removal of rounding, sorry folks.
+
+# Version 3.0.7
+
+* Remove rounding.
+
+# Version 3.0.6
+
+* Fix deprecation warnings.
+
+# Version 3.0.5
+
+* Added an !important flag for specificity in some frameworks like IntuitCSS. [See pull 146 for details](https://github.com/modularscale/modularscale-sass/pull/146).
+
+# Version 3.0.4
+
+* Fixed line breaks in error messaging to be compatable with future versions of Sass.
+
+# Version 3.0.3
+
+* Updated version for eyeglass (1.2.1)
+* Fixed scss file path for Bower
+* Removed `npm-debug.log` file
+
+# Version 3.0.2
+
+* Fix bug when the exponent is 0
+
+# Version 3.0.1
+
+* Fix issue with generic `pow()` being used instead of `ms-pow()`
+
+# Version 3.0.0
+
+  Core logic re-write along with settings moved to maps so they can be multithreaded and setup responsive scales better.
+
+  * Settings moved into a map.
+  * Multiple settings threads so you can use different scales in tandem.
+  * Removed the list funciton that outputs a list of values.
+  * 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
+
+  Bugfix an `@else if` statement.
+
+# Version 2.1.0
+
+  Ground-up re-write of ms-respond based on http://madebymike.com.au/writing/precise-control-responsive-typography/
+
+# Version 2.0.6
+
+  Pixel rounding and responsive mixins
+
+# Version 2.0.4
+
+  Version to the same release number as bower.
+
+# Version 2.0.0
+
+  This is a breaking version. You will need to refactor slightly in order to upgrade to this version from a previous version.
+
+  * Complete re-write.
+  * ratios are variables, not functions
+  * Common variables are scoped to "ms-"
+  * ms-lists() is the list functions
+  * No more mixins at all, only functions.
+  * Increased compatibility with Sass 3.1 and up
+  * Compatibility with LibSass
+  * Compass no longer required (non-integer values require Compass)

data/lib/modular-scale.rb

@@ -1,118 +1,34 @@
+# 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'
-require 'sassy-math'
-Compass::Frameworks.register("modular-scale", :path => "#{File.dirname(__FILE__)}/..")
 
-# Modular Scale Functions
-# module Sass::Script::Functions
-# end
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('modular-scale', :path => extension_path)
 
+# Version and date of version for your Compass extension.
+# Replace ModularScale 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 ModularScale
-  VERSION = "1.0.2"
-  DATE = "2012-08-13"
+  VERSION = "3.0.8"
+  DATE = "2018-09-27"
 end
 
-
-# Modular Scale Sass Script
-module Sass::Script
-  class Number < Literal
-    # Comparison
-    def <=>(other)
-      value <=> other.value
-    end
-  end
-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
-  # Modular Scale
-  def double_octave
-    value = 4 / 1.0
-    Sass::Script::Number.new(value)
-  end
-  def major_twelfth
-    value = 3 / 1.0
-    Sass::Script::Number.new(value)
-  end
-  def major_eleventh
-    value = 8 / 3.0
-    Sass::Script::Number.new(value)
-  end
-  def major_tenth
-    value = 5 / 2.0
-    Sass::Script::Number.new(value)
-  end
-  def octave
-    value = 2 / 1.0
-    Sass::Script::Number.new(value)
-  end
-  def major_seventh
-    value = 15 / 8.0
-    Sass::Script::Number.new(value)
-  end
-  def minor_seventh
-    value = 16 /9.0
-    Sass::Script::Number.new(value)
-  end
-  def major_sixth
-    value = 5 / 3.0
-    Sass::Script::Number.new(value)
-  end
-  def minor_sixth
-    value = 8 / 5.0
-    Sass::Script::Number.new(value)
-  end
-  def fifth
-    value = 3 / 2.0
-    Sass::Script::Number.new(value)
-  end
-  def augmented_forth
-    value = Math.sqrt(2) / 1.0
-    Sass::Script::Number.new(value)
-  end
-  def fourth
-    value = 4 / 3.0
-    Sass::Script::Number.new(value)
-  end
-  def major_third
-    value = 5 / 4.0
-    Sass::Script::Number.new(value)
-  end
-  def minor_third
-    value = 6 / 5.0
-    Sass::Script::Number.new(value)
-  end
-  def major_second
-    value = 9 / 8.0
-    Sass::Script::Number.new(value)
-  end
-  def minor_second
-    value = 16 / 15.0
-    Sass::Script::Number.new(value)
-  end
 
-  # Lists
-  def sort_list(list)
-    sep = list.separator if list.is_a?(Sass::Script::List)
-    list = list.to_a.sort
-    Sass::Script::List.new(list, sep)
-  end
-  def reverse_list(list)
-    sep = list.separator if list.is_a?(Sass::Script::List)
-    list = list.to_a.reverse
-    Sass::Script::List.new(list, sep)
-  end
-  def trim_list(list, threshold, ascending)
-    # remove list items above or below a threshold
-    sep = list.separator if list.is_a?(Sass::Script::List)
-    list = list.to_a
-    if ascending.value
-      list = list.delete_if {
-        |x| x.value <= threshold.value
-      }
-    else
-      list = list.delete_if {
-        |x| x.value >= threshold.value
-      }
-    end
-    Sass::Script::List.new(list, sep)
+  # Let modularscale know that this was installed via Compass
+  def ms_gem_installed()
+    Sass::Script::Bool.new(true)
   end
-end
+
+end

data/license.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2018 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@codingdesigner](http://twitter.com/codingdesigner))
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+**The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.**

data/readme.md

@@ -0,0 +1,188 @@
+# Modular Scale
+
+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 modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers.
+
+Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.
+
+To get started, you need to select a ratio and a base value. The base value is usually your text font size or 1em. Optionally you can add another value to create a double stranded modular scale which might be useful to create more options for in-between values. This base size paired with a ratio such as the golden ratio or any musical proportion will create your scale of values which all share this proportion.
+
+## Install
+
+### Eyeglass
+
+* Terminal: `npm install modularscale-sass --save-dev`
+* SCSS: `@import 'modularscale'`
+
+### Webpack with sass-loader
+
+* Terminal: `npm install modularscale-sass --save-dev`
+* Webpack config: install and use [sass-loader](https://github.com/jtangelder/sass-loader#apply-via-webpack-config)
+* SCSS: `@import '~modularscale-sass/stylesheets/modularscale';`
+
+### Bower
+
+* Terminal: `bower install modular-scale --save-dev`
+* SCSS: `@import '../link_to_component_dir/modularscale';`
+
+### Vanilla Sass
+
+* [Download the latest zip](https://github.com/modularscale/modularscale-sass/releases/latest)
+* Extract into your project
+* SCSS: `@import 'modularscale';`
+
+### Compass (no longer being updated. Last release v3.0.2)
+
+* Terminal: `gem install modular-scale --pre`
+* Compass config: `require 'modular-scale'`
+* SCSS: `@import 'modularscale';`
+
+## Using modular scale
+
+#### Initial setup and usage:
+
+The first thing you’ll want to do when you start using modular scale is configure it to meet your needs. This is done in the `$modularscale` map.
+
+```scss
+$modularscale: (
+  base: 1em,
+  ratio: 1.5
+);
+```
+
+You can use any unit you wish as your base and any ratio. Multiple bases can be defined for creating multi stranded scales. There is no limit here to the number of strands you use.
+
+```scss
+$modularscale: (
+  base: 1em 1.2em 1.6em,
+  ratio: 1.5
+);
+```
+
+Now that we have defined your scale, we can start using it anywhere. Simply call the `ms(n)` function where `n` is the point on the scale.
+
+```scss
+h4 {
+  font-size: ms(3);
+}
+```
+
+Occasionally you may wind up with conflicts. All critical components are name-spaced to avoid conflicts with other libraries. If you do run into a conflict, `ms-function()` is the no-conflict function.
+
+#### Multiple scale threads
+
+Modular scale now supports different settings threads, so you can set up various threads to configure different ratios or breakpoints.
+
+```scss
+$modularscale: (
+  base: 1em,
+  ratio: 1.5,
+  a: (
+    ratio: 1.3
+  )
+);
+```
+
+To call the thread named `a`, call it in your function like so:
+
+```scss
+h5 {
+  font-size: ms(2, $thread: a);
+}
+```
+
+Your settings will cascade into the threads so no need to redefine a base or ratio if you want to re-use it from the main config.
+
+If you wish to put breakpoints into your settings for use with responsive typography then there are helpers in place for this. Simply organize your config with breakpoint values from smallest to largest:
+
+```scss
+$modularscale: (
+  base: 12px,
+  ratio: 1.5,
+  400px: (
+    ratio: 1.2,
+  ),
+  900px: (
+    base: 16px,
+    ratio: 1.3,
+  ),
+  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
+h2 {
+  @include ms-respond(font-size,5);
+}
+```
+
+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.
+
+#### Note on non-integer values
+
+Unfortunately [Sass doesn’t natively support exponents](https://github.com/sass/sass/issues/684#issuecomment-196852515). This isn’t all bad news, you can 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
+
+_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.
+
+```scss
+$modularscale: (
+  base: 16px,
+  ratio: 42at5
+);
+```
+
+Now your base is `16px` and when you call `ms(5)` it will be `42px`. Everything in-between falls neatly on a scale created with these two values.
+
+## Ratios
+
+Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
+
+By default ratio is set to `$fifth`.
+
+<table>
+  <tr><th>Function         </th><th>Ratio  </th><th>Decimal value</th></tr>
+  <tr><td>$phi             </td><td>1:1.618</td><td>1.618        </td></tr>
+  <tr><td>$golden          </td><td>1:1.618</td><td>1.618        </td></tr>
+  <tr><td>$double-octave   </td><td>1:4    </td><td>4            </td></tr>
+  <tr><td>$major-twelfth   </td><td>1:3    </td><td>3            </td></tr>
+  <tr><td>$major-eleventh  </td><td>3:8    </td><td>2.667        </td></tr>
+  <tr><td>$major-tenth     </td><td>2:5    </td><td>2.5          </td></tr>
+  <tr><td>$octave          </td><td>1:2    </td><td>2            </td></tr>
+  <tr><td>$major-seventh   </td><td>8:15   </td><td>1.875        </td></tr>
+  <tr><td>$minor-seventh   </td><td>9:16   </td><td>1.778        </td></tr>
+  <tr><td>$major-sixth     </td><td>3:5    </td><td>1.667        </td></tr>
+  <tr><td>$minor-sixth     </td><td>5:8    </td><td>1.6          </td></tr>
+  <tr><td>$fifth           </td><td>2:3    </td><td>1.5          </td></tr>
+  <tr><td>$augmented-fourth</td><td>1:√2   </td><td>1.414        </td></tr>
+  <tr><td>$fourth          </td><td>3:4    </td><td>1.333        </td></tr>
+  <tr><td>$major-third     </td><td>4:5    </td><td>1.25         </td></tr>
+  <tr><td>$minor-third     </td><td>5:6    </td><td>1.2          </td></tr>
+  <tr><td>$major-second    </td><td>8:9    </td><td>1.125        </td></tr>
+  <tr><td>$minor-second    </td><td>15:16  </td><td>1.067        </td></tr>
+</table>
+
+## [Changelog](https://github.com/Team-Sass/modular-scale/releases)
+
+### License
+
+The MIT License (MIT)
+
+Copyright © 2015 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@codingdesigner](http://twitter.com/codingdesigner))
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+**The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.**

data/stylesheets/_modularscale.scss

@@ -0,0 +1,17 @@
+// Defaults and variables
+@import 'modularscale/vars';
+
+// Core functions
+@import 'modularscale/settings';
+@import 'modularscale/pow';
+@import 'modularscale/strip-units';
+@import 'modularscale/sort';
+@import 'modularscale/target';
+@import 'modularscale/function';
+@import 'modularscale/round-px';
+
+// Mixins
+@import 'modularscale/respond';
+
+// Syntax sugar
+@import 'modularscale/sugar';

data/stylesheets/modularscale/_function.scss

@@ -0,0 +1,53 @@
+@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);
+
+  // Render target values from settings.
+  @if unit($ratio) != '' {
+    $ratio: ms-target($ratio,$base)
+  }
+
+  // Fast calc if not multi stranded
+  @if(length($base) == 1) {
+    @return ms-pow($ratio, $v) * $base;
+  }
+
+  // Create new base array
+  $ms-bases: nth($base,1);
+
+  // Normalize base values
+  @for $i from 2 through length($base) {
+    // initial base value
+    $ms-base: nth($base,$i);
+    // If the base is bigger than the main base
+    @if($ms-base > nth($base,1)) {
+      // divide the value until it aligns with main base.
+      @while($ms-base > nth($base,1)) {
+        $ms-base: $ms-base / $ratio;
+      }
+      $ms-base: $ms-base * $ratio;
+    }
+    // If the base is smaller than the main base.
+    @else if ($ms-base < nth($base,1)) {
+      // pump up the value until it aligns with main base.
+      @while $ms-base < nth($base,1) {
+        $ms-base: $ms-base * $ratio;
+      }
+    }
+    // Push into new array
+    $ms-bases: append($ms-bases,$ms-base);
+  }
+
+  // Sort array from smallest to largest.
+  $ms-bases: ms-sort($ms-bases);
+
+  // Find step to use in calculation
+  $vtep: floor($v / length($ms-bases));
+  // Find base to use in calculation
+  $ms-base: round(($v / length($ms-bases) - $vtep) * length($ms-bases)) + 1;
+
+  @return ms-pow($ratio, $vtep) * nth($ms-bases,$ms-base);
+}

data/stylesheets/modularscale/_pow.scss

@@ -0,0 +1,39 @@
+// 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) {
+
+  // Return 1 if exponent is 0
+  @if $e == 0 {
+    @return 1;
+  }
+
+  // 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 'Non-integer values are not supported in modularscale by default. Try using mathsass in your project to add non-integer scale support. 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;
+    }
+  }
+  @if $e < 0 {
+    @for $i from $e through 0 {
+      $ms-return: $ms-return / $b;
+    }
+  }
+  @return $ms-return;
+}

data/stylesheets/modularscale/_respond.scss

@@ -0,0 +1,58 @@
+// 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)} ) );
+}
+
+// Main responsive mixin
+@mixin ms-respond($prop, $val, $map: $modularscale, $ms-important: false) {
+  $base: $ms-base;
+  $ratio: $ms-ratio;
+
+  $first-write: true;
+  $last-break: null;
+
+  $important: '';
+
+  @if $ms-important == true {
+    $important: ' !important';
+  }
+
+  // loop through all settings with a breakpoint type value
+  @each $v, $s in $map {
+    @if type-of($v) == number {
+      @if unit($v) != '' {
+
+        // Write out the first value without a media query.
+        @if $first-write {
+          #{$prop}: unquote("#{ms-function($val, $thread: $v, $settings: $map)}#{$important}");
+
+          // 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);
+            $val2: ms-function($val, $thread: $v, $settings: $map);
+            #{$prop}: unquote("#{ms-fluid($val1,$val2,$last-break,$v)}#{$important}");
+          }
+          $last-break: $v;
+        }
+      }
+    }
+  }
+
+  // Write the last breakpoint.
+  @if $last-break {
+    @media (min-width: $last-break) {
+      #{$prop}: unquote("#{ms-function($val, $thread: $last-break, $settings: $map)}#{$important}");
+    }
+  }
+}

data/stylesheets/modularscale/_round-px.scss

@@ -0,0 +1,7 @@
+@function ms-round-px($r) {
+    @if unit($r) == 'px' {
+        @return round($r);
+    }
+    @warn "ms-round-px is no longer used by modular scale and will be removed in the 3.1.0 release.";
+    @return $r;
+}

data/stylesheets/modularscale/_settings.scss

@@ -0,0 +1,37 @@
+// 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;
+  $thread: map-get($m, $t);
+
+  // Override with user settings
+  @if map-get($m, base) {
+    $base: map-get($m, base);
+  }
+  @if map-get($m, ratio) {
+    $ratio: map-get($m, ratio);
+  }
+
+  // Override with thread settings
+  @if $thread {
+    @if map-get($thread, base) {
+      $base: map-get($thread, base);
+    }
+    @if map-get($thread, ratio) {
+      $ratio: map-get($thread, ratio);
+    }
+  }
+
+  // Override with inline settings
+  @if $b {
+    $base: $b;
+  }
+  @if $r {
+    $ratio: $r;
+  }
+
+  @return $base $ratio;
+}

data/stylesheets/modularscale/_sort.scss

@@ -0,0 +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

@@ -0,0 +1,7 @@
+// Stripping units is not a best practice
+// This function should not be used elsewhere
+// 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) {
+  @return ($val / ($val - $val + 1));
+}

data/stylesheets/modularscale/_sugar.scss

@@ -0,0 +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

@@ -0,0 +1,49 @@
+// 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; }
+    @else if $v == '2' { $v: 2; }
+    @else if $v == '3' { $v: 3; }
+    @else if $v == '4' { $v: 4; }
+    @else if $v == '5' { $v: 5; }
+    @else if $v == '6' { $v: 6; }
+    @else if $v == '7' { $v: 7; }
+    @else if $v == '8' { $v: 8; }
+    @else if $v == '9' { $v: 9; }
+    @else if $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;
+}
+
+// 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');
+
+  // 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));
+
+  // Solve the modular scale function for the ratio.
+  @return ms-pow(($v/$b),(1/$t));
+}

data/stylesheets/modularscale/_vars.scss

@@ -0,0 +1,25 @@
+// Ratios
+$double-octave    : 4                 ;
+$pi               : 3.14159265359     ;
+$major-twelfth    : 3                 ;
+$major-eleventh   : 2.666666667       ;
+$major-tenth      : 2.5               ;
+$octave           : 2                 ;
+$major-seventh    : 1.875             ;
+$minor-seventh    : 1.777777778       ;
+$major-sixth      : 1.666666667       ;
+$phi              : 1.618034          ;
+$golden           : $phi              ;
+$minor-sixth      : 1.6               ;
+$fifth            : 1.5               ;
+$augmented-fourth : 1.41421           ;
+$fourth           : 1.333333333       ;
+$major-third      : 1.25              ;
+$minor-third      : 1.2               ;
+$major-second     : 1.125             ;
+$minor-second     : 1.066666667       ;
+
+// Base config
+$ms-base          : 1em       !default;
+$ms-ratio         : $fifth    !default;
+$modularscale     : ()        !default;

metadata

@@ -1,97 +1,71 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: modular-scale
-version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 1
-  - 0
-  - 2
-  version: 1.0.2
+version: !ruby/object:Gem::Version
+  version: 3.0.8
 platform: ruby
-authors: 
+authors:
 - Scott Kellum
-- Adam Stacoviak
 - Mason Wendell
+- Adam Stacoviak
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2012-08-13 00:00:00 -04:00
-default_executable: 
-dependencies: 
-- !ruby/object:Gem::Dependency 
-  name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 11
-        - 5
-        version: 0.11.5
-  type: :runtime
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: sassy-math
-  prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 1
-        - 2
-        version: "1.2"
-  type: :runtime
-  version_requirements: *id002
-description: Sassy Modular Scale calculates the incremental values of the modular scale.
-email: 
+date: 2018-09-27 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
+  modular scales are all around us from the spacing of the joints on our fingers to branches on
+  trees. These natural proportions have been used since the time of the ancient Greeks in
+  architecture and design and can be a tremendously helpful tool to leverage for web designers.
+email:
 - scott@scottkellum.com
+- mason@thecodingdesigner.com
 - adam@stacoviak.com
-- mason@canarypromo.com
 executables: []
-
 extensions: []
-
-extra_rdoc_files: []
-
-files: 
-- README.mdown
+extra_rdoc_files:
+- changelog.md
+- license.md
+- readme.md
+files:
+- changelog.md
 - lib/modular-scale.rb
-- stylesheets/_modular-scale.sass
-has_rdoc: true
-homepage: https://github.com/scottkellum/modular-scale
-licenses: []
-
+- license.md
+- readme.md
+- stylesheets/_modularscale.scss
+- stylesheets/modularscale/_function.scss
+- stylesheets/modularscale/_pow.scss
+- stylesheets/modularscale/_respond.scss
+- stylesheets/modularscale/_round-px.scss
+- stylesheets/modularscale/_settings.scss
+- stylesheets/modularscale/_sort.scss
+- stylesheets/modularscale/_strip-units.scss
+- stylesheets/modularscale/_sugar.scss
+- stylesheets/modularscale/_target.scss
+- stylesheets/modularscale/_vars.scss
+homepage: http://modularscale.com
+licenses:
+- MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
-  requirements: 
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
   - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
-  requirements: 
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
   - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 1
-      - 3
-      - 6
+    - !ruby/object:Gem::Version
       version: 1.3.6
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 2.5.2.3
 signing_key: 
-specification_version: 3
-summary: Sassy Modular Scale calculates the incremental values of the modular scale in proportion to a set size and ratio. Inspired by and adapted from Tim Brown's modularscale.com.
+specification_version: 4
+summary: Modular scale calculator built into your Sass.
 test_files: []
-

data/README.mdown

@@ -1,126 +0,0 @@
-# Sassy Modular Scale
-
-## Put down the calculator and let Sass do the work.
-
-Sassy Modular Scale is a Sass based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown's modularscale.com.
-
-Sassy Modular Scale can be used as a [Compass](http://compass-style.org/) [extension](http://compass-style.org/help/tutorials/extensions/) and can be installed as a [Ruby gem](https://rubygems.org/gems/modular-scale).
-
-## Installation
-
-Usage requires Sass. Visit [sass-lang.com](http://sass-lang.com) to learn more and install.
-
-`gem install modular-scale`
-
-Add `require 'modular-scale'` to your Compass config file.
-
-Import the file into your stylesheets: `@import 'modular-scale';`
-
-## Usage
-
-Modular-scale is used as a function. Simply pass it through in place of any value to generate a value based on a modular scale.
-
-```scss
-width: modular-scale(2); // two up the modular scale
-width: ms(2); // Shorthand for the line above
-width: modular-scale(2, 1em); // two up the modular scale with a base size of 1em
-width: modular-scale(2, 1em, $octave); // Same as above but on an octave scale
-```
-
-You can output a list to your terminal to help you find out what values are on your scale.
-
-```scss
-@include modular-scale-list($start, $end, $base-size, $ratio);
-```
-
-By default, it writes 0-20 on the scale. You can also use shorthand to make things more efficient.
-
-```scss
-@include ms-list; // shorthand without attributes
-@include ms-list($start, $end, $base-size, $ratio); // shorthand with attributes
-```
-
-As a side effect of the modular-scale functions a `exponent` function is also available.
-
-```scss
-@include exponent($base, $exponent);
-```
-
-Sassy Modular Scale can be used as a function, like so:
-
-```scss
-// Use as a function. Fill in the multiple, base-size, and ratio
-height: modular-scale(7, 16px, $golden);
-```
-
-
-
-You can also 'lace' multiple ratios together by passing them in as a list (space-separated)
-
-```scss
-.lace {
-  width: ms(7, 16px, $golden $fourth);
-}
-```
-
-You can also set the $base-size variable to a list to interrelate two significant known sizes in your design
-*note:* the starting point of the scale will always be the *lowest* value in this list
-
-```scss
-.multibases {
-  width: ms(7, 16px 300px, $golden);
-}
-```
-
-You can use multiple $base-sizes and multiple $ratios together
-
-```scss
-.multibase-multiratio {
-  width: ms(7, 16px 300px, $golden $fourth);
-}
-```
-
-
-## Ratios
-
-The included ratios are called by functions. You can add your own ratios as well.
-
-Below is a list of ratios to choose from. By default, the variable `$ratio` is set to `golden()`.
-
-* golden()
-* double-octave()
-* major-twelfth()
-* major-eleventh()
-* major-tenth()
-* octave()
-* major-seventh()
-* minor-seventh()
-* major-sixth()
-* minor-sixth()
-* fifth()
-* augfourth()
-* fourth()
-* major-third()
-* minor-third()
-* major-second()
-* minor-second()
-
-Add your own ratio in Sass by setting a variable and passing that to modular-scale.
-
-```scss
-$my-variable: 1 / 3.14159265;
-```
-
-## Inspiration
-
-Sassy Modular Scale was adapted from [modularscale.com](http://modularscale.com/) by Tim Brown ([@nicewebtype](http://twitter.com/nicewebtype)). Tim also wrote a supporting article at [A List Apart](http://www.alistapart.com/) titled ["More Meaningful Typography"](http://www.alistapart.com/articles/more-meaningful-typography/). Additional inspiration goes to [Robert Bringhurst](http://en.wikipedia.org/wiki/Robert_Bringhurst), author of ["The Elements of Typographic Style"](http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style) - specifically Chapter 8 titled "Shaping the Page"
-
-## License
-
-Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@codingdesigner](http://twitter.com/codingdesigner))
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/stylesheets/_modular-scale.sass

@@ -1,220 +0,0 @@
-// SASSY MODULAR-SCALE
-// https://github.com/scottkellum/modular-scale
-
-// Defaults
-$ratio: golden_ratio() !default
-$base-size: 16px !default
-$round_pixels: true !default
-
-// Modular Scale function
-@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round_pixels: $round_pixels)
-  // return the $base-size if $multiple is zero
-  @if $multiple == 0
-    @if type-of($base-size) == 'list'
-      $base-size: sort_list($base-size)
-      @return nth($base-size, 1)
-    // return just the simple $base-size value if it's not a list
-    @return $base-size
-
-  // if multiple base-sizes are passed in as a list
-  // and multiple ratios are passed in as a list
-  // calculate values in using each base-size / ratio combination
-  @if type-of($base-size) == 'list' and type-of($ratio) == 'list'
-    @if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
-      @return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
-    @return ms-multibase-multiratio($multiple, $base-size, $ratio)
-
-  // if multiple base-sizes are passed in as a list
-  // calculate values in using each base-size
-  @if type-of($base-size) == 'list' and type-of($ratio) == 'number'
-    @if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
-      @return round(ms-multibase($multiple, $base-size, $ratio))
-    @return ms-multibase($multiple, $base-size, $ratio)
-
-  // if multiple ratios are passed in as a list
-  // calculate values in using each ratio
-  @if type-of($base-size) == 'number' and type-of($ratio) == 'list'
-    @if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
-      @return round(ms-multiratio($multiple, $base-size, $ratio))
-    @return ms-multiratio($multiple, $base-size, $ratio)
-
-  // If there are no lists just run the simple function
-  @if unit(power($ratio, $multiple) * $base-size) == 'px' and $round_pixels == true
-    @return round(power($ratio, $multiple) * $base-size)
-  @return power($ratio, $multiple) * $base-size
-
-
-// calculate values in using each base-size / ratio combination
-@function ms-multibase-multiratio($multiple, $base-size, $ratio)
-  // start with an empty list to place all values in
-  $scale-values: ()
-  // make sure base sizes are in ascending order
-  $base-size: sort_list($base-size)
-  // take each base-size in turn
-  $k: 1
-  @while $k <= length($base-size)
-    // add each $base-size to the list except the first
-    @if $k > 1
-      $scale-values: append($scale-values, nth($base-size, $k))
-    // take each ratio in turn
-    $j: 1
-    @while $j <= length($ratio)
-      // reset $modular-scale for each set
-      $modular-scale: nth($base-size, $k)
-      // do the scale for each base-size using this ratio
-      @if $multiple > 0
-        // up $multiple times
-        // and add the result to $scale-values
-        @for $i from 1 through $multiple
-          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
-          $scale-values: append($scale-values, $modular-scale)
-        // and down until the value is lower than the lowest $base-size
-        // and add the result to $scale-values
-        $i: -1
-        $modular-scale: nth($base-size, $k)
-        @while $modular-scale >= nth($base-size, 1)
-          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
-          $scale-values: append($scale-values, $modular-scale)
-          $i: $i - 1
-      @if $multiple < 0
-        // do the scale down for each set to below 1px
-        $i: 0
-        $modular-scale: nth($base-size, $k)
-        @while $i >= $multiple
-          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
-          $scale-values: append($scale-values, $modular-scale)
-          $i: $i - 1
-      $j: $j + 1
-    $k: $k + 1
-  // return trimmed and sorted final list
-  @return trim-sort($multiple, $scale-values, $base-size)
-
-
-// calculate values in using each base-size
-@function ms-multibase($multiple, $base-size, $ratio)
-  // start with an empty list to place all values in
-  $scale-values: ()
-  // make sure base sizes are in ascending order
-  $base-size: sort_list($base-size)
-  // take each base-size in turn
-  $k: 1
-  @while $k <= length($base-size)
-    // add each $base-size to the list except the first
-    @if $k > 1
-      $scale-values: append($scale-values, nth($base-size, $k))
-    // reset $modular-scale for each set
-    $modular-scale: nth($base-size, $k)
-    // do the scale for each base-size using this ratio
-    @if $multiple > 0
-      // up $multiple times
-      // and add the result to $scale-values
-      @for $i from 1 through $multiple
-        $modular-scale: power($ratio, $i) * nth($base-size, $k)
-        $scale-values: append($scale-values, $modular-scale)
-      // and down until the value is lower than the lowest $base-size
-      // and add the result to $scale-values
-      $i: -1
-      $modular-scale: nth($base-size, $k)
-      @while $modular-scale >= nth($base-size, 1)
-        $modular-scale: power($ratio, $i) * nth($base-size, $k)
-        $scale-values: append($scale-values, $modular-scale)
-        $i: $i - 1
-    @if $multiple < 0
-      // do the scale down for each set to below 1px
-      $i: 0
-      $modular-scale: nth($base-size, $k)
-      @while $i >= $multiple
-        $modular-scale: power($ratio, $i) * nth($base-size, $k)
-        $scale-values: append($scale-values, $modular-scale)
-        $i: $i - 1
-    $k: $k + 1
-  // return trimmed and sorted final list
-  @return trim-sort($multiple, $scale-values, $base-size)
-
-
-// calculate values in using each ratio
-@function ms-multiratio($multiple, $base-size, $ratio)
-  // start with an empty list to place all values in
-  $scale-values: ()
-  // If $multiple is a positive integer (up the scale)
-  @if $multiple > 0
-    // take each ratio in turn
-    $j: 1
-    @while $j <= length($ratio)
-      // reset $modular-scale for each set
-      $modular-scale: $base-size
-      // do the scale using this ratio thru the multiple, and add the result to $scale-values
-      @for $i from 1 through $multiple
-        $modular-scale: power(nth($ratio, $j), $i) * $base-size
-        $scale-values: append($scale-values, $modular-scale)
-      $j: $j + 1
-    // sort acsending
-    $scale-values: sort_list($scale-values)
-    // return the final value using the laced list
-    @return nth($scale-values, $multiple)
-  // If $multiple is a negative integer (down the scale)
-  @if $multiple < 0
-    // take each ratio in turn
-    $j: 1
-    @while $j <= length($ratio)
-      // reset $modular-scale for each set
-      $modular-scale: $base-size
-      // do the scale using this ratio thru the multiple, and add the result to $scale-values
-      @for $i from 1 through ($multiple * -1)
-        $modular-scale: power(nth($ratio, $j), -$i) * $base-size
-        $scale-values: append($scale-values, $modular-scale)
-      $j: $j + 1
-    // sort decending
-    $scale-values: reverse_list(sort_list($scale-values))
-    // return the final value using the laced list
-    @return nth($scale-values, $multiple * -1)
-
-
-// trim and sort the final list
-@function trim-sort($multiple, $scale-values, $base-size)
-  @if $multiple > 0
-    // trim list so we can count from the lowest $base-size
-    $scale-values: trim_list($scale-values, nth($base-size, 1), true)
-    // sort acsending
-    $scale-values: sort_list($scale-values)
-    // return the final value using the laced list
-    @return nth($scale-values, $multiple)
-  @else
-    // trim list so we can count from the lowest $base-size
-    $scale-values: trim_list($scale-values, nth($base-size, 1), false)
-    // sort acsending
-    $scale-values: reverse_list(sort_list($scale-values))
-    // return the final value using the laced list
-    @return nth($scale-values, -$multiple)
-
-
-/////////////////////////////////////////////////////////////////////////
-
-// alias for golden_ratio()
-@function golden()
-  @return golden_ratio()
-
-// Shortcut
-@function ms($args...)
-  // Return the value from the Modular Scale function
-  @return modular-scale($args...)
-
-// Write Modular Scale List
-@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
-  $ms-list: unquote("MS-LIST:")
-  @for $i from $start through $finish
-    $ms-list: append($ms-list, ms($i, $base-size, $ratio))
-  @return $ms-list
-
-@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
-  @return modular-scale-list($start, $finish, $base-size, $ratio)
-
-=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
-  @debug modular-scale-list($start, $finish, $base-size, $ratio)
-
-=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
-  @debug modular-scale-list($start, $finish, $base-size, $ratio)
-
-
-// Other libraries can easily query if this function is avalible
-$modular-scale-loaded: true