working on lemonade upgrade guide

This commit is contained in:
Scott Davis 2011-04-02 10:07:55 -04:00
parent 428e5b513c
commit 5d2db94bc0
3 changed files with 53 additions and 3 deletions

View File

@ -7,7 +7,7 @@ GIT
PATH
remote: .
specs:
compass (0.11.beta.5.7ffde70)
compass (0.11.beta.5.428e5b5)
chunky_png (~> 1.1.0)
sass (>= 3.1.0.alpha.249)

View File

@ -8,7 +8,7 @@ GIT
PATH
remote: ..
specs:
compass (0.11.beta.5.96f1e4d)
compass (0.11.beta.5.428e5b5)
chunky_png (~> 1.1.0)
sass (>= 3.1.0.alpha.249)
@ -23,7 +23,7 @@ GEM
cri (1.0.1)
css-slideshow (0.2.0)
compass (>= 0.10.0.rc3)
css_parser (1.1.5)
css_parser (1.1.9)
fssm (0.1.2)
haml (3.1.0.alpha.147)
i18n (0.4.2)

View File

@ -0,0 +1,50 @@
---
title: Lemonade Upgrade Guide
layout: tutorial
crumb: Lemonade Upgrade
classnames:
- tutorial
---
# Lemonade Upgrade Guide
## Example 1
### Lemonade
.logo {
background: sprite-image("lemonade/lemonade-logo.png");
}
.lime {
background: sprite-image("lemonade/lime.png");
}
.coffee {
background: sprite-image("other-drinks/coffee.png") no-repeat;
}
### Compass
@import "lemonade/*.png";
@import "other-drinks/*.png"
@include all-lemonade-sprites;
@include all-other-drinks-sprites;
Compass will return class names `.lemonade-logo`, `.lemonade-lime`, `.other-drinks-coffee`
# Example 2
### Lemonade
.lemonade-example-1 {
background: sprite-image("lemonade/example-1/blue-10x10.png", 10px, 2px);
}
### Compass
With compass you need to flatten the image directory to be `images/lemonade` instead of `images/lemonade/example-1`
@import "lemonade/*.png"
.lemonade-example-1 {
@include lemonade-sprite(blue-10x10, true, 10px, 2px);
background-color: yellow;
}