You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 29, 2024. It is now read-only.
**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.**
4
4
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:
Copy file name to clipboardExpand all lines: SPEC.md
+63-41Lines changed: 63 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff 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.
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.
10
8
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.
12
10
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.
14
12
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.
17
14
18
15
#### Examples
19
16
@@ -48,7 +45,7 @@ e.
48
45
49
46
> <value><unit>
50
47
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.
52
49
53
50
#### Examples
54
51
@@ -62,34 +59,33 @@ Unit objects are value-unit pairs that indicate a measurement.
62
59
63
60
## Guides
64
61
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.
66
63
67
-
## Gaps
64
+
## Commands
68
65
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.
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.
76
73
77
74
#### Examples
78
75
79
76
- three ten pixel columns
80
77
81
78
`| 10px | 10px | 10px|`
82
79
83
-
84
80
- one half inch column, one inch column, one half inch column
85
81
86
82
`| .5in | 1in | .5in |`
87
83
88
-
### Wildcard gaps
84
+
### Wildcard commands
89
85
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>]]
91
87
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.
93
89
94
90
#### Examples
95
91
@@ -103,19 +99,19 @@ Due to their flexible nature, wildcards can be used to position a grid. When a s
103
99
104
100
### Variables
105
101
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.
107
103
108
104
#### Define
109
105
110
-
> $<id> = <gaps>
106
+
> $[<id>] = <gaps>
111
107
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.
113
109
114
110
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).
115
111
116
112
#### Call
117
113
118
-
> $<id>*<multiplier>
114
+
> $[<id>][*[<multiplier>]]
119
115
120
116
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.
121
117
@@ -137,15 +133,15 @@ a three column grid
137
133
138
134
### Multiples and fills
139
135
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.
141
137
142
138
#### Multiple
143
139
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
145
141
146
142
#### Examples
147
143
148
-
- Two thirds column, one third column
144
+
- Two thirds width column, one third width column
149
145
150
146
`| ~*2 | ~ |`
151
147
@@ -158,7 +154,7 @@ A multiple is represented by an asterisk `*` followed by a number. The gap will
158
154
159
155
#### Fill
160
156
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.
162
158
163
159
- A sixteen pixel baseline grid
164
160
@@ -170,7 +166,7 @@ A fill is represented by a asterisk `*` folowed by nothing and is a gap that wil
170
166
171
167
## Grid Options
172
168
173
-
> (<modifiers>, <adjustments>)
169
+
> ([<modifiers>][, <adjustments>])
174
170
175
171
Optional values to modify how the grid is created. They are wrapped in parens and broken into two sections separated by a comma.
176
172
@@ -191,19 +187,19 @@ Determines the orientation of the guides in the grid.
191
187
192
188
### Remainder pixel distribution
193
189
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.
195
191
196
192
#### Values:
197
193
198
-
-`f`*(default)* first (left/top)
194
+
-`f` first (left/top)
199
195
200
196
-`c` center
201
197
202
-
-`l` last (right/bottom)
198
+
-`l`*(default)*last (right/bottom)
203
199
204
200
### Calculation
205
201
206
-
Determines whether GuideGuide is strict about integers when calculating pixels
202
+
Determines whether Parser is strict about integers when calculating pixels.
207
203
208
204
#### Values:
209
205
@@ -213,11 +209,11 @@ Determines whether GuideGuide is strict about integers when calculating pixels
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).
219
215
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.
221
217
222
218
#### Examples:
223
219
@@ -241,15 +237,15 @@ Position works similarly to how CSS works. Think of the `~` as "auto". To define
241
237
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).
242
238
243
239
-`(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.
245
241
246
242
-`(v, ~|100px|)`
247
243
A right aligned, one hundred pixel wide grid.
248
244
249
245
-`(v, ~|100px|~)`
250
246
A centered, one hundred pixel wide grid.
251
247
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.
253
249
254
250
#### Examples:
255
251
@@ -258,10 +254,36 @@ For width to be specified, it **must** have a pipe on either side. If only one p
258
254
259
255
## Errors
260
256
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.
262
258
263
259
```
264
260
| 10px | { 10foo [1]} | 10px|
265
-
266
-
# 1. Unrecognized unit type
267
261
```
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.
0 commit comments