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

Sign up to get free protection for your applications and to get access to all the features.
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