responsive-modular-scale 0.0.2 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 53625c090d053687acf569a597b57929a04f87ee
-  data.tar.gz: c57454695830bbcd495d9888c3894b65d7b0f5d4
+  metadata.gz: d1c78cae29c20c0a9fccff36cfab14c74eca1367
+  data.tar.gz: 82f6e8c4000a7b84130b0b9b94f66e5c12e5ea0d
 SHA512:
-  metadata.gz: 40d1ee9a8e16c0bc9f1dea096949100c94a19ab019f297844856651f5c6db4423d170b14d49076094d7968b3c43976c91ab3f01643474979e1aaa3c63c426aec
-  data.tar.gz: e94b10d5104000b98cff3af39800ad52482a509da1be63bc9ba567ef85afffc1a9300c76027caec7de6064941714c86fcf502576f52a6825f0c9ddb1bc4561eb
+  metadata.gz: fcb789eb314ee3272b27d203fd73d4ca35166e6b3e69b62f7e3723c65ae484452ad216e0a1f12d07e41cac0438c89763d1258e5937e9e656c91c1ec2a4676252
+  data.tar.gz: 9d5b7f9dc4dd525b1421a1b9f24b843d3d02febbe925bc36b1f1b109405756ac6a8245bee45660485817b08c6ed101ee1fb974437ba1d56c4952b1b2927bc7cc

data/lib/responsive-modular-scale.rb

@@ -5,6 +5,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('responsive-modular-scale', :path => extension_path)
 
 module ResponsiveModularScale
-  VERSION = "0.0.2"
-  DATE = "2013-12-29"
+  VERSION = "0.1.0"
+  DATE = "2014-01-02"
 end

data/readme.md

@@ -16,10 +16,12 @@ Then import it into your stylesheet like so: `@import 'responsive-modular-scale'
 
 ## Usage
 
-To create a scale we need one or more base values and one or more intervals. By default, the scale will use a 16px base value and two intervals: 1.333:1 (a fourth) by default, and 1.5:1 (a fifth) at 768px and above. You can change these values by calling `set-scales()` at the top of your stylesheet.
+### Setting scales
+
+To create a set of scales we need one or more base values and one or more intervals. By default, the scale will use a 16px base value and two intervals: 1.333:1 (a fourth) by default, and 1.5:1 (a fifth) at 768px and above. You can change these values by calling `set-scales()` at the top of your stylesheet.
 
 ```scss
-// Change just the base values, not the intervals
+// Change just the base values, keep the default scales
 @include set-scales(16px 100px);
 
 // Use a fourth by default, and a fifth for larger screens
@@ -29,7 +31,15 @@ To create a scale we need one or more base values and one or more intervals. By
 @include set-scales(16px, fourth(), 640px augmented-fourth(), 1024px fifth());
 ```
 
-Now we just have to call the modular scale function.
+The base values should always be pixel values, but the breakpoints can be pixel- or em-based. By default, responsive-modular-scale will output all breakpoints and font-size values as em values, but you can change to pixels if you'd like.
+
+```scss
+// You can call this before or after set-scales()
+@include use-pixels;
+
+### Using the scales
+
+Font sizes are set the same way they are in modular-scale: just pass in a number representing a position on the modular scale.
 
 ```scss
 h1 {
@@ -43,12 +53,51 @@ p {
 }
 ```
 
+Each call to `rms()` will generate one font-size declaration for each breakpoint/scale pair you've set.
+
+### Working with ems
+
+If you're outputting em-based values (the default) and want to adjust your base font size from the usual 16px, you'll need to let responsive-modular-scale know.
+
+```scss
+@include set-base(18px);
+```
+
+This mixin doesn't output any CSS, it just changes the way ems are calculated internally.
+
+If `rms()` is called on a container element, calls made on elements inside that container will not be the right size, due to the compounding nature of ems.
+
+```scss
+@include set-scales(16px, third(), 768px fourth());
+
+.container {
+  @include rms(1); // 20px, or 1.25em
+
+  .child {
+    @include rms(1); // 1.25em * 1.25em = 1.56em, or 25px
+  }
+}
+
+To correct this behavior, `rms()` includes an optional second parameter which will adjust the base font size used in em calculation. The value of the second parameter is the position on the modular scale that should be used as a base.
+
+```scss
+.container {
+  @include rms(1); // 1em is now 1.25em for descendant elements
+
+  .child {
+    // By passing in a different base the resulting em value will be adjusted down
+    // The font sizes for .container and .child will visually be the same, despite having different em values
+    @include rms(1, 1);
+  }
+}
+
+Currently the mixin will only correct one level deep.
+
 ## Things to change
 
 I'm no typography expert, so if you have any suggestions or comments, let me know! In the mean time here are things that need to be added or fixed:
 
