modular-scale 2.0.5 → 2.0.6

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 8de48357a5e89e59a8190da7507025c2ff60b4d4
+  data.tar.gz: 180a64149b98ad4ede3c45d01616ebdfd897dc29
+SHA512:
+  metadata.gz: a629dfc386e7506f998710fa04814ef96f800a055f91a8ea25dc5465bafd71c090796a9a030acb6629d0b11608f361d5d6d434e545a4d726a7b19aec86c91c65
+  data.tar.gz: aa492d829fc0bfbbd7e9a2ac9d8db3998d2c995363f3ccda3f54e3d410a0862b3e34fc81a963e4e80388aed1d1fb8c3ff23944b568f2989c28e9470468c1396b

data/changelog.md

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

@@ -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.5"
+  VERSION = "2.0.6"
   DATE = "2013-12-20"
 end
 

data/license.md

@@ -1,36 +1,9 @@
 The MIT License (MIT)
 
-Copyright (c) 2013 Scott Kellum, Mason Wendell
+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:
+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 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.
-
-Modular Scale
-Copyright (C) 2013  Scott Kellum, Mason Wendell
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
+**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,176 @@
+# 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 standard 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
+
+### Compass
+
+* Terminal: `gem install modular-scale`
+* Compass config: `require 'modular-scale'`
+* SCSS: `@import 'modular-scale';`
+
+### Bower
+
+* Terminal: `bower install modular-scale`
+* SCSS: `@import '../link_to_component_dir/modular-scale';`
+
+### Vanilla Sass
+
+* [Download the latest zip](https://github.com/Team-Sass/modular-scale/releases/latest)
+* 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.
+
+#### **Vanilla Sass:**
+
+  * Works fine, but is slow when using multiple bases and ratios.
+
+## Usage
+
+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.
+
+```scss
+$ms-base: 1em;
+$ms-ratio: $golden;
+```
+
+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
+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
+```
+
+You can output a list to your terminal to help you find out what values are on your scale.
+
+```scss
+@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.
+**note:** the starting point of the scale will always be the **first** value in this list
+
+```scss
+.double-standard {
+  width: ms(7, 1em 2em);
+}
+```
+
+You can do the same thing with ratios
+
+```scss
+.multi-ratio {
+  width: ms(7, 1em, $golden $octave);
+}
+```
+
+You can use multiple $ms-bases and multiple $ms-ratio together
+
+```scss
+.multibase-multiratio {
+  width: ms(7, 16px 24px, $golden $fourth);
+}
+```
+
+## 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, the variable `$ms-ratio` is set to `$golden`.
+
+<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>
+
+Add your own ratio in Sass by setting a variable and passing that to modular-scale.
+
+```scss
+$my-ratio: 1 / 3.14159265;
+$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.
+
+First, you will need to set your range. A range is a list of ratio and breakpoint values from smallest to largest.
+
+```scss
+$ms-range:
+  1.2 20em,
+  1.3 30em,
+  1.4 40em,
+  1.5 50em,
+  1.6 60em;
+```
+
+Now you can use the `ms-respond` mixin to output a range of values for a single point on a scale.
+
+```scss
+foo {
+  @include ms-respond(font-size, 2);
+}
+```
+
+```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
+
+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/_modular-scale.scss

@@ -2,6 +2,7 @@
 
 $ms-base: 1em !default;
 $ms-ratio: $golden !default;
+$ms-range: null !default;
 
 @import "modular-scale/tests";
 
@@ -9,5 +10,8 @@ $ms-ratio: $golden !default;
 @import "modular-scale/calc";
 @import "modular-scale/generate-list";
 @import "modular-scale/sort-list";
+@import "modular-scale/round-px";
 @import "modular-scale/function";
-@import "modular-scale/function-list";
+@import "modular-scale/function-list";
+
+@import "modular-scale/respond";

data/stylesheets/modular-scale/_function.scss

@@ -1,12 +1,12 @@
 // The main function that brings it all together
 @function ms($Value: 0, $Bases: $ms-base, $Ratios: $ms-ratio) {
-  
+
   // If no multi-base or multi-ratio stuff is going on
   // then just retrn the basic calculaiton
   @if length($Bases) == 1 and length($Ratios) == 1 {
-    @return ms-calc($Value, $Bases, $Ratios);
+    @return ms-round-px(ms-calc($Value, $Bases, $Ratios));
   }
-  
+
   // Do calculations directly in Ruby when avalible
   @if $MS-gem-exists {
 
@@ -17,14 +17,14 @@
       $Base: $Base/$Unit;
       $Unitless-Bases: join($Unitless-Bases, $Base);
     }
-    
+
     // Calculate natively in Ruby
-    @return ms-gem-func($Value, $Unitless-Bases, $Ratios) * $Unit;
+    @return ms-round-px(ms-gem-func($Value, $Unitless-Bases, $Ratios) * $Unit);
   }
-  
+
   // Generate a list of all possible values
   $Return: ms-generate-list($Value, $Bases, $Ratios);
-  
+
   // Sort the generated lists
   $Return: ms-sort-list($Return);
 
@@ -36,17 +36,17 @@
     }
     $Return: $MS-new-return;
   }
