modular-scale 2.1.1 → 3.0.0.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 046c2bbc74504a6714922aa2ec24b3bde0239a42
-  data.tar.gz: 8353d90b9502fdc663c404c925f71cca7e0c9596
+  metadata.gz: b8a2fcc008da1ed4e223740529f01dac381ff840
+  data.tar.gz: 5bafbba66d06b231d4d9287545d17d0d6f3f095f
 SHA512:
-  metadata.gz: 29ce6e0c37e1f70edc359929094bc2b9bf863d01329d84d6b0bdb89feb08e917ad66dbe81ea8340fffcebe90855a4b2e6a07936822ba5906241fc858895f9b63
-  data.tar.gz: 4e7345d6f1c58b1d490e24d98fb5af614eb0a26e4ace57c179da4f91170a30d4259e9d9bc6a339fd13b758a15d141803f552957d48f5922938a38947e5f185b7
+  metadata.gz: 75d4b2cb0753bec81d6bb6bf8ef75b86ecaab8176c0b6967356a4b97b5b2d7d8f04989901def48a0964f45e0062bac14d7be13d70b43b327e13d641cf631c04d
+  data.tar.gz: 0a953c02680c0e0addad76f1eca31f90a2568aa20302feba84fc8976194b822d16968598d4318518bd1612866ea18dcfbd6971173a7a2ca47aafdbd3eacf5569

data/changelog.md

@@ -1,3 +1,14 @@
+# Version 3.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.
+
 # Version 2.1.1
 
   Bugfix an `@else if` statement.

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 = "2.1.1"
-  DATE = "2013-12-20"
+  VERSION = "3.0.0.alpha1"
+  DATE = "2015-11-08"
 end
 
 # This is where any custom SassScript should be placed. The functions will be
@@ -26,103 +26,9 @@ end
 
 module Sass::Script::Functions
 
-  # Let MS know that extra functionality is avalible
+  # Let modularscale know that this was installed via Compass
   def ms_gem_installed()
     Sass::Script::Bool.new(true)
   end
 
-  def ms_gem_func(value, bases, ratios)
-
-    # Convert to native ruby things
-    rvalue  = value.value.to_i
-
-    if bases.class == Sass::Script::Number
-      bases  = [] << bases
-    else
-      bases  = bases.value.to_a
-    end
-    if ratios.class == Sass::Script::Number
-      ratios = [] << ratios
-    else
-      ratios = ratios.value.to_a
-    end
-
-    # Convert items in arrays to floating point numbers
-    rbases  = []
-    rratios = []
-    bases.each do |num|
-      rbases << num.value.to_f
-    end
-    ratios.each do |num|
-      rratios << num.value.to_f
-    end
-
-
-    # Blank array for return
-    r = [rbases[0]]
-
-    # loop through all possibilities
-    # NOTE THIS IS NOT FULLY FUNCTIONAL YET
-    # ONLY LOOPS THROUGH SOME/MOST OF THE POSSIBILITES
-
-    rratios.each do |ratio|
-      rbases.each do |base|
-
-        base_counter = 0
-
-        # Seed list with an initial value
-        r << base
-
-        # Find values on a positive scale
-        if rvalue >= 0
-          # Find higher values on the scale
-          i = 0;
-          while ((ratio ** i) * base) >= (rbases[0])
-            r << (ratio ** i) * base
-            i = i - 1;
-          end
-
-          # Find lower possible values on the scale
-          i = 0;
-          while ((ratio ** i) * base) <= ((ratio ** (rvalue + 1)) * base)
-            r << (ratio ** i) * base
-            i = i + 1;
-          end
-
-        else
-
-          # Find lower values on the scale
-          i = 0;
-          while ((ratio ** i) * base) <= (rbases[0])
-            r << (ratio ** i) * base
-            i = i + 1;
-          end
-
-          # Find higher possible values on the scale
-          i = 0;
-          while ((ratio ** i) * base) >= ((ratio ** (rvalue - 1)) * base)
-            r << (ratio ** i) * base
-            i = i - 1;
-          end
-        end
-
-      end
-    end
-
-    # Sort and trim
-    r.sort!
-    r.uniq!
-
-
-    if rvalue < 0
-      r = r.keep_if { |a| a <= rbases[0] }
-      # Final value
-      r = r[(rvalue - 1)]
-    else
-      r = r[rvalue]
-    end
-
-
-    Sass::Script::Number.new(r)
-  end
 end

data/readme.md

@@ -19,6 +19,12 @@ To get started, you need to select a ratio and a base value. The base value is u
 * Terminal: `npm install modularscale-sass --save-dev`
 * SCSS: `@import 'modular-scale'`
 
+### 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/modular-scale';`
+
 ### Bower
 
 * Terminal: `bower install modular-scale --save-dev`
@@ -30,143 +36,140 @@ To get started, you need to select a ratio and a base value. The base value is u
 * Extract into your project
 * SCSS: `@import 'modular-scale';`
 
