diff --git a/Gemfile.lock b/Gemfile.lock index 911673de..d8e63bb8 100644 --- a/Gemfile.lock +++ b/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) diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 275334af..a6b35b27 100644 --- a/doc-src/Gemfile.lock +++ b/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) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 57215217..97612f75 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/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 diff --git a/doc-src/content/help/tutorials/upgrading/antares.markdown b/doc-src/content/help/tutorials/upgrading/antares.markdown index 08ab46c1..6d9deb7a 100644 --- a/doc-src/content/help/tutorials/upgrading/antares.markdown +++ b/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)) + +## 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/ \ No newline at end of file +[image_stylesheet]: /reference/compass/css3/images/ +[typography_module]: /reference/compass/typography/ \ No newline at end of file diff --git a/doc-src/content/reference/compass/typography.haml b/doc-src/content/reference/compass/typography.haml new file mode 100644 index 00000000..edae96af --- /dev/null +++ b/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. diff --git a/doc-src/content/reference/compass/utilities/links.haml b/doc-src/content/reference/compass/typography/links.haml similarity index 80% rename from doc-src/content/reference/compass/utilities/links.haml rename to doc-src/content/reference/compass/typography/links.haml index f313b231..e5807e46 100644 --- a/doc-src/content/reference/compass/utilities/links.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/links/hover_link.haml b/doc-src/content/reference/compass/typography/links/hover_link.haml similarity index 74% rename from doc-src/content/reference/compass/utilities/links/hover_link.haml rename to doc-src/content/reference/compass/typography/links/hover_link.haml index 74b73599..3971e39b 100644 --- a/doc-src/content/reference/compass/utilities/links/hover_link.haml +++ b/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' diff --git a/doc-src/content/reference/compass/utilities/links/link_colors.haml b/doc-src/content/reference/compass/typography/links/link_colors.haml similarity index 74% rename from doc-src/content/reference/compass/utilities/links/link_colors.haml rename to doc-src/content/reference/compass/typography/links/link_colors.haml index e8f90281..183626b7 100644 --- a/doc-src/content/reference/compass/utilities/links/link_colors.haml +++ b/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' diff --git a/doc-src/content/reference/compass/utilities/links/unstyled_link.haml b/doc-src/content/reference/compass/typography/links/unstyled_link.haml similarity index 79% rename from doc-src/content/reference/compass/utilities/links/unstyled_link.haml rename to doc-src/content/reference/compass/typography/links/unstyled_link.haml index 54a4bcd9..79824d5c 100644 --- a/doc-src/content/reference/compass/utilities/links/unstyled_link.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/lists.haml b/doc-src/content/reference/compass/typography/lists.haml similarity index 76% rename from doc-src/content/reference/compass/utilities/lists.haml rename to doc-src/content/reference/compass/typography/lists.haml index fbe1c735..0d48b807 100644 --- a/doc-src/content/reference/compass/utilities/lists.haml +++ b/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' diff --git a/doc-src/content/reference/compass/utilities/lists/bullets.haml b/doc-src/content/reference/compass/typography/lists/bullets.haml similarity index 73% rename from doc-src/content/reference/compass/utilities/lists/bullets.haml rename to doc-src/content/reference/compass/typography/lists/bullets.haml index 3f9c19fb..9f6e7405 100644 --- a/doc-src/content/reference/compass/utilities/lists/bullets.haml +++ b/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' diff --git a/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml b/doc-src/content/reference/compass/typography/lists/horizontal_list.haml similarity index 90% rename from doc-src/content/reference/compass/utilities/lists/horizontal_list.haml rename to doc-src/content/reference/compass/typography/lists/horizontal_list.haml index 68735199..e4909a03 100644 --- a/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/lists/inline-block-list.haml b/doc-src/content/reference/compass/typography/lists/inline-block-list.haml similarity index 90% rename from doc-src/content/reference/compass/utilities/lists/inline-block-list.haml rename to doc-src/content/reference/compass/typography/lists/inline-block-list.haml index 2ce51b92..c5b8d520 100644 --- a/doc-src/content/reference/compass/utilities/lists/inline-block-list.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/lists/inline_list.haml b/doc-src/content/reference/compass/typography/lists/inline_list.haml similarity index 73% rename from doc-src/content/reference/compass/utilities/lists/inline_list.haml rename to doc-src/content/reference/compass/typography/lists/inline_list.haml index c63e5951..5b0df24f 100644 --- a/doc-src/content/reference/compass/utilities/lists/inline_list.haml +++ b/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' diff --git a/doc-src/content/reference/compass/utilities/text.haml b/doc-src/content/reference/compass/typography/text.haml similarity index 80% rename from doc-src/content/reference/compass/utilities/text.haml rename to doc-src/content/reference/compass/typography/text.haml index 2c8e918d..a2c9c2b4 100644 --- a/doc-src/content/reference/compass/utilities/text.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/text/ellipsis.haml b/doc-src/content/reference/compass/typography/text/ellipsis.haml similarity index 85% rename from doc-src/content/reference/compass/utilities/text/ellipsis.haml rename to doc-src/content/reference/compass/typography/text/ellipsis.haml index 3ce24d74..c55bd53a 100644 --- a/doc-src/content/reference/compass/utilities/text/ellipsis.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/text/nowrap.haml b/doc-src/content/reference/compass/typography/text/nowrap.haml similarity index 82% rename from doc-src/content/reference/compass/utilities/text/nowrap.haml rename to doc-src/content/reference/compass/typography/text/nowrap.haml index ed7be511..e945d99f 100644 --- a/doc-src/content/reference/compass/utilities/text/nowrap.haml +++ b/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 diff --git a/doc-src/content/reference/compass/utilities/text/replacement.haml b/doc-src/content/reference/compass/typography/text/replacement.haml similarity index 73% rename from doc-src/content/reference/compass/utilities/text/replacement.haml rename to doc-src/content/reference/compass/typography/text/replacement.haml index 239e0986..70712a9f 100644 --- a/doc-src/content/reference/compass/utilities/text/replacement.haml +++ b/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' \ No newline at end of file diff --git a/doc-src/content/reference/compass/typography/vertical_rhythm.haml b/doc-src/content/reference/compass/typography/vertical_rhythm.haml new file mode 100644 index 00000000..01a595fa --- /dev/null +++ b/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. diff --git a/examples/compass/src/utilities.scss b/examples/compass/src/utilities.scss index 069c067b..22ae3401 100644 --- a/examples/compass/src/utilities.scss +++ b/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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_typography.scss b/frameworks/blueprint/stylesheets/blueprint/_typography.scss index 173da561..b2bc7be4 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_typography.scss +++ b/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; diff --git a/frameworks/blueprint/stylesheets/blueprint/_utilities.scss b/frameworks/blueprint/stylesheets/blueprint/_utilities.scss index 12b89870..68e2b3de 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_utilities.scss +++ b/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, diff --git a/frameworks/compass/stylesheets/_compass.scss b/frameworks/compass/stylesheets/_compass.scss index c3eeb8ac..9b741c0f 100644 --- a/frameworks/compass/stylesheets/_compass.scss +++ b/frameworks/compass/stylesheets/_compass.scss @@ -1,2 +1,3 @@ @import "compass/utilities"; +@import "compass/typography"; @import "compass/css3"; diff --git a/frameworks/compass/stylesheets/compass/_typography.scss b/frameworks/compass/stylesheets/compass/_typography.scss new file mode 100644 index 00000000..4d9cb5d5 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/_typography.scss @@ -0,0 +1,4 @@ +@import "typography/links"; +@import "typography/lists"; +@import "typography/text"; +@import "typography/vertical_rhythm"; diff --git a/frameworks/compass/stylesheets/compass/_utilities.scss b/frameworks/compass/stylesheets/compass/_utilities.scss index fcb735ca..a67eb35e 100644 --- a/frameworks/compass/stylesheets/compass/_utilities.scss +++ b/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"; diff --git a/frameworks/compass/stylesheets/compass/utilities/_links.scss b/frameworks/compass/stylesheets/compass/typography/_links.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/_links.scss rename to frameworks/compass/stylesheets/compass/typography/_links.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/_lists.scss b/frameworks/compass/stylesheets/compass/typography/_lists.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/_lists.scss rename to frameworks/compass/stylesheets/compass/typography/_lists.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/_text.scss b/frameworks/compass/stylesheets/compass/typography/_text.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/_text.scss rename to frameworks/compass/stylesheets/compass/typography/_text.scss diff --git a/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss b/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss new file mode 100644 index 00000000..af66dcbc --- /dev/null +++ b/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); +} diff --git a/frameworks/compass/stylesheets/compass/utilities/links/_hover-link.scss b/frameworks/compass/stylesheets/compass/typography/links/_hover-link.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/links/_hover-link.scss rename to frameworks/compass/stylesheets/compass/typography/links/_hover-link.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss b/frameworks/compass/stylesheets/compass/typography/links/_link-colors.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss rename to frameworks/compass/stylesheets/compass/typography/links/_link-colors.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/links/_unstyled-link.scss b/frameworks/compass/stylesheets/compass/typography/links/_unstyled-link.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/links/_unstyled-link.scss rename to frameworks/compass/stylesheets/compass/typography/links/_unstyled-link.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss b/frameworks/compass/stylesheets/compass/typography/lists/_bullets.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss rename to frameworks/compass/stylesheets/compass/typography/lists/_bullets.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss b/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss rename to frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss b/frameworks/compass/stylesheets/compass/typography/lists/_inline-block-list.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss rename to frameworks/compass/stylesheets/compass/typography/lists/_inline-block-list.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss b/frameworks/compass/stylesheets/compass/typography/lists/_inline-list.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss rename to frameworks/compass/stylesheets/compass/typography/lists/_inline-list.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss b/frameworks/compass/stylesheets/compass/typography/text/_ellipsis.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss rename to frameworks/compass/stylesheets/compass/typography/text/_ellipsis.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/text/_nowrap.scss b/frameworks/compass/stylesheets/compass/typography/text/_nowrap.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/text/_nowrap.scss rename to frameworks/compass/stylesheets/compass/typography/text/_nowrap.scss diff --git a/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss b/frameworks/compass/stylesheets/compass/typography/text/_replacement.scss similarity index 100% rename from frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss rename to frameworks/compass/stylesheets/compass/typography/text/_replacement.scss diff --git a/frameworks/compass/templates/ellipsis/ellipsis.sass b/frameworks/compass/templates/ellipsis/ellipsis.sass index 6285df65..55837ca9 100644 --- a/frameworks/compass/templates/ellipsis/ellipsis.sass +++ b/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. diff --git a/test/fixtures/stylesheets/compass/css/vertical_rhythm.css b/test/fixtures/stylesheets/compass/css/vertical_rhythm.css new file mode 100644 index 00000000..ddf7c2ec --- /dev/null +++ b/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; } diff --git a/test/fixtures/stylesheets/compass/sass/lists.scss b/test/fixtures/stylesheets/compass/sass/lists.scss index 395e879a..d2ef36f3 100644 --- a/test/fixtures/stylesheets/compass/sass/lists.scss +++ b/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); } diff --git a/test/fixtures/stylesheets/compass/sass/vertical_rhythm.scss b/test/fixtures/stylesheets/compass/sass/vertical_rhythm.scss new file mode 100644 index 00000000..09b6b224 --- /dev/null +++ b/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); } \ No newline at end of file