added vertical-rhythm and docs, moved lists, links and text, all into new typography module

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    compass (0.11.beta.1.0fd9c08)
+    compass (0.11.beta.2.0dc38bc)
       chunky_png (~> 0.12.0)
       sass (>= 3.1.0.alpha.218)
 

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: ..
   specs:
-    compass (0.11.beta.2.303453d)
+    compass (0.11.beta.2.0dc38bc)
       chunky_png (~> 0.12.0)
       sass (>= 3.1.0.alpha.218)
 

doc-src/content/CHANGELOG.markdown

@@ -1063,6 +1063,6 @@ Almost definitely. Please let me know if you encounter any problems and I'll get
 [der-rich]: http://github.com/der-rich
 [adamstac]: http://github.com/adamstac
 [ttilley]: http://github.com/ttilley
-[inline-block-list]: http://compass-style.org/reference/compass/utilities/lists/inline-block-list/
+[inline-block-list]: http://compass-style.org/reference/compass/typography/lists/inline-block-list/
 [html5-reset]: http://compass-style.org/reference/compass/reset/utilities/#mixin-reset-html5
 [blueprint_10_change]: https://github.com/chriseppstein/compass/compare/a05e1ee7c0a1e4c0f0595a8bb812daa47872e476...864780969d872a93b1fd3b4f39f29dd9f0c3fe75

doc-src/content/help/tutorials/upgrading/antares.markdown

@@ -76,6 +76,22 @@ Or for sass files:
     =linear-gradient($color-stops, $start: top, $image: false)
       +background-image($image, linear-gradient($start, $color-stops))
 
+<a name="typography"></a>
+## Typography Module
+
+With the addition of vertical-rhythms to the compass core, we have created a new
+[typography module][typography_module], and moved several items that were formerly
+listed as "utilities" into it. The moved modules are "links", "lists" and "text".
+These will all remain part of the basic compass include, but if you were including 
+them individually in your stylesheets, you will need to adjust the include paths
+as follows:
+
+* "compass/utilities/links" becomes "compass/typography/links"
+* "compass/utilities/lists" becomes "compass/typography/lists"
+* "compass/utilities/text" becomes "compass/typography/text"
+
+
 [new_transform]: /reference/compass/css3/transform/
 [old_transform]: /reference/compass/css3/transform-legacy/
 [image_stylesheet]: /reference/compass/css3/images/
+[typography_module]: /reference/compass/typography/

doc-src/content/reference/compass/typography.haml

@@ -0,0 +1,18 @@
+--- 
+title: Compass Typography
+crumb: Typography
+framework: compass
+sidebar: true
+stylesheet: compass/_typography.scss
+classnames:
+  - reference
+  - core
+  - typography
+meta_description: Provides basic mixins for common typography patterns.
+layout: core
+nav_stylesheet: compass/_typography.scss
+---
+- render 'reference' do
+  %p
+    The Compass Typography module provides some basic mixins
+    for common text styling patterns.

doc-src/content/reference/compass/typography/links.haml

@@ -2,14 +2,14 @@
 title: Compass Links
 crumb: Links
 framework: compass
-stylesheet: compass/utilities/_links.scss
+stylesheet: compass/typography/_links.scss
 sidebar: true
 layout: core
 meta_description: Tools for styling anchor links.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   %p

doc-src/content/reference/compass/typography/links/hover_link.haml

@@ -2,12 +2,12 @@
 title: Compass Hover Link
 crumb: Hover Link
 framework: compass
-stylesheet: compass/utilities/links/_hover-link.scss
+stylesheet: compass/typography/links/_hover-link.scss
 layout: core
 meta_description: Underline a link when you hover over it.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/links/link_colors.haml

@@ -2,12 +2,12 @@
 title: Compass Link Colors
 crumb: Link Colors
 framework: compass
-stylesheet: compass/utilities/links/_link-colors.scss
+stylesheet: compass/typography/links/_link-colors.scss
 layout: core
 meta_description: Easy assignment of colors to link states.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/links/unstyled_link.haml