-## Compatibility
-
-I have been working incredibly hard to make Modular Scale compatible with multiple versions of Sass. As a result, it will work and has been tested in **Libsass**, **Sass 3.2**, **Sass 3.3**, and **Sass 3.4**.
-
-These are dramatically different environments so things may have slight differences. **[For best results, install via the gem with Compass](https://github.com/Team-Sass/modular-scale/tree/2.x#compass)**.
-
-#### **Compass + Sass (best):**
-
-  * non-integer values work with the `ms()` function. (Compass only)
-  * Significant speed increases as the gem does calculations natively in Ruby
-
-#### **Libsass:**
-
-  * Everything should be working, and work very quickly.
+## Using modular scale
 
-#### **Vanilla Sass:**
+#### Initial setup and usage:
 
-  * Works fine, but is slow when using multiple bases and ratios.
+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.
 
-## Usage
+```scss
+$modularscale: (
+  base: 1em,
+  ratio: 1.5
+);
+```
 
-Modular Scale has two default variables that you should place with your other site wide variables. `$ms-base` is usually your font size or `1em` and can have multiple values. `$ms-ratio` is the factor of change between each number so if the ratio is `1.5` then each number in the sequence will be 1.5 times that of the previous number. Just as you can have multiple bases you can have multiple ratios.
+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
-$ms-base: 1em;
-$ms-ratio: $golden;
+$modularscale: (
+  base: 1em 1.2em 1.6em,
+  ratio: 1.5
+);
 ```
 
-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.
+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
-font-size: ms(2); // two up the modular scale
-font-size: ms(2, 16px); // two up the modular scale with a base size of 16px, default is 1em
-font-size: ms(2, 1em, $octave); // Same as above but on an octave scale
+h4 {
+  font-size: ms(3);
+}
 ```
 
-You can output a list to your terminal to help you find out what values are on your scale.
+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
-@debug ms-list($start, $end, $ms-base, $ms-ratio);
+$modularscale: (
+  base: 1em,
+  ratio: 1.5,
+  a: (
+    ratio: 1.3
+  )
+);
 ```
 
-You can use a double standard scale by simply adding more base sizes in a space-separated list.
-**note:** the starting point of the scale will always be the **first** value in this list
+To call the thread named `a`, call it in your function like so:
 
 ```scss
-.double-standard {
-  width: ms(7, 1em 2em);
+h5 {
+  font-size: ms(2, $thread: a);
 }
 ```
 
-You can do the same thing with ratios
+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
-.multi-ratio {
-  width: ms(7, 1em, $golden $octave);
-}
+$modularscale: (
+  base: 12px,
+  ratio: 1.5,
+  30em: (
+    ratio: 1.2,
+  ),
+  40em: (
+    base: 16px,
+    ratio: 1.3,
+  ),
+  60em: (
+    base: 16px,
+    ratio: 1.6,
+  ),
+);
 ```
 
-You can use multiple $ms-bases and multiple $ms-ratio together
+Then, call the mixin `@include ms-respond();` and a fully fluid and responsive scale will be generated.
 
 ```scss
-.multibase-multiratio {
-  width: ms(7, 16px 24px, $golden $fourth);
+h2 {
+  @include ms-respond(font-size,5);
 }
 ```
 
-## Ratios
+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.
 
-Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
+#### Non-integer values and target
 
-By default, the variable `$ms-ratio` is set to `$golden`.
+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.
 
-<table>
+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)`.
 
-  <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>
+#### Target sizes*
 
-</table>
+_NOTE: Please see above on using a robust pow function_
 
-Add your own ratio in Sass by setting a variable and passing that to modular-scale.
+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
-$my-ratio: 1 / 3.14159265;
-$ms-ratio: $my-ratio;
+$modularscale: (
+  base: 16px,
+  ratio: 42at5
+);
 ```
 
-## Responsive scales
-
-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.
-
-First, you will need to set your range. A range is a list of ratio and breakpoint values from smallest to largest. Because this will render as a fluid range by default you will probably only want or need a range of two.
+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.
 
-```scss
-$ms-range:
-  1.1   20em,
-  1.333 60em;
-```
-
-If you want to have specified steps instead of fluid type set `$ms-fluid` to `false` and you may want to add more values to your range.
+## Ratios
 
-```scss
-$ms-fluid: false;
-
-$ms-range:
-  1.2 20em,
-  1.3 30em,
-  1.4 40em,
-  1.5 50em,
-  1.6 60em;
-```
+Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
 
-Now you can use the `ms-respond` mixin to output a range of values for a single point on a scale.
+By default ratio is set to `$fifth`.
 
-```scss
-foo {
-  @include ms-respond(font-size, 2);
-}
-```
+<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)
 

data/stylesheets/_modularscale.scss

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

data/stylesheets/modularscale/_function.scss

@@ -0,0 +1,52 @@
+@function ms-function($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
+
+  $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-round-px(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.
+    @elseif ($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-round-px(pow($ratio, $vtep) * nth($ms-bases,$ms-base));
+}