responsive-modular-scale 0.0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b9580e13763bfd9ef6dfb3d6614f68bd801e5e4e
+  data.tar.gz: 54191333e16cd744b26bb8a2479fbc7b83ee03d2
+SHA512:
+  metadata.gz: e4d6b8ec261667e636fb9ff5f1180310bc7a6b515eaec4cf964a5dfa0758e681c89f5d95210c244424556c909d116816250b722f2e4ecabe82fa5566a57deab4
+  data.tar.gz: c06466c275cdd4744a2b679ebcf303d9ce40525afcc78675896cd3f3f9438d2551adefac8782e8953fbe3f7b1fc1bf04e342e70897ea4d8cfb3dcae1efdeca89

data/lib/responsive-modular-scale.rb

@@ -0,0 +1,10 @@
+require 'compass'
+require 'modular-scale'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('responsive-modular-scale', :path => extension_path)
+
+module ResponsiveModularScale
+  VERSION = "0.0.1.1"
+  DATE = "2013-12-28"
+end

data/license.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Geoff Kimball
+
+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/readme.md

@@ -0,0 +1,54 @@
+# Responsive Modular Scale
+
+## Overview
+
+This is a responsive extension of the Sass team's [modular-scale](https://github.com/Team-Sass/modular-scale) add-on. A modular typographic scale gives you a set of predefined values to use in your design, based on one or more base sizes and one or more intervals. You can learn more about modular scale typography on [A List Apart](http://www.alistapart.com/articles/more-meaningful-typography/), and quickly make a modular scale using [Tim Brown](http://twitter.com/nicewebtype)'s [modular scale tool](http://modularscale.com/).
+
+Modular scales are great, but type has a tendency to get a little too big on smaller screens. What responsive-modular-scale allows you to do is quickly create multiple scales for different screen sizes. By changing the intervals used, but not the base sizes, we can compress the scale for smaller screens and expand it out for bigger screens. For example, a default scale could use a 1.333:1 ratio (a perfect fourth), and on screens 768px (everyone's favorite breakpoint) and up, the scale changes to use a 1.5:1 ratio (a perfect fifth) instead. Our base value stays the same, but the gaps between values in the scale widen, increasing the size of the type to a more appropriate size.
+
+## Installation
+
+    gem install responsive-modular-scale
+
+Add `require 'responsive-modular-scale'` to your Compass project's config file.
+
+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.
+
+```scss
+// Change just the base values, not the intervals
+@include set-scales(16px 100px);
+
+// Use a fourth by default, and a fifth for larger screens
+@include set-scales(16px, fourth(), 768px fifth());
+
+// Use a fourth by default, an augmented fourth for medium screens, and a fifth for large screens
+@include set-scales(16px, fourth(), 640px augmented-fourth(), 1024px fifth());
+```
+
+Now we just have to call the modular scale function.
+
+```scss
+h1 {
+  @include rms(6);
+}
+h2 {
+  @include rms(5);
+}
+p {
+  @include rms(0); // 0 is our base value
+}
+```
+
+## 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
+- 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); }`

data/stylesheets/_responsive-modular-scale.scss

@@ -0,0 +1,3 @@
+@import 'modular-scale';
+@import 'responsive-modular-scale/helpers';
+@import 'responsive-modular-scale/functions';

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

@@ -0,0 +1,65 @@
+$rms-base: 16px;
+$rms-intervals: (0px fourth()), (768px fifth());
+
+/*
+  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:
+
+  $base, $interval1, $interval2, ...
+
+  @param  (number or list) $base: one or more pixel values to use as the base of the modular scale. These don't change between breakpoints.
+  @param  (list) $interval: A list containing a pixel value (representing a min-width breakpoint) followed by an interval (an integer or one of modular-scale's predefined ratios).
+*/
+@mixin set-scales($args...) {
+  // If no arguments were given
+  @if length($args) == 0 {
+    @warn 'No base values or intervals were set, so the default values will be used.';
+  }
+  // If at least one argument was given
+  @else {
+    // The first argument should be one or more pixel values
+    $rms-base: nth($args, 1);
+
+    // If more than one argument was given
+    @if length($args) > 1 {
+      // Remove the default breakpoints and intervals
+      $rms-intervals: ();
+
+      @for $i from 2 through length($args) {
+        // If a list item only has one value, assume it's an interval and set the breakpoint to 0px
+        @if length(nth($args, $i)) == 1 {
+          $rms-intervals: append($rms-intervals, 0px nth($args, $i));
+        }
+        // Otherwise copy the list as-is
+        @else {
+          $rms-intervals: append($rms-intervals, nth($args, $i));
+        }
+      }
+    }
+    // If only one argument was given
+    @else {
+      @warn 'No intervals were set, so the default values will be used.';
+    }
+  }
+}
+
+/*
+  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) {
+  @each $interval in $rms-intervals {
+    $scale-breakpoint: nth($interval, 1);
+    $scale-interval:   nth($interval, 2);
+    $output: ms($n, $rms-base, $scale-interval);
+
+    @if $scale-breakpoint == 0px {
+      font-size: $output;
+    }
+    @else {
+      @media screen and (min-width: $scale-breakpoint) {
+        font-size: $output;
+      }
+    }
+  }
+}

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

@@ -0,0 +1 @@
+// emCalc will go here, and perhaps also a function to adjust an em value using a different base value.

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: responsive-modular-scale
+version: !ruby/object:Gem::Version
+  version: 0.0.1.1
+platform: ruby
+authors:
+- Geoff Kimball
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-12-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: modular-scale
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.6
+description: Responsive enhancements for the Sass modular scale.
+email: gakimball@bsu.edu
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/responsive-modular-scale.rb
+- readme.md
+- license.md
+- stylesheets/_responsive-modular-scale.scss
+- stylesheets/responsive-modular-scale/_functions.scss
+- stylesheets/responsive-modular-scale/_helpers.scss
+homepage: http://github.com/gakimball/responsive-modular-scale
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Responsive enhancements for the Sass modular scale.
+test_files: []