@@ -2,13 +2,13 @@
 title: Compass Unstyled Link
 crumb: Unstyled Link
 framework: compass
-stylesheet: compass/utilities/links/_unstyled-link.scss
+stylesheet: compass/typography/links/_unstyled-link.scss
 layout: core
 meta_description: Make a link appear like regular text.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   %p

doc-src/content/reference/compass/typography/lists.haml

@@ -2,13 +2,13 @@
 title: Compass Lists
 crumb: Lists
 framework: compass
-stylesheet: compass/utilities/_lists.scss
+stylesheet: compass/typography/_lists.scss
 sidebar: true
 layout: core
 meta_description: Tools for styling lists.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/lists/bullets.haml

@@ -2,12 +2,12 @@
 title: Compass Bullets
 crumb: Bullets
 framework: compass
-stylesheet: compass/utilities/lists/_bullets.scss
+stylesheet: compass/typography/lists/_bullets.scss
 layout: core
 meta_description: Mixins for managing list bullets.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/lists/horizontal_list.haml

@@ -2,13 +2,13 @@
 title: Compass Horizontal List
 crumb: Horizontal List
 framework: compass
-stylesheet: compass/utilities/lists/_horizontal-list.scss
+stylesheet: compass/typography/lists/_horizontal-list.scss
 layout: core
 meta_description: Float a list so it appears horizontally.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   :markdown

doc-src/content/reference/compass/typography/lists/inline-block-list.haml

@@ -2,13 +2,13 @@
 title: Compass Inline-Block List
 crumb: Inline-Block List
 framework: compass
-stylesheet: compass/utilities/lists/_inline-block-list.scss
+stylesheet: compass/typography/lists/_inline-block-list.scss
 layout: core
 meta_description: set list-elements to inline-block so they appear horizontally while retaining their structure.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   :markdown

doc-src/content/reference/compass/typography/lists/inline_list.haml

@@ -2,12 +2,12 @@
 title: Compass Inline List
 crumb: Inline List
 framework: compass
-stylesheet: compass/utilities/lists/_inline-list.scss
+stylesheet: compass/typography/lists/_inline-list.scss
 layout: core
 meta_description: Style a list as inline text.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/text.haml

@@ -2,14 +2,14 @@
 title: Compass Text
 crumb: Text
 framework: compass
-stylesheet: compass/utilities/_text.scss
+stylesheet: compass/typography/_text.scss
 layout: core
 sidebar: true
 meta_description: Style helpers for your text.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   %p

doc-src/content/reference/compass/typography/text/ellipsis.haml

@@ -2,13 +2,13 @@
 title: Truncating Text with Ellipses
 crumb: Ellipsis
 framework: compass
-stylesheet: compass/utilities/text/_ellipsis.scss
+stylesheet: compass/typography/text/_ellipsis.scss
 layout: core
 meta_description: Text truncation with ellipsis.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   :markdown

doc-src/content/reference/compass/typography/text/nowrap.haml

@@ -2,13 +2,13 @@
 title: Compass No Wrap
 crumb: No Wrap
 framework: compass
-stylesheet: compass/utilities/text/_nowrap.scss
+stylesheet: compass/typography/text/_nowrap.scss
 layout: core
 meta_description: Remembering whether or not there's a hyphen in white-space is too hard.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 - render 'reference' do
   %p

doc-src/content/reference/compass/typography/text/replacement.haml

@@ -2,12 +2,12 @@
 title: Compass Text Replacement
 crumb: Text Replacement
 framework: compass
-stylesheet: compass/utilities/text/_replacement.scss
+stylesheet: compass/typography/text/_replacement.scss
 layout: core
 meta_description: Replace text with images.
 classnames:
   - reference
   - core
-  - utilities
+  - typography
 ---
 = render 'reference'

doc-src/content/reference/compass/typography/vertical_rhythm.haml

