working on lemonade upgrade guide
This commit is contained in:
parent
428e5b513c
commit
5d2db94bc0
@ -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)
|
||||
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user