github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More docs on the compass utilities.

Browse Source
This commit is contained in:
Chris Eppstein 2010-04-25 22:39:15 -07:00
parent 2475ac03e4
commit edd278cb2d
12 changed files with 82 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/content/reference/compass/utilities/general/min.haml
View File

@ -13,4 +13,4 @@ classnames:
---
- render 'reference' do
%p
Lorem ipsum dolor sit amet.
Cross browser implementation of min-height and min-width.

6
doc-src/content/reference/compass/utilities/general/tag_cloud.haml
View File

@ -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'

3
doc-src/content/reference/compass/utilities/links.haml
View File

@ -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.

5
doc-src/content/reference/compass/utilities/links/hover_link.haml
View File

@ -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'

5
doc-src/content/reference/compass/utilities/links/link_colors.haml
View File

@ -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'

3
doc-src/content/reference/compass/utilities/links/unstyled_link.haml
View File

@ -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.

13
doc-src/content/reference/compass/utilities/print.haml
View File

@ -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.

5
doc-src/content/reference/compass/utilities/sprites.haml
View File

@ -10,6 +10,5 @@ classnames:
- core
- utilities
---
- render 'reference' do
%p
Lorem ipsum dolor sit amet.
= render 'reference'

19
doc-src/content/reference/compass/utilities/sprites/sprite_img.haml
View File

@ -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)

29
frameworks/compass/stylesheets/compass/utilities/_print.scss
View File

@ -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; }
}
}

18
frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss
View File

@ -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;

28
frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss
View File

@ -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;