@@ -0,0 +1,20 @@
+--- 
+title: Vertical Rhythm
+crumb: Vertical Rhythm
+framework: compass
+stylesheet: compass/typography/_vertical_rhythm.scss
+layout: core
+meta_description: Create and maintain a vertical rhythm for your type.
+classnames:
+  - reference
+  - core
+  - typography
+---
+- render 'reference' do
+  :markdown
+    Create a vertical rhythm for your site by setting the `$base-font-size` and 
+    `$base-line-height` variables and then including the `establish-baseline` 
+    mixin at the root of your document.
+    
+    Manage the vertical rhythm using the other vertical-rhythm mixins to adjust
+    font and line-height values, extra vertical whitespace, borders, etc.

examples/compass/src/utilities.scss

@@ -3,7 +3,7 @@
 @import "yui/modules/base";
 @import "blueprint/grid";
 @import "blueprint/scaffolding";
-@import "compass/utilities/text/ellipsis";
+@import "compass/typography/text/ellipsis";
 
 html {
   @include yui-base; }

frameworks/blueprint/stylesheets/blueprint/_typography.scss

@@ -1,5 +1,5 @@
 @import "colors";
-@import "compass/utilities/links/link-colors";
+@import "compass/typography/links/link-colors";
 @import "compass/utilities/general/float";
 
 $blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default;

frameworks/blueprint/stylesheets/blueprint/_utilities.scss

@@ -1,4 +1,4 @@
-@import "compass/utilities/text/nowrap";
+@import "compass/typography/text/nowrap";
 @import "compass/utilities/general/clearfix";
 
 // Most of these utility classes are not "semantic". If you use them,

frameworks/compass/stylesheets/_compass.scss

@@ -1,2 +1,3 @@
 @import "compass/utilities";
+@import "compass/typography";
 @import "compass/css3";

frameworks/compass/stylesheets/compass/_typography.scss

@@ -0,0 +1,4 @@
+@import "typography/links";
+@import "typography/lists";
+@import "typography/text";
+@import "typography/vertical_rhythm";

frameworks/compass/stylesheets/compass/_utilities.scss

@@ -1,6 +1,3 @@
 @import "utilities/general";
-@import "utilities/links";
-@import "utilities/lists";
 @import "utilities/sprites";
 @import "utilities/tables";
-@import "utilities/text";

frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss

@@ -0,0 +1,124 @@
+// The base font size
+$base-font-size: 16px !default;
+
+// The base line height is the basic unit of line hightness.
+$base-line-height: 24px !default;
+
+// set the default border style for rhythm borders
+$default-rhythm-border-style: solid !default;
+
+// The IE font ratio is a fact of life. Deal with it.
+$ie-font-ratio: 16px / 100%;
+
+// The basic unit of font rhythm
+$base-rhythm-unit: $base-line-height / $base-font-size * 1em;
+
+// The leader is the amount of whitespace in a line.
+// It might be useful in your calculations
+$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size;
+
+// The half-leader is the amount of whitespace above and below a line.
+// It might be useful in your calculations
+$base-half-leader: $base-leader / 2;
+
+// Establishes a font baseline for the given font-size in pixels
+@mixin establish-baseline($font-size: $base-font-size) {
+  body {
+    font-size: $font-size / $ie-font-ratio;
+    @include adjust-leading-to(1, $font-size); 
+  }
+  html>body {
+    font-size: $font-size; 
+  } 
+}
+
+// Show a background image that can be used to debug your alignments.
+@mixin debug-vertical-alignment($img: 'underline.png') {
+  background: url($img); 
+}
+
+// Adjust a block to have a different font size and leading to maintain the rhythm.
+// $lines is a number that is how many times the baseline rhythm this
+// font size should use up. Does not have to be an integer, but it defaults
+// to the smallest integer that is large enough to fit the font.
+// Use $from_size to adjust from a non-base font-size.
+@mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
+  font-size: 1em * $to-size / $from-size;
+  @include adjust-leading-to($lines, $to-size); 
+}
+
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+  line-height: 1em * $lines * $base-line-height / $font-size; 
+}
+
+// Apply leading whitespace
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-top: 1em * $lines * $base-line-height / $font-size; 
+}
+
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, padding); 
+}
+
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, margin); 
+}
+
+// Apply trailing whitespace
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; 
+}
+
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, padding); 
+}
+
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, margin); 
+}
+
+// Whitespace application shortcut
+// Apply top margin/padding + bottom padding/margin
+@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
+  @include leader($leader, $font-size);
+  @include padding-leader($padding-leader, $font-size);
+  @include padding-trailer($padding-trailer, $font-size);
+  @include trailer($trailer, $font-size);
+}
+
+// Apply a border width to any side without destroying the vertical rhythm
+@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border-#{$side}: {
+    style: $border-style;
+    width: 1em * $width / $font-size; 
+  };
+  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
+
+// Aplly rhythm borders equally to all sides
+@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  border: {
+    style: $border-style;
+    width: 1em * $width / $font-size; };
+  padding: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
+
+// Apply a leading rhythm border
+@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); 
+}
+
+// Apply a trailing rhythm border
+@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); 
+}
+
+// Apply both leading and trailing rhythm borders
+@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include leading-border($width, $lines, $font-size, $border-style);
+  @include trailing-border($width, $lines, $font-size, $border-style); 
+}
+
+@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include horizontal-borders($width, $lines, $font-size, $border-style); 
+}

