Skip to content

Commit

Permalink
streamline readme a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
phloe committed Dec 12, 2013
1 parent 3edcb88 commit 694ba4f
Show file tree
Hide file tree
Showing 10 changed files with 67 additions and 49 deletions.
14 changes: 7 additions & 7 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,26 @@ module.exports = function(grunt) {
// Configuration to be run (and then tested).
"svg-sprites": {
options: {
spriteElementPath: "test/sprite-elements",
spritePath: "tmp/sprites",
spriteElementPath: "test/img",
spritePath: "tmp/img/sprites",
cssPath: "tmp/css"
},
shapes: {
options: {
prefix: "test",
sizes: {
small: 15,
//medium: 30,
large: 45
small: 13,
//medium: 26,
large: 39
},
refSize: 30,
refSize: 26,
unit: 5
}
},
"black-shapes": {
options: {
sizes: {
medium: 20
medium: 26
},
refSize: "medium",
unit: 40
Expand Down
64 changes: 41 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,32 +37,35 @@ grunt.initConfig({
##### options.spriteElementPath
Type: `String`

The base path of the elements to be sprited. If set on the uppermost options property the target name will automatically be appended to the path:
The base path of the elements to be sprited.

```javascript
If set in the target options it will overwrite the global options.

If set on the uppermost options property the target name will automatically be appended to the path:

```js
options: {
spriteElementPath: "img/_source/spriteElements"
/* */
spriteElementPath: "img",
// more options
},
icons: {
/* */
shapes: {
// more options
}
```

Will result in: `img/_source/spriteElements` + `/` + `icons`.
Will result in: `img/shapes`.

... and a file structure like:

```
_source
|- sprites
|- icons
|- print.svg
|- email.svg
|- link.svg
img
|- shapes
|- circle.svg
|- square.svg
|- triangle.svg
```

... you would get the resulting sprite for `icons`.
... you would get the resulting sprite for `shapes`.

##### options.spritePath
Type: `String`
Expand All @@ -71,20 +74,32 @@ Destination path of the generated sprite images.

##### options.cssPath
Type: `String`
Optional

Optional. Destination path of the generated stylesheet. If left blank only svg sprites and png fallbacks are generated.
Destination path of the generated stylesheet. If left blank only svg sprites and png fallbacks are generated.

#### options.prefix
Type: `String`
Default value: `''`
Optional

Defines a prefix for the name of the sprite stylesheet and images and also classnames.

```js
shapes: {
prefix: "test",
// more options
}
```

Optional. Defines a prefix for the name of the sprite stylesheet and images and also classnames.
Would result in: `test-shapes-sprite.css`, `test-shapes-sprite.svg` and `test-shapes-large-sprite.png`.

#### options.cssSuffix
Type: `String`
Default value: `'css'`
Optional

Optional. Stylesheet filetype suffix.
Stylesheet filetype suffix.

#### options.unit
Type: `Number`
Expand All @@ -99,12 +114,14 @@ Defines the basic height of your source svg-elements. All other sizes will be ca

![Source elements and refSize](https://raw.github.com/drdk/dr-grunt-svg-sprites/master/docs/img/docs-source-elements.png)

Notice how one source element is bigger than the `refSize`; this ok - as every element is scaled proportionally.

#### options.sizes
Type: `Object`

A hash of size labels and values (`Number`) that define the different sizes of the needed sprites.

```javascript
```js
sizes: {
large: 39,
small: 13
Expand All @@ -113,6 +130,8 @@ A hash of size labels and values (`Number`) that define the different sizes of t

![sizes](https://raw.github.com/drdk/dr-grunt-svg-sprites/master/docs/img/docs-sprite-sizes.png)

Only 1 SVG sprite is rendered and 1 PNG sprite per defined size.

### Usage Examples

#### Basic Options
Expand All @@ -121,23 +140,22 @@ A hash of size labels and values (`Number`) that define the different sizes of t
grunt.initConfig({
"svg-sprites": {
options: {
spriteElementPath: "img/svg-logos"
spriteElementPath: "img"
spritePath: "img/sprites",
cssPath: "css"
},
shapes: {
options: {
sizes: {
large: 39,
medium: 26,
small: 13
},
refSize: "medium",
unit: 8
refSize: 26,
unit: 13
}
}
}
})
});
```


Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions test/img/black-shapes/square.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/sprite-elements/shapes/circle.svg → test/img/shapes/circle.svg
100755 → 100644
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions test/img/shapes/square.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/sprite-elements/shapes/triangle.svg → test/img/shapes/triangle.svg
100755 → 100644
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 0 additions & 7 deletions test/sprite-elements/black-shapes/square.svg

This file was deleted.

7 changes: 0 additions & 7 deletions test/sprite-elements/shapes/square.svg

This file was deleted.

0 comments on commit 694ba4f

Please sign in to comment.