su 1.0.0.alpha.2 → 1.0.0.alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +1 -1
  3. data/README.md +271 -2
  4. data/VERSION +1 -1
  5. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: e11c03f860a343cb0d3a1497d69014a2d587a7b6
4
- data.tar.gz: 3984eeb1e86742682dae4d7db953194236178395
3
+ metadata.gz: 2afa7cdf4df3551621df892b5aa7241dd7189779
4
+ data.tar.gz: b604e60aad509ed0228fe3e1f848fce86d576264
5
5
  SHA512:
6
- metadata.gz: cdeb0e3c86c507fe4938d7c02359f5ea514cb52aeb4a33e549b273b18e579ed86b1c717c5ebae26ee58dbb97463a1a4b37cb7d4057f409e583bcc3cb0e60ca91
7
- data.tar.gz: 53e5530622df31adce3301b135801a115c1bbd1f839b3521d28e1b93c555d1d393527f7707ed5ef4078657080f271b9fc63e5f2c6e9cb4926cf001bb13ee8573
6
+ metadata.gz: cb8211d762d7ae55cd02cec3cd767bec6c94e04c5c22d9dde7ede941927d9b4b22541c9042a688bc8dc768220c0d0b9f99caebdce0342f2e117edad18cbd8bc5
7
+ data.tar.gz: 40655c0cd54d6510e80156981b9c4f43b94c8c177d3e26800f67bdbfbb73aa0b206496a77020f438c4de10ab6cfdb10cc45481fcb27cf56eb7b61f2ad33d72bd
@@ -5,7 +5,7 @@ Su Changelog
5
5
  ----------------
6
6
 
7
7
  - Copy core math files from Susy.
8
- - Rename core math functions and deprecate the old names.
8
+ - Rename core math functions.
9
9
 
10
10
  + `column-count()` => `susy-count()`
11
11
  + `column-sum()` => `susy-sum()`
data/README.md CHANGED
@@ -1,5 +1,274 @@
1
1
  su
2
2
  ==
3
3
 