frameworks/compass/templates/ellipsis/ellipsis.sass

@@ -1,7 +1,7 @@
 // Since you've installed the xml file, you should set
 // $use-mozilla-ellipsis-binding to true before importing.
 $use-mozilla-ellipsis-binding: true
-@import compass/utilities/text/ellipsis
+@import compass/typography/text/ellipsis
 
 // You can delete this sass file if you want, it's just an example of how to use the ellipsis mixin.
 // By default, ellipsis text is no-wrap. Pass false as the first argument if you don't want that.

test/fixtures/stylesheets/compass/css/vertical_rhythm.css

@@ -0,0 +1,42 @@
+body {
+  font-size: 87.5%;
+  line-height: 1.143em; }
+
+html > body {
+  font-size: 14px; }
+
+.small {
+  font-size: 0.857em;
+  line-height: 1.333em; }
+
+.padded {
+  margin-top: 1.143em;
+  padding-top: 1.143em;
+  padding-bottom: 1.143em;
+  margin-bottom: 1.143em; }
+
+.small-padded {
+  font-size: 0.857em;
+  line-height: 1.333em;
+  margin-top: 1.333em;
+  padding-top: 1.333em;
+  padding-bottom: 1.333em;
+  margin-bottom: 1.333em; }
+
+.borders {
+  border-top-style: solid;
+  border-top-width: 0.071em;
+  padding-top: 1.071em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.071em;
+  padding-bottom: 1.071em; }
+
+.large-borders {
+  font-size: 1.714em;
+  line-height: 2em;
+  border-top-style: solid;
+  border-top-width: 0.25em;
+  padding-top: 0.417em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.25em;
+  padding-bottom: 0.417em; }

test/fixtures/stylesheets/compass/sass/lists.scss

@@ -1,4 +1,4 @@
-@import "compass/utilities/lists";
+@import "compass/typography/lists";
 
 ul.horizontal        { @include horizontal-list;             }
 ul.wide-horizontal   { @include horizontal-list(10px);       }

test/fixtures/stylesheets/compass/sass/vertical_rhythm.scss

@@ -0,0 +1,14 @@
+@import "compass/typography/vertical_rhythm";
+
+$base-font-size: 14px;
+$base-line-height: 16px;
+
+@include establish-baseline;
+
+.small { @include adjust-font-size-to(12px,1); }
+
+.padded { @include rhythm(1,1,1,1); }
+.small-padded { @include adjust-font-size-to(12px,1); @include rhythm(1,1,1,1,12px); }
+
+.borders { @include h-borders(1px,1); }
+.large-borders { @include adjust-font-size-to(24px,3); @include h-borders(6px,1,24px); }