From edd278cb2d60f69e59d7c77ae4ee349c0698caa7 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 25 Apr 2010 22:39:15 -0700 Subject: [PATCH] More docs on the compass utilities. --- .../compass/utilities/general/min.haml | 2 +- .../compass/utilities/general/tag_cloud.haml | 6 ++-- .../reference/compass/utilities/links.haml | 3 +- .../compass/utilities/links/hover_link.haml | 5 ++-- .../compass/utilities/links/link_colors.haml | 5 ++-- .../utilities/links/unstyled_link.haml | 3 +- .../reference/compass/utilities/print.haml | 13 +++++++-- .../reference/compass/utilities/sprites.haml | 5 ++-- .../compass/utilities/sprites/sprite_img.haml | 19 ++++++++++-- .../stylesheets/compass/utilities/_print.scss | 29 +++++++++---------- .../compass/utilities/links/_link-colors.scss | 18 ++++++++---- .../utilities/sprites/_sprite-img.scss | 28 +++++++++--------- 12 files changed, 82 insertions(+), 54 deletions(-) diff --git a/doc-src/content/reference/compass/utilities/general/min.haml b/doc-src/content/reference/compass/utilities/general/min.haml index bd813489..38ed3dfd 100644 --- a/doc-src/content/reference/compass/utilities/general/min.haml +++ b/doc-src/content/reference/compass/utilities/general/min.haml @@ -13,4 +13,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Cross browser implementation of min-height and min-width. diff --git a/doc-src/content/reference/compass/utilities/general/tag_cloud.haml b/doc-src/content/reference/compass/utilities/general/tag_cloud.haml index 483cbf2d..362da72c 100644 --- a/doc-src/content/reference/compass/utilities/general/tag_cloud.haml +++ b/doc-src/content/reference/compass/utilities/general/tag_cloud.haml @@ -1,5 +1,5 @@ --- -title: Compass Tag_cloud +title: Compass Tag Cloud crumb: Tag Cloud framework: compass stylesheet: compass/utilities/general/_tag-cloud.scss @@ -11,6 +11,4 @@ classnames: - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/doc-src/content/reference/compass/utilities/links.haml b/doc-src/content/reference/compass/utilities/links.haml index 2a962353..0c6aacc6 100644 --- a/doc-src/content/reference/compass/utilities/links.haml +++ b/doc-src/content/reference/compass/utilities/links.haml @@ -5,6 +5,7 @@ framework: compass stylesheet: compass/utilities/_links.scss layout: core nav_stylesheet: compass/_utilities.scss +meta_description: Tools for styling anchor links. classnames: - reference - core @@ -12,4 +13,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Tools for styling anchor links. diff --git a/doc-src/content/reference/compass/utilities/links/hover_link.haml b/doc-src/content/reference/compass/utilities/links/hover_link.haml index 347d2b3b..bb8cbeef 100644 --- a/doc-src/content/reference/compass/utilities/links/hover_link.haml +++ b/doc-src/content/reference/compass/utilities/links/hover_link.haml @@ -4,12 +4,11 @@ crumb: Hover Link framework: compass stylesheet: compass/utilities/links/_hover-link.scss layout: core +meta_description: Underline a link when you hover over it. nav_stylesheet: compass/_utilities.scss classnames: - reference - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/doc-src/content/reference/compass/utilities/links/link_colors.haml b/doc-src/content/reference/compass/utilities/links/link_colors.haml index 5a1c2311..e7742277 100644 --- a/doc-src/content/reference/compass/utilities/links/link_colors.haml +++ b/doc-src/content/reference/compass/utilities/links/link_colors.haml @@ -4,12 +4,11 @@ crumb: Link Colors framework: compass stylesheet: compass/utilities/links/_link-colors.scss layout: core +meta_description: Easy assignment of colors to link states. nav_stylesheet: compass/_utilities.scss classnames: - reference - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/doc-src/content/reference/compass/utilities/links/unstyled_link.haml b/doc-src/content/reference/compass/utilities/links/unstyled_link.haml index a8269eef..4e223326 100644 --- a/doc-src/content/reference/compass/utilities/links/unstyled_link.haml +++ b/doc-src/content/reference/compass/utilities/links/unstyled_link.haml @@ -4,6 +4,7 @@ crumb: Unstyled Link framework: compass stylesheet: compass/utilities/links/_unstyled-link.scss layout: core +meta_description: Make a link appear like regular text. nav_stylesheet: compass/_utilities.scss classnames: - reference @@ -12,4 +13,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Makes a link appear like regular text. diff --git a/doc-src/content/reference/compass/utilities/print.haml b/doc-src/content/reference/compass/utilities/print.haml index ee84045b..13afd20e 100644 --- a/doc-src/content/reference/compass/utilities/print.haml +++ b/doc-src/content/reference/compass/utilities/print.haml @@ -4,6 +4,7 @@ crumb: Print framework: compass stylesheet: compass/utilities/_print.scss layout: core +meta_description: Control what elements gets printed. nav_stylesheet: compass/_utilities.scss classnames: - reference @@ -11,5 +12,13 @@ classnames: - utilities --- - render 'reference' do - %p - Lorem ipsum dolor sit amet. + :markdown + Control what gets printed. Apply the `no-print` (or `noprint`) class to any + elements that should be hidden when printing. Apply the `print-only` class + to those elements which should only appear in your printed pages. + + The tricky part about `print-only` is getting the display right when you turn + an element back on in the case where both styles are applied. This mixin + uses the `elements-of-type` function to make sure that elements have the correct + display value according to the element type. + diff --git a/doc-src/content/reference/compass/utilities/sprites.haml b/doc-src/content/reference/compass/utilities/sprites.haml index b9346cc2..416cd6e1 100644 --- a/doc-src/content/reference/compass/utilities/sprites.haml +++ b/doc-src/content/reference/compass/utilities/sprites.haml @@ -10,6 +10,5 @@ classnames: - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' + \ No newline at end of file diff --git a/doc-src/content/reference/compass/utilities/sprites/sprite_img.haml b/doc-src/content/reference/compass/utilities/sprites/sprite_img.haml index 2eb18203..af7ba3cb 100644 --- a/doc-src/content/reference/compass/utilities/sprites/sprite_img.haml +++ b/doc-src/content/reference/compass/utilities/sprites/sprite_img.haml @@ -11,5 +11,20 @@ classnames: - utilities --- - render 'reference' do - %p - Lorem ipsum dolor sit amet. + :markdown + **Example 1** Simple mixins: + + a.twitter + +sprite-img("icons-32.png", 1) + a.facebook + +sprite-img("icons-32png", 2) + + **Example 2** Sharing a common base: + + a + +sprite-background("icons-32.png") + a.twitter + +sprite-column(1) + a.facebook + +sprite-row(2) + \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/utilities/_print.scss b/frameworks/compass/stylesheets/compass/utilities/_print.scss index 6c099439..4771e080 100644 --- a/frameworks/compass/stylesheets/compass/utilities/_print.scss +++ b/frameworks/compass/stylesheets/compass/utilities/_print.scss @@ -1,18 +1,17 @@ // Classes that are useful for controlling what gets printed. -// You must mix +print-utilities into your print stylesheet -// and +print-utilities("screen") into your screen stylesheet. +// You must mix `+print-utilities` into your print stylesheet +// and `+print-utilities(screen)` into your screen stylesheet. // Note: these aren't semantic. @mixin print-utilities($media: print) { - @if $media == "print" { - .noprint, - .no-print { - display: none; } - #{elements-of-type("block")} { - &.print-only { - display: block; } } - #{elements-of-type("inline")} { - &.print-only { - display: inline; } } } - @else { - .print-only { - display: none; } } } + @if $media == print { + .noprint, .no-print { display: none; } + #{elements-of-type(block)} { + &.print-only { display: block; } + } + #{elements-of-type(inline)} { + &.print-only { display: inline; } + } + } @else { + .print-only { display: none; } + } +} diff --git a/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss b/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss index 2861cbe5..5d641f78 100644 --- a/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss +++ b/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss @@ -1,10 +1,16 @@ -// Set all the colors for a link with one mixin call +// Set all the colors for a link with one mixin call. // Order of arguments is: -// normal, hover, active, visited, focus -// states not specified will inherit. -// Mixin like so: -// a -// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) +// +// 1. normal +// 2. hover +// 3. active +// 4. visited +// 5. focus +// +// Those states not specified will inherit. +// Mixin to an anchor link like so: +// a +// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) { color: $normal; diff --git a/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss b/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss index f003ec75..b14536be 100644 --- a/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss +++ b/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss @@ -1,18 +1,20 @@ -//** +// @doc off // Example 1: -// a.twitter -// +sprite-img("icons-32.png", 1) -// a.facebook -// +sprite-img("icons-32png", 2) -// ... +// +// a.twitter +// +sprite-img("icons-32.png", 1) +// a.facebook +// +sprite-img("icons-32png", 2) +// // Example 2: -// a -// +sprite-background("icons-32.png") -// a.twitter -// +sprite-column(1) -// a.facebook -// +sprite-row(2) -// ... +// +// a +// +sprite-background("icons-32.png") +// a.twitter +// +sprite-column(1) +// a.facebook +// +sprite-row(2) +// @doc on $sprite-default-size: 32px !default;