modular-scale 2.0.6 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8de48357a5e89e59a8190da7507025c2ff60b4d4
-  data.tar.gz: 180a64149b98ad4ede3c45d01616ebdfd897dc29
+  metadata.gz: bc09fa2379f131d6f1a73d0e549fe17d13603196
+  data.tar.gz: e040091ffa1183f998473052a6084ffbe9b71ff5
 SHA512:
-  metadata.gz: a629dfc386e7506f998710fa04814ef96f800a055f91a8ea25dc5465bafd71c090796a9a030acb6629d0b11608f361d5d6d434e545a4d726a7b19aec86c91c65
-  data.tar.gz: aa492d829fc0bfbbd7e9a2ac9d8db3998d2c995363f3ccda3f54e3d410a0862b3e34fc81a963e4e80388aed1d1fb8c3ff23944b568f2989c28e9470468c1396b
+  metadata.gz: 761cfc5df949d1de71e3e54e38e450e213ebcb6789dc335047d6fb0a407886528ce5d338a1970130ed0a14a29b9e8b9a60fa2f1513a40eb07dbe5852d7ac8ffa
+  data.tar.gz: a88ddbbb8ab25fac1ceb8af781d1f6d4eb360f9990cde18034b0b23cf597960083f89921a9336676fbbf9d72993b5e802a507aa08b63b776e6c2ad8858057451

data/changelog.md

@@ -1,3 +1,7 @@
+# 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

data/lib/modular-scale.rb