-- Better support for multiple ratios: they'll only work if passed in as `1000px (fourth() fifth())`
-- Switch to em-based font sizes and breakpoints
-    - Add the ability to correct an em value if the base font size has changed
+- Better support for multiple ratios in a single scale: they'll only work if passed in as `1000px (fourth() fifth())`
 - Allow the value of `$n` to be changed at breakpoints, to allow for finer control over font sizes
     - Expample: `@include set-scales(16px, 1.5, 768px 2); h1 { @include rms(5, 6); }`
+- Ability to correct em values at more than one level deep

data/stylesheets/responsive-modular-scale/_functions.scss

@@ -1,5 +1,6 @@
 $rms-base: 16px;
 $rms-intervals: (0px fourth()), (768px fifth());
+$rms-usepixels: false;
 
 /*
   Sets user-defined values for the modular scale, which replace the default values defined above. The function accepts any number of arguments which should take the form:
@@ -42,18 +43,75 @@ $rms-intervals: (0px fourth()), (768px fifth());
   }
 }
 
+/*
+  Outputs the values of each scale to the console using modular-scale's modular-scale-list() mixin. The range of values to be returned can be specified; otherwise, 20 values starting from the base value will be returned.
+
+  @param  (number) $start: index on the scale to start at (0 is the base value).
+  @param  (number) $end: index on the scale to end at.
+*/
+@mixin list-scales($start: 0, $end: 20) {
+  @each $scale in $rms-intervals {
+    $scale-breakpoint: nth($scale, 1);
+    $scale-interval:   nth($scale, 2);
+
+    @if $scale-breakpoint == 0px {
+      @debug 'Default --';
+    }
+    @else {
+      @debug 'Min-width: #{$scale-breakpoint} --';
+    }
+
+    @include modular-scale-list($start, $end, $rms-base, $scale-interval);
+  }
+}
+
+/*
+  Use pixel values for breakpoints and font sizes.
+
+  @param  (boolean) $true: if true, the system will use pixels; otherwise, ems.
+*/
+@mixin use-pixels($true: true) {
+  $rms-usepixels: $true;
+}
+
+/*
+  Change the base font size from the default of 16px, for use by the to-em() function.
+
+  @param  (number) $number: pixel value to change to.
+*/
+@mixin set-base($number) {
+  $rms-basefont: $number;
+}
+
 /*
   Iterates through the list of breakpoints and intervals, outputting multiple font-size declarations for each breakpoint.
 
   @param  (number) $n: position on the modular scale to use.
 */
-@mixin rms($n: 0) {
+@mixin rms($n: 0, $base: false) {
+  // Output one font-size defenition for each defined breakpoint
   @each $interval in $rms-intervals {
+    // Pull the breakpoint and interval from the list and generate the final font size
     $scale-breakpoint: nth($interval, 1);
     $scale-interval:   nth($interval, 2);
     $output: ms($n, $rms-base, $scale-interval);
 
-    @if $scale-breakpoint == 0px {
+    // Convert the px values to em unless otherwise specified
+    @if $rms-usepixels == false {
+      $scale-breakpoint: to-em($scale-breakpoint);
+      $output:           to-em($output);
+
+      // If a different base has been passed in, adjust the output font size to compensate
+      @if $base != false {
+        // The base value is the em value derived from the px value at position $base on the scale
+        $base-value: to-em(ms($base, $rms-base, $scale-interval));
+        // The adjusted value is the original value divided by the base value
+        $output: $output / $base-value * 1em;
+      }
+    }
+
+    // Don't insert a 0px/em media query, just output the value
+    @if strip-units($scale-breakpoint) == 0 {
       font-size: $output;
     }
     @else {

data/stylesheets/responsive-modular-scale/_helpers.scss

@@ -1 +1,27 @@
-// emCalc will go here, and perhaps also a function to adjust an em value using a different base value.
+$rms-basefont: 16px;
+
+/*
+  Take a pixel value and convert it to an em value, using a base font size for reference.
+
+  @param  (number) $px: pixel value to convert.
+  @param  (number) $base: base font size to use in calculation.
+  @return (number) calculated em value
+*/
+@function to-em($px, $base: $rms-basefont) {
+  // If a non-pixel value was passed in, just hand it back
+  // Should probably tweak this behavior
+  @if unit($px) != 'px' {
+    @return $px;
+  }
+  @return ($px / $base) * 1em;
+}
+
+/*
+  Strip the units off a number.
+
+  @param  (number) $number: number with unit to convert.
+  @return (number) Input number without units.
+*/
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: responsive-modular-scale
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.1.0
 platform: ruby
 authors:
 - Geoff Kimball
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-29 00:00:00.000000000 Z
+date: 2014-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: modular-scale