Skip to content
This repository was archived by the owner on Oct 29, 2024. It is now read-only.

Commit 3f32b8d

Browse files
committed
Merge pull request #3 from guideguide/1.0
First effort
2 parents 0d6c3f9 + f442f28 commit 3f32b8d

File tree

13 files changed

+2865
-43
lines changed

13 files changed

+2865
-43
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
11
# Grid notation
22

3-
**This repository is a work in progress. The contents likely will not work yet.**
3+
**This repository is a work in progress and is not yet documented.**
44

5-
Grid notation is a way to “write” grids. For more information, see the [spec](SPEC.md).
5+
After a few years of using GuideGuide, I became frustrated that I couldn't move beyond simple grid structures. What if I wanted a sidebar? What if I wanted to reposition the grid in the document? Grid notation is a human friendly(ish), written grid language. A string goes in, an array of guides comes out.
6+
7+
For more information, see the [spec](SPEC.md).
8+
9+
### Setup
10+
11+
```
12+
npm install
13+
```
14+
15+
### Development
16+
17+
Grid notation's tests use [Mocha](http://visionmedia.github.io/mocha/). To run the test watcher, run the following in the terminal:
18+
19+
```
20+
script/test
21+
```
22+
23+
### Compile
24+
25+
```
26+
script/compile
27+
```

SPEC.md

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
# GuideGuide Notation
2-
3-
GuideGuide’s grid form is a great tool, but it is somewhat limited in what it can do. To give you more flexibility with your grids, GuideGuide includes a feature called GuideGuide Notation, a special language that allows you to give instructions to GuideGuide, telling it where you would like to put guides within your document or selection.
1+
# Grid notation
42

53
## Grids
64

7-
> <commands> ( <options>, <first offset> | <width> | <last offset> )
5+
> <commands> [( [<options>][, <first offset> | <width> | <last offset> ])]
86
9-
A grid is a collection of guides and gaps across a single dimentional plane. GuideGuide will split the string into an array of guides and gaps and iterate through them, following them like instructions. Starting at 0, for each gap, GuideGuide will advance its insertion point by the value of the gap. When GuideGuide encounters a guide, it will place a guide at the current location of the insertion point. This will continue until all guides and gaps have been parsed.
7+
A grid is a collection of commands across a single dimensional plane. The parser will split the string into an array of guide and gaps commands and iterate through them, following them like instructions. Starting at 0, for each gap, the parser will advance its insertion point by the value of the gap. When the parser encounters a guide command, it will place a guide at the current location of the insertion point. This will continue until all guides and gaps have been parsed.
108

11-
GuideGuide takes into acount the size of the document or selection when calculating percentages, wildcards, and fills.
9+
The parser takes into account the size of the document or selection when calculating percentages, wildcards, and fills.
1210

13-
Each guide or gap must be separated by a space character. Newlines are used to define multiple grids in one string.
11+
Each command must be separated by a space character. Newlines are used to define multiple grids in one string.
1412

15-
It is possible to change the way GuideGuide renders the grid by specifiying options at the end of the grid, within parentheses. A width for the grid can be specified, as well as an offset to start rendering the grid. Whitespace in the options are is ignored.
16-
e.
13+
It is possible to change the way the parser renders the grid by specifying options at the end of the grid, within parentheses. A width for the grid can be specified, as well as left and right offsets to position the grid. Whitespace in the options are is ignored.
1714

1815
#### Examples
1916

@@ -48,7 +45,7 @@ e.
4845

4946
> <value><unit>
5047
51-
Unit objects are value-unit pairs that indicate a measurement.
48+
Unit objects are value-unit pairs that indicate a measurement. The unit is required.
5249

5350
#### Examples
5451

@@ -62,34 +59,33 @@ Unit objects are value-unit pairs that indicate a measurement.
6259

6360
## Guides
6461

65-
Guides are represented by a pipe `|`. These tell GuideGuide to place a guide at the current insertion point.
62+
Guides are represented by a pipe `|`. These tell the parser to place a guide at the current insertion point.
6663

67-
## Gaps
64+
## Commands
6865

69-
Gaps are unit objects or variables combined with multipliers to define spaces between gaps.
66+
Commands are unit objects or variables combined with multipliers to define spaces between guides.
7067

71-
### Arbitrary gaps
68+
### Explicit commands
7269

73-
> <value><unit>*<multiplier>
70+
> <value><unit>[*[<multiplier>]]
7471
75-
An arbitrary gap is represented by a Unit Object and an optional multiplier. Arbitrary gaps are the width of the unit specified. Arbitrary can be positive or negative. Due to this, it is possible to traverse backwards and forwards.
72+
An explicit command is represented by a Unit Object and an optional multiplier. Explicit commands are the width of the unit specified. Explicit can be positive or negative. Due to this, it is possible to traverse backwards and forwards.
7673