@@ -16,7 +16,7 @@ Compass::Frameworks.register('modular-scale', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module ModularScale
-  VERSION = "2.0.6"
+  VERSION = "2.1.0"
   DATE = "2013-12-20"
 end
 

data/readme.md

@@ -16,9 +16,14 @@ To get started, you need to select a ratio and a base value. The base value is u
 
 ### Bower
 
-* Terminal: `bower install modular-scale`
+* Terminal: `bower install modular-scale --save-dev`
 * SCSS: `@import '../link_to_component_dir/modular-scale';`
 
+### Eyeglass
+
+* Terminal: `npm install modularscale-sass --save-dev`
+* SCSS: `@import 'modular-scale'`
+
 ### Vanilla Sass
 
 * [Download the latest zip](https://github.com/Team-Sass/modular-scale/releases/latest)
@@ -67,7 +72,7 @@ You can output a list to your terminal to help you find out what values are on y
 @debug ms-list($start, $end, $ms-base, $ms-ratio);
 ```
 
-You can use a double standard scale by simply adding more base sizes in a space-sepreated list.
+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
 
 ```scss
@@ -132,11 +137,21 @@ $ms-ratio: $my-ratio;
 
 ## Responsive scales
 
-At times you may want to have a scale with less contrast on small screens and big type with more contrast on larger screens. For this you can use the `ms-respond` mixin that allows you to plug in a range of ratios at various breakpoints.
+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.
+
+```scss
+$ms-range:
+  1.1   20em,
+  1.333 60em;
+```
 
-First, you will need to set your range. A range is a list of ratio and breakpoint values from smallest to largest.
+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.
 
 ```scss
+$ms-fluid: false;
+
 $ms-range:
   1.2 20em,
   1.3 30em,
@@ -153,14 +168,6 @@ foo {
 }
 ```
 
-```css
-foo { font-size: 1.44em; }
-@media (min-width: 30em) { foo { font-size: 1.69em; } }
-@media (min-width: 40em) { foo { font-size: 1.96em; } }
-@media (min-width: 50em) { foo { font-size: 2.25em; } }
-@media (min-width: 60em) { foo { font-size: 2.56em; } }
-```
-
 ## [Changelog](https://github.com/Team-Sass/modular-scale/releases)
 
 ### Licence
@@ -173,4 +180,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 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.**
+**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/_modular-scale.scss

@@ -1,8 +1,9 @@
 @import "modular-scale/ratios";
 
-$ms-base: 1em !default;
-$ms-ratio: $golden !default;
-$ms-range: null !default;
+$ms-base:  1em      !default;
+$ms-ratio: $golden  !default;
+$ms-range: null     !default;
+$ms-fluid: true     !default;
 
 @import "modular-scale/tests";
 

data/stylesheets/modular-scale/_respond.scss

@@ -1,16 +1,47 @@
+// Stripping units is rarely a best practice and this function
+// should not be used elsewhere
+@function ms-unitless($val) {
+  $val: $val / ($val - $val + 1);
+  @return $val;
+}
+
+// Search config for values
+@function ms-range($x,$y,$range:$ms-range) {
+  @return nth(nth($range,$x),$y);
+}
+
+// Generate calc() function
+@function ms-respond-calc($value, $n, $range: $ms-range, $base: $ms-base) {
+  $val1: ms($value,$base,ms-range($n,1,$range));
+  $val2: ms($value,$base,ms-range($n+1,1,$range));
+  $break1: ms-range($n,2,$range);
+  $break2: ms-range($n+1,2,$range);
+  $diff: ms-unitless($val2) - ms-unitless($val1);
+  @if $ms-fluid {
+    @return calc( #{$val1} + #{$diff} * ( ( 100vw - #{$break1}) / #{ms-unitless($break2) - ms-unitless($break1)} ) );
+  } @else {
+    @return ms($value,$base,ms-range($n,1,$range));
+  }
+}
+
+// Main responsive mixin
 @mixin ms-respond($property, $value, $range: $ms-range, $base: $ms-base) {
+  // If there is no responsive config, just output the property and value
   @if $ms-range == null {
     #{$property}: ms($value,$base,$ms-ratio);
   } @else {
-    @for $i from 1 through length($range) {
-      @debug nth($range,$i);
-      @if $i == 1 {
-        #{$property}: ms($value,$base,nth(nth($range,$i),1));
-      } @else {
-        @media (min-width: nth(nth($range,$i),2)) {
-          #{$property}: ms($value,$base,nth(nth($range,$i),1));
-        }
+
+    // Initial value
+    #{$property}: ms($value,$base,ms-range(1,1,$range));
+
+    //
+    @for $i from 1 through (length($range) - 1) {
+      @media (min-width: ms-range($i,2,$range)) and (max-width: ms-range($i+1,2,$range)) {
+        #{$property}: ms-respond-calc($value, $i, $range, $base);
       }
     }
+    @media (min-width: ms-range(length($range),2,$range)) {
+      #{$property}: ms($value,$base,ms-range(length($range),1,$range));
+    }
   }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: modular-scale
 version: !ruby/object:Gem::Version
-  version: 2.0.6
+  version: 2.1.0
 platform: ruby
 authors:
 - Scott Kellum
@@ -16,14 +16,14 @@ dependencies:
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - '>='
       - !ruby/object:Gem::Version
         version: 0.12.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - '>='
       - !ruby/object:Gem::Version
         version: 0.12.0
 description: |-
@@ -43,10 +43,7 @@ extra_rdoc_files:
 - license.md
 - readme.md
 files:
-- changelog.md
 - lib/modular-scale.rb
-- license.md
-- readme.md
 - stylesheets/_modular-scale-tests.scss
 - stylesheets/_modular-scale.scss
 - stylesheets/modular-scale/_calc.scss
@@ -59,6 +56,9 @@ files:
 - stylesheets/modular-scale/_round-px.scss
 - stylesheets/modular-scale/_sort-list.scss
 - stylesheets/modular-scale/_tests.scss
+- changelog.md
+- license.md
+- readme.md
 homepage: http://modularscale.com
 licenses:
 - MIT
@@ -69,17 +69,17 @@ 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: 
-rubygems_version: 2.2.2
+rubygems_version: 2.0.14
 signing_key: 
 specification_version: 4
 summary: Modular scale calculator built into your Sass.