-  
+
   // Normalize value for counting from 1
   // Because CSS counts things from 1
   // So Sass does as well
   // So I get to write fun stuff like this
   $Value: abs($Value) + 1;
-  
+
   // Find the correct value in the list
   $Return: nth($Return, $Value);
 
-  @return $Return;
+  @return ms-round-px($Return);
 }
 
 // Same function, different name, for good measure.

data/stylesheets/modular-scale/_respond.scss

@@ -0,0 +1,16 @@
+@mixin ms-respond($property, $value, $range: $ms-range, $base: $ms-base) {
+  @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));
+        }
+      }
+    }
+  }
+}

data/stylesheets/modular-scale/_round-px.scss

@@ -0,0 +1,6 @@
+@function ms-round-px($Result) {
+  @if unit($Result) == 'px' {
+    @return round($Result);
+  }
+  @return $Result;
+}

metadata

@@ -1,11 +1,12 @@
 --- !ruby/object:Gem::Specification
 name: modular-scale
 version: !ruby/object:Gem::Version
-  version: 2.0.5
-  prerelease: 
+  version: 2.0.6
 platform: ruby
 authors:
-- First Last
+- Scott Kellum
+- Mason Wendell
+- Adam Stacoviak
 autorequire: 
 bindir: bin
 cert_chain: []
@@ -14,28 +15,38 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 0.12.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 0.12.0
-description: A generalized Compass extension to build off of
+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:
-- firstlast@extension.com
+- scott@scottkellum.com
+- mason@thecodingdesigner.com
+- adam@stacoviak.com
 executables: []
 extensions: []
-extra_rdoc_files: []
-files:
+extra_rdoc_files:
+- changelog.md
 - 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
@@ -44,35 +55,32 @@ files:
 - stylesheets/modular-scale/_generate-list.scss
 - stylesheets/modular-scale/_pow.scss
 - stylesheets/modular-scale/_ratios.scss
+- stylesheets/modular-scale/_respond.scss
+- stylesheets/modular-scale/_round-px.scss
 - stylesheets/modular-scale/_sort-list.scss
 - stylesheets/modular-scale/_tests.scss
-- stylesheets/modular-scale.zip
-homepage: http://extension.com
+homepage: http://modularscale.com
 licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
-      segments:
-      - 0
-      hash: 2121142932601040971
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: 1.3.6
 requirements: []
-rubyforge_project: modular-scale
-rubygems_version: 1.8.23
+rubyforge_project: 
+rubygems_version: 2.2.2
 signing_key: 
-specification_version: 3
-summary: An easy to use system for writing and managing media queries.
+specification_version: 4
+summary: Modular scale calculator built into your Sass.
 test_files: []