7774
#### Examples
7875

7976
- three ten pixel columns
8077

8178
`| 10px | 10px | 10px|`
8279

83-
8480
- one half inch column, one inch column, one half inch column
8581

8682
`| .5in | 1in | .5in |`
8783

88-
### Wildcard gaps
84+
### Wildcard commands
8985

90-
A wildcard gap is represented by a tilde `~`. Any area within a grid that remains after all of the arbitrary gaps have been calculated will be evenly distributed amongst the wildcards present in a grid.
86+
> ~[*[<multiplier>]]
9187
92-
Due to their flexible nature, wildcards can be used to position a grid. When a single wildcard is placed to the left of a GGN string, it will force the grid to render on the right side. Similarly, a GGN string with wildcards on either end will be centered.
88+
A wildcard command is represented by a tilde `~`. Any area within a grid that remains after all of the explicit commands have been calculated will be evenly distributed amongst the wildcards present in a grid.
9389

9490
#### Examples
9591

@@ -103,19 +99,19 @@ Due to their flexible nature, wildcards can be used to position a grid. When a s
10399

104100
### Variables
105101

106-
Variables allow you to define and reuse collections of gaps within a grid. Variables are composed of a definition and a call.
102+
Variables allow you to define and reuse collections of guides and commands within a grid. Variables are composed of two parts: a definition and a call.
107103

108104
#### Define
109105

110-
> $<id> = <gaps>
106+
> $[<id>] = <gaps>
111107
112-
A variable definition is represented by a dollar sign `$`, an optional id, an equals sign, and then a collection of gaps and guides separated by spaces.
108+
A variable definition is represented by a dollar sign `$`, an optional id, an equals sign, and then a collection of commands and guides separated by spaces.
113109

114110
While it is possible to define a variable that contains no guides, this won't often be useful as the results of the variable will not be visible (since it contains no guides).
115111

116112
#### Call
117113

118-
> $<id>*<multiplier>
114+
> $[<id>][*[<multiplier>]]
119115
120116
A variable call is represented by a dollar sign `$`, an optional id, and an optional multiplier. Anywhere a variable call occurs GuideGuide will replace its contents with the contents of its variable definition. A variable must be defined before it is called.
121117

@@ -137,15 +133,15 @@ a three column grid
137133

138134
### Multiples and fills
139135

140-
Arbitray, wildcard, and variable gaps can accept a final modifier that will duplicate that gap the number of times specified. These are most helpful when used with variables, as it is possible to specify both gaps and guide together. Multiples and fills can be specified on gaps, but since the result of the mutiplied gap is not visible, their usefulness is rare.
136+
Explicit, wildcard, and variable commands can accept a final modifier that will duplicate that command the number of times specified. These are most helpful when used with variables, as it is possible to specify both commands and guide together. Multiples and fills can be specified on non-guide commands, but since the result of the multiplied command is not visible, their usefulness is rare.
141137

142138
#### Multiple
143139

144-
A multiple is represented by an asterisk `*` followed by a number. The gap will be recreated sequentially the number of times specified by the multiple
140+
A multiple is represented by an asterisk `*` followed by a number. The command will be recreated sequentially the number of times specified by the multiple
145141

146142
#### Examples
147143

148-
- Two thirds column, one third column
144+
- Two thirds width column, one third width column
149145

150146
`| ~*2 | ~ |`
151147

@@ -158,7 +154,7 @@ A multiple is represented by an asterisk `*` followed by a number. The gap will
158154

159155
#### Fill
160156

161-
A fill is represented by a asterisk `*` folowed by nothing and is a gap that will be recreated squentially until it fills the remaining space in the grid. This is useful for cases such as creating a baseline grid, or filling a space with as many columns and gutters of a certain width as will fit.
157+
A fill is represented by a asterisk `*` followed by nothing and is a gap that will be recreated sequentially until it fills the remaining space in the grid. This is useful for cases such as creating a baseline grid, or filling a space with as many columns and gutters of a certain width as will fit.
162158

163159
- A sixteen pixel baseline grid
164160

@@ -170,7 +166,7 @@ A fill is represented by a asterisk `*` folowed by nothing and is a gap that wil
170166

171167
## Grid Options
172168

173-
> (<modifiers>, <adjustments>)
169+
> ([<modifiers>][, <adjustments>])
174170
175171
Optional values to modify how the grid is created. They are wrapped in parens and broken into two sections separated by a comma.
176172

@@ -191,19 +187,19 @@ Determines the orientation of the guides in the grid.
191187

192188
### Remainder pixel distribution
193189

194-
Determines to which wildcards GuideGuide adds remainder pixels when the columns do not divide equally into the total width of the grid area.
190+
Determines to which wildcards the parser adds remainder pixels when the columns do not divide equally into the total width of the grid area. This setting is only used when "pixel" calculation is specified.
195191