4
- DIY Grid Engine -
5
- the simplest form of [Susy](http://susy.oddbird.net).
4
+ DIY Sass grid engine.
5
+ We use this engine for [Susy][Susy],
6
+ but you can use it to build any grid system you want.
7
+
8
+ Make up your own,
9
+ or port existing tools like
10
+ [oocss][oocss], [singularity][singularity],
11
+ [zurb][zurb], [neat][neat], [zen][zen],
12
+ [blueprint][blueprint], [960gs][960gs], etc.
13
+
14
+ [Susy]:http://susy.oddbird.net
15
+ [oocss]: http://oocss.org/
16
+ [singularity]: http://singularity.gs/
17
+ [zurb]: http://foundation.zurb.com/
18
+ [neat]: http://neat.bourbon.io/
19
+ [zen]: http://zengrids.com/
20
+ [blueprint]: http://www.blueprintcss.org/
21
+ [960gs]: http://960.gs/
22
+
23
+
24
+ Settings
25
+ --------
26
+
27
+ Su has only two settings:
28
+ `columns` (a number or list of numbers), and
29
+ `gutters` (a number).
30
+
31
+ ```scss
32
+ $symmetrical: (
33
+ columns: 12,
34
+ gutters: 1/4,
35
+ );
36
+
37
+ $asymmetrical: (
38
+ columns: (1 3 4 6 2),
39
+ gutters: .5,
40
+ );
41
+ ```
42
+
43
+ Both `columns` and `gutters` are set
44
+ as unitless numbers,
45
+ but you can think of them as "grid units" —
46
+ as they are all relative to each other.
47
+ `1/4` gutter is a quarter the size of `1` column.
48
+
49
+
50
+ Susy Count
51
+ ----------
52
+
53
+ Find the number of columns in a given layout.
54
+
55
+ - `$columns`: `<number>` | `<list>`
56
+
57
+ This is only necessary for asymetrical grids,
58
+ since symmetrical are already defined by their count,
59
+ but the function handles both styles
60
+ for the sake of flexibility.
61
+
62
+ `<number>`:
63
+ Susy grid layouts are defined by columns.
64
+ In a symmetrical grid
65
+ all the columns are the same relative width,
66
+ so they can be defined by the number of columns.
67
+ We can have an "8-column" grid, or a "12-column" grid.
68
+
69
+ ```scss
70
+ // input
71
+ $count: susy-count(12);
72
+
73
+ // output
74
+ $count: 12;
75
+ ```
76
+
77
+ `<list>`:
78
+ Asymmetrical grids are more complex.
79
+ Since each column can have a different width
80
+ relative to the other columns,
81
+ we need to provide more detail about the columns.
82
+ We can do that with a list of relative (unitless sizes).
83
+ Each number in the list
84
+ represents a number of grid units
85
+ relative to the other numbers.
86
+
87
+ ```scss
88
+ // input
89
+ $count: susy-count(1 2 4 3 1);
90
+
91
+ // output
92
+ $count: 5;
93
+ ```
94
+
95
+ For asymmetrical grids,
96
+ the number of columns is egual to the list length.
97
+ This isn't complex math.
98
+
99
+
100
+ Susy Sum
101
+ --------
102
+
103
+ Find the total sum of column-units in a layout.
104
+
105
+ - `$columns`: `<number>` | `<list>`
106
+ - `$gutters`: `<ratio>`
107
+ - `$spread`: `false`/`narrow` | `wide` | `wider`
108
+
109
+ Rather than counting how many columns there are,
110
+ the `susy-sum` function calculates
111
+ the total number of grid units covered.
112
+ It's a simple matter of adding together all the columns
113
+ as well as the gutters between them.
114
+
115
+ ```scss
116
+ // input
117
+ $susy-sum: susy-sum(7, .5);
118
+
119
+ // output: 7 + (6 * .5) = 10
120
+ $susy-sum: 10;
121
+ ```
122
+
123
+ Most grids have one less gutter than column,
124
+ but that's not always true.
125
+ The `spread` argument allows you to also include
126
+ the gutters on either side.
127
+ While the default `narrow` spread subtracts a gutter,
128
+ the `wide` spread
129
+ (common when using split gutters)
130
+ has an equal number of columns and gutters.
131
+
132
+ ```scss
133
+ // input
134
+ $wide-sum: susy-sum(7, .5, wide);
135
+
136
+ // output: 7 + (7 * .5) = 10.5
137
+ $wide-sum: 10.5;
138
+ ```
139
+
140
+ On rare occasions
141
+ you may actually want gutters on both sides,
142
+ which we call a `wider` spread.
143
+
144
+ ```scss
145
+ // input
146
+ $wider-sum: susy-sum(7, .5, wider);
147
+
148
+ // output: 7 + (8 * .5) = 11
149
+ $wider-sum: 11;
150
+ ```
151
+
152
+ This is all possible with asymmetrical grids as well.
153
+
154
+ ```scss
155
+ // input
156
+ $susy-sum: susy-sum(1 2 4 2, 1/3);
157
+
158
+ // output: (1 + 2 + 4 + 2) + (3 * 1/3) = 10
159
+ $susy-sum: 10;
160
+ ```
161
+
162
+
163
+ Susy Slice
164
+ ----------
165
+
166
+ Return a subset of columns at a given location.
167
+
168
+ - `$span`: `<number>`
169
+ - `$location`: `<number>`
170
+ - `$columns`: `<number>` | `<list>`
171
+
172
+ This is only necessary for asymmetrical grids,
173
+ since a symmetrical subset is always equal to the span,
174
+ but the function handles both styles
175
+ for the sake of flexibility.
176
+
177
+ The `location` is given
178
+ as a column index, starting with 1,
179
+ so that `1` is the first column,
180
+ `2` is the second, and so on.
181
+
182
+ ```scss
183
+ // input
184
+ $sym-slice: susy-slice(3, 2, 7);
185
+ $asym-slice: susy-slice(3, 2, (1 2 3 5 4));
186
+
187
+ // output: 3 columns, starting with the second
188
+ $sym-slice: 3;
189
+ $asym-slice: (2 3 5);
190
+ ```
191
+
192
+ Susy
193
+ ----
194
+
195
+ Find the sum of a column-span.
196
+
197
+ - `$span`: `<number>`
198
+ - `$location`: `<number>`
199
+ - `$columns`: `<number>` | `<list>`
200
+ - `$gutters`: `<ratio>`
201
+ - `$spread`: `false`/`narrow` | `wide` | `wider`
202
+
203
+ This is where it all comes together.
204
+ `susy` is the base version of
205
+ :ref:`span <tools-span-function>` —
206
+ the core building-block for any grid system.
207
+ It combines `susy-span` with `susy-sum`
208
+ to return the (still unitless) width of a given span.
209
+
210
+ ```scss
211
+ // input
212
+ $sym-span: susy(3, 2, 7, .5);
213
+ $asym-span: susy(3, 2, (1 2 3 5 4), .5);
214
+
215
+ // output
216
+ $sym-span: 4;
217
+ $asym-span: 11;
218
+ ```
219
+
220
+
221
+ Is Symmetrical
222
+ --------------
223
+
224
+ Returns `null` if a grid is asymmetrical.
225
+
226
+ - `$columns`: `<number>` | `<list>`
227
+
228
+ It's not a difficult test,
229
+ but it's important to know what you're dealing with.
230
+
231
+ ```scss
232
+ // input
233
+ $sym: is-symmetrical(12);
234
+ $asym: is-symmetrical(2 4 6 3);
235
+
236
+ // output
237
+ $sym: 12;
238
+ $asym: null;
239
+ ```
240
+
241
+
242
+ Build Something New
243
+ -------------------
244
+
245
+ That's really all it takes to build a grid system.
246
+ The rest is just syntax.
247
+ Start with `susy`.
248
+
249
+ ```scss
250
+ $sum: susy(3, 2, 7);
251
+ ```
252
+
253
+ If you want static grids,
254
+ you can multiply the results
255
+ by the width of one column.
256
+
257
+ ```scss
258
+ // static
259
+ $column-width: 4em;
260
+ $static: $sum * $column-width;
261
+ ```
262
+
263
+ For a fluid grid,
264
+ divide the results by the context span sum,
265
+ to get a percentage.
266
+
267
+ ```scss
268
+ // fluid
269
+ $context: susy(7);
270
+ $fluid: percentage($sum / $context);
271
+ ```
272
+
273
+ That's all it takes.
274
+ Now go build yourself a grid system!
data/VERSION CHANGED
@@ -1 +1 @@
1
- 1.0.0.alpha.1
1
+ 1.0.0.alpha.2
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: su
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0.alpha.2
4
+ version: 1.0.0.alpha.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Eric Suzanne