-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
469 lines (420 loc) · 17.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
tachyons flex
</title>
<meta name="author" content="@elussich">
<meta name="description" content="CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tachyons.io/css/tachyons.min.css">
<link rel="stylesheet" type="text/css" href="tachyons-flex.css">
</head>
<body class="w-100 sans-serif">
<header class="bg-dark-gray white pbl">
<div class="bb b--mid-gray phm phl-ns pvl">
<h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
<h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
<span class="thin white-40">/</span>
<h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#layout">Layout</a></h3>
<span class="thin white-40">/</span>
<h4 class="f4 mvn semibold dib">Flex</h4>
</div>
<div class="phm phl-ns pvm">
<p class="measure f3 lh-copy">
Flex Box Layouts could easily be achieved by mixing & matching flex-related properties,
stablishing a behavioral relationship between the flex container, and its inner flex items.
</p>
<p class="measure f4 lh-copy">
While flex box layout implementations are limitless, there are still some regularly common
use cases from where to start. The classes enlisted here should provide enough flexibility
to tackle down most of those scenarios, while keeping a simple and clear nomenclature.
</p>
</div>
</header>
<main class="">
<!-- Examples -->
<div class="phm phl-ns ptl pbxl">
<h2 class="f3 bold">Examples</h2>
<p class="f5">Note: these are just basic examples of Flex Box Layout usage. The resulting combination of all the classes provided by this library is too large to be enlisted.</p>
<h3 class="f5 book ptl caps">flex items along x axis</h3>
<p class="f5">Items will be equally distributed, taking the available white space.</p>
<div class="df">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis reversed</h3>
<div class="df flx-drr">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along y axis</h3>
<p class="f5">Items will be equally distributed, taking the available white space inside the container, which has a fixed height.</p>
<div class="df flx-dc h5">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along y axis reversed</h3>
<div class="df flx-dcr h5">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis aligned to top</h3>
<p class="f5">Items will be aligned to the top of the container, which has a fixed height.</p>
<div class="df flx-aifs h3 bg-black-05">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis aligned to bottom</h3>
<p class="f5">Items will be aligned to the bottom of the container.</p>
<div class="df flx-aife h3 bg-black-05">
<div class="flx-i bg-black-10">Item 1</div>
<div class="flx-i bg-black-20">Item 2</div>
<div class="flx-i bg-black-30">Item 3</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis with different alignments</h3>
<p class="f5">Making use of the <span class="code">align-self</span> property inside each item.</p>
<div class="df h3 bg-black-05">
<div class="flx-i flx-asfs bg-black-10">Align to start</div>
<div class="flx-i flx-asfe bg-black-20">Align to end</div>
<div class="flx-i flx-asc bg-black-30">Centered</div>
<div class="flx-i flx-ass bg-black-40 white">Stretched</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis justified to the start</h3>
<div class="df flx-jcfs h3 bg-black-05">
<div class="w2 oh bg-black-10">Item 1</div>
<div class="w2 oh bg-black-20">Item 2</div>
<div class="w2 oh bg-black-30">Item 3</div>
<div class="w2 oh bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis justified to the end</h3>
<div class="df flx-jcfe h3 bg-black-05">
<div class="w2 oh bg-black-10">Item 1</div>
<div class="w2 oh bg-black-20">Item 2</div>
<div class="w2 oh bg-black-30">Item 3</div>
<div class="w2 oh bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis justified at the center</h3>
<div class="df flx-jcc h3 bg-black-05">
<div class="bg-black-10">Item 1</div>
<div class="bg-black-20">Item 2</div>
<div class="bg-black-30">Item 3</div>
<div class="bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis with space between</h3>
<div class="df flx-jcsb h3 bg-black-05">
<div class="bg-black-10">Item 1</div>
<div class="bg-black-20">Item 2</div>
<div class="bg-black-30">Item 3</div>
<div class="bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis with space around</h3>
<div class="df flx-jcsa h3 bg-black-05">
<div class="bg-black-10">Item 1</div>
<div class="bg-black-20">Item 2</div>
<div class="bg-black-30">Item 3</div>
<div class="bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along x axis, mixing & matching alignments</h3>
<div class="df flx-jcsa h4 bg-black-05">
<div class="flx-asfs pas bg-black-10">Item 1</div>
<div class="flx-asfe pas bg-black-20">Item 2</div>
<div class="flx-asc pas bg-black-30">Item 3</div>
<div class="flx-ass pas bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items along y axis, mixing & matching alignments</h3>
<div class="df flx-dc flx-jcsb h5 bg-black-05">
<div class="flx-asfs pas bg-black-10">Item 1</div>
<div class="flx-asfe pas bg-black-20">Item 2</div>
<div class="flx-asc pas bg-black-30">Item 3</div>
<div class="flx-ass pas bg-black-40 white">Item 4</div>
</div>
<h3 class="f5 book ptl caps">flex items wrapped</h3>
<p class="f5">Items have a fixed width.</p>
<div class="df flx-w">
<div class="w-40 bg-black-10 pas">Item 1</div>
<div class="w-40 bg-black-20 pas">Item 2</div>
<div class="w-40 bg-black-30 pas">Item 3</div>
<div class="w-40 bg-black-40 pas white">Item 4</div>
<div class="w-40 bg-black-50 pas white">Item 5</div>
</div>
<h3 class="f5 book ptl caps">flex items wrapped in reverse</h3>
<div class="df flx-wr">
<div class="w-40 bg-black-10 pas">Item 1</div>
<div class="w-40 bg-black-20 pas">Item 2</div>
<div class="w-40 bg-black-30 pas">Item 3</div>
<div class="w-40 bg-black-40 pas white">Item 4</div>
<div class="w-40 bg-black-50 pas white">Item 5</div>
</div>
<h3 class="f5 book ptl caps">flex items not allowed to wrap</h3>
<p class="f5">See how, although items are supposed to be wider, they get shrunk to fit into the flex container.</p>
<div class="df flx-wn">
<div class="w-40 bg-black-10 pas">Item 1</div>
<div class="w-40 bg-black-20 pas">Item 2</div>
<div class="w-40 bg-black-30 pas">Item 3</div>
<div class="w-40 bg-black-40 pas white">Item 4</div>
<div class="w-40 bg-black-50 pas white">Item 5</div>
</div>
<h3 class="f5 book ptl caps">altering order programatically</h3>
<p class="f5">Compare the order that the elements are enlisted in the markup, with the orders set by the <span class="code">order</span> property.</p>
<div class="df">
<div class="flx-i flx-o1 bg-black-10 pas">Item 1</div>
<div class="flx-i flx-o4 bg-black-20 pas">Item 2</div>
<div class="flx-i flx-o0 bg-black-30 pas">Item 3</div>
<div class="flx-i flx-o3 bg-black-40 pas white">Item 4</div>
<div class="flx-i flx-o2 bg-black-50 pas white">Item 5</div>
</div>
<h3 class="f5 book ptl caps">common layout case: header, content, footer</h3>
<p class="f5">Consider a basic layout with fixed header and footer, a "flexed" content will always take the whole available height, regardless.</p>
<div class="df">
<div class="df flx-i flx-dc h4 prm">
<div class="paxs bg-black-30">Header</div>
<div class="paxs flx-i bg-black-10">Content</div>
<div class="paxs bg-black-30">Footer</div>
</div>
<div class="df flx-i flx-dc h5">
<div class="paxs bg-black-30">Header</div>
<div class="paxs flx-i bg-black-10">Content</div>
<div class="paxs bg-black-30">Footer</div>
</div>
</div>
<h3 class="f5 book ptl caps">common layout case: distribute items evenly</h3>
<p class="f5">Distribute items with different size, proportionally across a given container, keeping an even space between them and the edges.</p>
<div class="df flx-jcsa bg-black-10 h5">
<div class="flx-asc tc pas bg-black-10">this</div>
<div class="flx-asc tc pas bg-black-10 h2">items</div>
<div class="flx-asc tc pas bg-black-10">have</div>
<div class="flx-asc tc pas bg-black-10 h3">different</div>
<div class="flx-asc tc pas bg-black-10">widths</div>
<div class="flx-asc tc pas bg-black-10 h4">and</div>
<div class="flx-asc tc pas bg-black-10">heights</div>
</div>
</div>
<section class="bg-dark-gray white ptl pbxl">
<header class="phm phl-ns ptl">
<kbd class="yellow">src/_flex.css</kbd>
</header>
<pre class="phm phl-ns">
<code class="small">
/*
## FLEX BOX LAYOUT
Mix & match container-level flex properties with item-level ones to achieve
desired flex box layouts.
More complex flex layout system may need more fine-tuned values for different
flex properties, but in most cases, simple layouts can easily be achieved by
a combination of the classes enlisted here.
For further reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
### To note:
The `df` class defines a flex container, from where all flex layouts start.
This class was defined following the syntax found on the __Display__ module:
https://github.com/tachyons-css/tachyons-display
Base:
flx = Base for all flex-related properties
Modifiers:
dr = sets flex direction to row (default value)
dc = sets flex direction to column
drr = sets flex direction to reversed row
dcr = sets flex direction to reversed column
i = sets a flex item, standing for `flex: 1`; property value, which is a
shorthand for `flex-grow: 1;`, `flex-shrink: 1;` and `flex-basis: auto;`.
This is the most likely usage for a flex item: to grow so as to take all
white space available.
g0 = sets flex grow to 0
s0 = sets flex shrink to 0
b0 = sets flex basis to 0%
g1 = sets flex grow to 1
s1 = sets flex shrink to 1
b1 = sets flex basis to 100%
ais = align items to stretch (default)
aifs = align items to start (flex-start)
aife = align items to end (flex-end)
aic = align items to center
aib = align items to baseline
acs = align content to stretch (default)
acfs = align content to start (flex-start)
acfe = align content to end (flex-end)
acc = align content to center
acsb = align content with space between
acsa = align content with space around
ass = align self to stretch (default)
asfs = align self to start (flex-start)
asfe = align self to end (flex-end)
asc = align self to center
asb = align self to baseline
jcfs = justify content to start (flex-start, default)
jcfe = justify content to end (flex-end)
jcc = justify content to center
jcsb = justify content to space between
jcsa = justify content to space around
w = flex wrap
wr = flex wrap reverse
wn = flex no wrap (default)
o0 = order 0
o1 = order 1
o2 = order 2
o3 = order 3
o4 = order 4
o5 = order 5
*/
/*
FLEX DIRECTION
*/
.flx-dc {
flex-direction: column;
}
.flx-dr {
flex-direction: row;
}
.flx-dcr {
flex-direction: column-reverse;
}
.flx-drr {
flex-direction: row-reverse;
}
/*
FLEX
*/
.flx-i {
flex: 1;
}
.flx-g0 {
flex-grow: 0;
}
.flx-s0 {
flex-shrink: 0;
}
.flx-b0 {
flex-basis: 0%;
}
.flx-g1 {
flex-grow: 1;
}
.flx-s1 {
flex-shrink: 1;
}
.flx-b1 {
flex-basis: 100%;
}
/*
ALIGN ITEMS
*/
.flx-ais {
align-items: stretch;
}
.flx-aifs {
align-items: flex-start;
}
.flx-aife {
align-items: flex-end;
}
.flx-aic {
align-items: center;
}
.flx-aib {
align-items: baseline;
}
/*
ALIGN CONTENT
*/
.flx-acs {
align-content: stretch;
}
.flx-acfs {
align-content: flex-start;
}
.flx-acfe {
align-content: flex-end;
}
.flx-acc {
align-content: center;
}
.flx-acsb {
align-content: space-between;
}
.flx-acsa {
align-content: space-around;
}
/*
ALIGN SELF
*/
.flx-ass {
align-self: stretch;
}
.flx-asfs {
align-self: flex-start;
}
.flx-asfe {
align-self: flex-end;
}
.flx-asc {
align-self: center;
}
.flx-asb {
align-self: baseline;
}
/*
JUSTIFY CONTENT
*/
.flx-jcfs {
justify-content: flex-start;
}
.flx-jcfe {
justify-content: flex-end;
}
.flx-jcc {
justify-content: center;
}
.flx-jcsb {
justify-content: space-between;
}
.flx-jcsa {
justify-content: space-around;
}
/*
WRAP
*/
.flx-w {
flex-wrap: wrap;
}
.flx-wr {
flex-wrap: wrap-reverse;
}
.flx-wn {
flex-wrap: nowrap;
}
/*
ORDER
*/
.flx-o0 {
order: 0;
}
.flx-o1 {
order: 1;
}
.flx-o2 {
order: 2;
}
.flx-o3 {
order: 3;
}
.flx-o4 {
order: 4;
}
.flx-o5 {
order: 5;
}
</code>
</pre>
</section>
</main>
<!-- <a href="http://npmjs.org/package/tachyons-flex" title="tachyons-widths">View package on npm</a> -->
</body>
</html>