196192
#### Values:
197193

198-
- `f`*(default)* first (left/top)
194+
- `f` first (left/top)
199195

200196
- `c` center
201197

202-
- `l` last (right/bottom)
198+
- `l` *(default)* last (right/bottom)
203199

204200
### Calculation
205201

206-
Determines whether GuideGuide is strict about integers when calculating pixels
202+
Determines whether Parser is strict about integers when calculating pixels.
207203

208204
#### Values:
209205

@@ -213,11 +209,11 @@ Determines whether GuideGuide is strict about integers when calculating pixels
213209

214210
### Grid adjust
215211

216-
> <left offset> | <width> | <right offset>
212+
> [<left offset>][ | <width> | ][ <right offset>]
217213
218-
A string similar to Grid notation that specifies the left and right offsets and width of the grid, separated by pipes (which represent the edges of the grid).
214+
A string similar to grid notation that specifies the left and right offsets and width of the grid, separated by pipes (which represent the edges of the grid).
219215

220-
Width is defined by enclosing a unit object in pipes. The tilde `~` can be used similarly to the way wildcards are used.
216+
Width is defined by enclosing a unit object in pipes. The tilde `~` is used similarly to the way wildcards are used.
221217

222218
#### Examples:
223219

@@ -241,15 +237,15 @@ Position works similarly to how CSS works. Think of the `~` as "auto". To define
241237
A one hundred pixel wide grid, twenty pixels from the left side (the right offset is ignored if a left and right offset is specified with a defined width).
242238

243239
- `(v, 20px|~|20px)`
244-
A grid with a width that is 40px less than the width of the document, with 20px space on either side.
240+
A grid with a (automaticlly calculated) width that is 40px less than the width of the document, with 20px space on either side.
245241

246242
- `(v, ~|100px|)`
247243
A right aligned, one hundred pixel wide grid.
248244

249245
- `(v, ~|100px|~)`
250246
A centered, one hundred pixel wide grid.
251247

252-
For width to be specified, it **must** have a pipe on either side. If only one pipe between two values is specified, the values will be treated as left and right offsets. If a third pipe exists, it and anything after it is ignored.
248+
For width to be specified, it **must** have a pipe on either side. If only one pipe between two values is specified, the values will be treated as left and right offsets.
253249

254250
#### Examples:
255251

@@ -258,10 +254,36 @@ For width to be specified, it **must** have a pipe on either side. If only one p
258254

259255
## Errors
260256

261-
GuideGuide String Notation errors will be denoted in curly brackets. Directly following a bracketed error will be a set of brackets containing a comma separated list of error IDs. Explanation of the errors will be printed below the grid.
257+
When cleaning a guide notation string, errors will be denoted in curly brackets. Directly following a bracketed error will be a set of brackets containing a comma separated list of error IDs.
262258

263259
```
264260
| 10px | { 10foo [1]} | 10px|
265-
266-
# 1. Unrecognized unit type
267261
```
262+
263+
### Possible errors
264+
265+
These scenarios will invalidate guide notation
266+
267+
##### Error: 1 — Unrecognized command
268+
269+
The parser does not understand the given command, or no unit was specified.
270+
271+
##### Error: 2 — No grids
272+
273+
A guide notation string must contain at least one grid.
274+
275+
##### Error: 3 — Wildcards cannot be fills
276+
277+
Because wildcards have no width of their own, trying to use them as a fill is dividing by zero.
278+
279+
#### Error: 4 — Grids can only contain one fill
280+
281+
Because fills are used to fill up all available space, it isn't possible to have more than one fill.
282+
283+
##### Error: 5 — Variables cannot contain fills
284+
285+
Because variables are intended for using multiple times, placing a fill in a variable would result in multiple fills. Technically this *should* be valid if the variable is only used once, however the logic to support this isn't worth supporting a case that technically shouldn't be used.
286+
287+
##### Error: 6 — A variable must be defined
288+
289+
If a variable has not been defined at the time it is called, it cannot be used.

bower.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "grid-notation",
3+
"homepage": "https://github.com/guideguide/grid-notation",
4+
"authors": [
5+
"Cameron McEfee <cm@cameronmcefee.com>"
6+
],
7+
"description": "A human friendly(ish), written grid language",
8+
"main": "grid-notation.js",
9+
"keywords": [
10+
"guides",
11+
"grids",
12+
"guideguide"
13+
],
14+
"license": "MIT",
15+
"private": true,
16+
"ignore": [
17+
"**/.*",
18+
"node_modules",
19+
"bower_components",
20+
"test",
21+
"src",
22+
"script",
23+
"SPEC.md"
24+
]
25+
}

0 commit comments

Comments
 (0)