Add divshot

This commit is contained in:
Rico Sta. Cruz 2015-09-17 15:22:13 +08:00
parent 9e1c058685
commit c08aff3289
4 changed files with 141 additions and 56 deletions

View File

@ -0,0 +1,56 @@
---
title: Compass sprites
---
### Compass: Sprites
@import compass/utilities/sprites
$sprites: sprite-map('sprites/*.png')
$sprites: sprite-map('sprites/*.png', $spacing: 20px)
@mixin sprite($name)
background-image: sprite-url($sprite)
+sprite-dimensions($sprite, $name)
width: image-width(sprite-file($sprite, $name)
height: image-height(sprite-file($sprite, $name)
+sprite-background-position($sprite, $name[, $offset-x, $offset-y])
background-position: sprite-position($sprite, $name)
nth(sprite-position($sprite, $name), 1) # X position
nth(sprite-position($sprite, $name), 2) # Y position
### Compass: Sprites (the @import way)
// Sprite sets (applies to icon/*.png)
$icon-spacing: 0
$icon-dimensions: true
$icon-repeat: no-repeat
$icon-position: 0
// Individual (applies to icon/mail.png)
$icon-mail-spacing: 0
@import 'icon/*.png'
@include all-icon-sprites
// Usage
.image1
@extend .icon-mail
.image2
@extend .icon-refresh;
// ### Advanced control
// The sprite map is available as $icon-sprites. You can then use
// `sprite()` on it.
.image3
background: sprite($icon-sprites, refresh)
//background: url(...) 0 -16px;
.image3-with-offset
background: sprite($icon-sprites, refresh, -2px, -9px)
//background: url(...) -2px -19px;

64
divshot.md Normal file
View File

@ -0,0 +1,64 @@
---
title: Divshot
---
### Install divshot-cli
```
$ npm install -g divshot-cli
$ divshot login
```
### Create `divshot.json`
Only `root` is mandatory.
```json
{
"name": "yourapp",
"root": "./app"
}
```
### Push your app
```
$ divshot config:add name your-app-name-here
$ divshot push
```
## Configuration
See [configuration reference](https://docs.divshot.com/guides/configuration) and [routing guide](https://docs.divshot.com/guides/routing).
```json
{
"name": "yourapp",
"root": "./app",
"clean_urls": true,
"clean_urls": ["/app/**", "/!components/**"],,
"error_page": "error.html",
"exclude": [ "Gruntfile.js" ],
"cache_control": {},
"routes": {
"/*.html": "index.html",
"/app/**/*.html": "app.html",
"**": "index.html"
},
"redirects": {
"/old/:segment/path": "/new/path/:segment",
"/some/old/path": {
"status": 302,
"url": "/some/new/path"
}
},
"headers": {
"/cors-stuff/**": {
"Access-Control-Allow-Origin": "*"
},
"/scripts/**": {
"content-type": "text/javascript"
}
}
}
```

8
git.md
View File

@ -113,7 +113,13 @@ Misc
### Quicker
git bisect start HEAD HEAD~10 -- # culprit is among the last test
git bisect start
git bisect bad # mark commit as bad
git checkout HEAD~10
git bisect good # mark commit as good
git bisect reset # stop
git bisect start HEAD HEAD~10 # same as bad HEAD, good HEAD~10
git bisect run make
git bisect reset

69
sass.md
View File

@ -36,64 +36,23 @@ layout: default
http://sass-lang.com/documentation/Sass/Script/Functions.html
### Compass: Sprites
@import compass/utilities/sprites
$sprites: sprite-map('sprites/*.png')
$sprites: sprite-map('sprites/*.png', $spacing: 20px)
@mixin sprite($name)
background-image: sprite-url($sprite)
+sprite-dimensions($sprite, $name)
width: image-width(sprite-file($sprite, $name)
height: image-height(sprite-file($sprite, $name)
+sprite-background-position($sprite, $name[, $offset-x, $offset-y])
background-position: sprite-position($sprite, $name)
nth(sprite-position($sprite, $name), 1) # X position
nth(sprite-position($sprite, $name), 2) # Y position
### Compass: Sprites (the @import way)
// Sprite sets (applies to icon/*.png)
$icon-spacing: 0
$icon-dimensions: true
$icon-repeat: no-repeat
$icon-position: 0
// Individual (applies to icon/mail.png)
$icon-mail-spacing: 0
@import 'icon/*.png'
@include all-icon-sprites
// Usage
.image1
@extend .icon-mail
.image2
@extend .icon-refresh;
// ### Advanced control
// The sprite map is available as $icon-sprites. You can then use
// `sprite()` on it.
.image3
background: sprite($icon-sprites, refresh)
//background: url(...) 0 -16px;
.image3-with-offset
background: sprite($icon-sprites, refresh, -2px, -9px)
//background: url(...) -2px -19px;
### Loopo
### Loops
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
## Interpolation
.#{$lol} { ... }
## Lists
$list: (a b c);
nth($list, 1) // starts with 1
length($list)
@each $item in $list { ... }