UNPKG

outlayer

Version:

the brains and guts of a layout library

github.com/metafizzy/outlayer

metafizzy/outlayer

96 lines (84 loc) • 2.42 kB
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
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CellsByRow toggler</title> <link rel="stylesheet" href="examples.css" /> </head> <body> <h1>CellsByRow toggler</h1> <button id="toggler">Toggle</button> <div id="basic" class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="../bower_components/get-size/get-size.js"></script> <script src="../bower_components/matches-selector/matches-selector.js"></script> <script src="../bower_components/ev-emitter/ev-emitter.js"></script> <script src="../bower_components/fizzy-ui-utils/utils.js"></script> <script src="../item.js"></script> <script src="../outlayer.js"></script> <script src="cells-by-row.js"></script> <script> var basic = document.querySelector('#basic'); var layout = new CellsByRow( basic ); var button = document.querySelector('button'); var isToggled = false; button.onclick = function() { isToggled = !isToggled; basic.style.width = isToggled ? '800px' : '400px'; layout.layout(); } </script> </body> </html>