@natachah/vanilla-frontend 0.0.2
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.
- package/.gitlab-ci.yml +40 -0
- package/LICENSE.md +7 -0
- package/README.md +11 -0
- package/docs/index.html +36 -0
- package/docs/main.js +32 -0
- package/docs/pages/components/badge.html +154 -0
- package/docs/pages/components/button.html +186 -0
- package/docs/pages/components/card.html +184 -0
- package/docs/pages/components/dialog.html +334 -0
- package/docs/pages/components/disclosure.html +310 -0
- package/docs/pages/components/dropdown.html +255 -0
- package/docs/pages/components/form.html +331 -0
- package/docs/pages/components/list.html +140 -0
- package/docs/pages/components/loading.html +58 -0
- package/docs/pages/components/media.html +130 -0
- package/docs/pages/components/nav.html +119 -0
- package/docs/pages/components/progress.html +47 -0
- package/docs/pages/components/slider.html +311 -0
- package/docs/pages/components/table.html +168 -0
- package/docs/pages/javascript/autofill.html +170 -0
- package/docs/pages/javascript/checkall.html +59 -0
- package/docs/pages/javascript/comfort.html +134 -0
- package/docs/pages/javascript/consent.html +112 -0
- package/docs/pages/javascript/cookie.html +81 -0
- package/docs/pages/javascript/form.html +199 -0
- package/docs/pages/javascript/scroll.html +209 -0
- package/docs/pages/javascript/sidebar.html +53 -0
- package/docs/pages/javascript/sortable.html +148 -0
- package/docs/pages/javascript/toggle.html +191 -0
- package/docs/pages/javascript/tree.html +221 -0
- package/docs/pages/layout/grid.html +201 -0
- package/docs/pages/layout/reset.html +53 -0
- package/docs/pages/layout/typography.html +324 -0
- package/docs/pages/quick-start/conventions.html +112 -0
- package/docs/pages/quick-start/customization.html +187 -0
- package/docs/pages/quick-start/installation.html +95 -0
- package/docs/pages/quick-start/mixins.html +228 -0
- package/docs/pages/test.html +15 -0
- package/docs/src/js/demo.js +98 -0
- package/docs/src/js/doc-code.js +102 -0
- package/docs/src/js/doc-demo.js +14 -0
- package/docs/src/js/doc-layout.js +108 -0
- package/docs/src/scss/demo.scss +77 -0
- package/docs/src/scss/layout.scss +160 -0
- package/docs/src/scss/style.scss +278 -0
- package/docs/vite.config.mjs +23 -0
- package/esbuild.mjs +25 -0
- package/js/_autofill.js +131 -0
- package/js/_check-all.js +77 -0
- package/js/_comfort.js +174 -0
- package/js/_consent.js +84 -0
- package/js/_dialog.js +164 -0
- package/js/_dropdown.js +101 -0
- package/js/_scroll.js +184 -0
- package/js/_sidebar.js +97 -0
- package/js/_slider.js +249 -0
- package/js/_sortable.js +143 -0
- package/js/_tabpanel.js +88 -0
- package/js/_toggle.js +123 -0
- package/js/_tree.js +85 -0
- package/js/tests/autofill.test.js +157 -0
- package/js/tests/base-component.test.js +108 -0
- package/js/tests/check-all.test.js +88 -0
- package/js/tests/comfort.test.js +219 -0
- package/js/tests/consent.test.js +84 -0
- package/js/tests/cookie.test.js +102 -0
- package/js/tests/dialog.test.js +189 -0
- package/js/tests/dropdown.test.js +115 -0
- package/js/tests/form-helper.test.js +155 -0
- package/js/tests/scroll.test.js +203 -0
- package/js/tests/sidebar.test.js +99 -0
- package/js/tests/slider.test.js +307 -0
- package/js/tests/sortable.test.js +124 -0
- package/js/tests/tabpanel.test.js +114 -0
- package/js/tests/toggle.test.js +190 -0
- package/js/tests/tree.test.js +165 -0
- package/js/utilities/_base-component.js +101 -0
- package/js/utilities/_cookie.js +98 -0
- package/js/utilities/_error.js +80 -0
- package/js/utilities/_form-helper.js +101 -0
- package/package.json +42 -0
- package/scss/_badge.scss +37 -0
- package/scss/_button.scss +34 -0
- package/scss/_card.scss +122 -0
- package/scss/_dialog.scss +116 -0
- package/scss/_disclosure.scss +101 -0
- package/scss/_dropdown.scss +68 -0
- package/scss/_form.scss +197 -0
- package/scss/_grid.scss +40 -0
- package/scss/_group.scss +57 -0
- package/scss/_list.scss +18 -0
- package/scss/_loading.scss +49 -0
- package/scss/_media.scss +37 -0
- package/scss/_nav.scss +72 -0
- package/scss/_progress.scss +40 -0
- package/scss/_slider.scss +35 -0
- package/scss/_table.scss +36 -0
- package/scss/utilities/_mixin.scss +322 -0
- package/scss/utilities/_reset.scss +145 -0
- package/scss/utilities/_typography.scss +107 -0
- package/scss/vanilla-frontend.scss +23 -0
- package/scss/variables/_root.scss +70 -0
- package/scss/variables/_setting.scss +63 -0
- package/vitest.config.js +7 -0
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Javascript > Tree</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Tree</h1>
|
|
14
|
+
<p>The tree component make you able to make a tree view by adding the <code>role="tree"</code> attribute on a <code><ul></code> or <code><ol></code> tag.</p>
|
|
15
|
+
<p>The <code><li></code> must have a <code>role="treeitem"</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>
|
|
16
|
+
<doc-demo>
|
|
17
|
+
<ul class="demo-tree" role="tree">
|
|
18
|
+
<li role="treeitem">1: Lorem, ipsum</li>
|
|
19
|
+
<li role="treeitem">
|
|
20
|
+
<span aria-expanded="false" aria-owns="treelist">1: Inventore, perspiciatis (open me)</span>
|
|
21
|
+
<ul id="treelist" hidden>
|
|
22
|
+
<li role="treeitem">2: Lorem</li>
|
|
23
|
+
<li role="treeitem">
|
|
24
|
+
<span aria-expanded="false" aria-owns="subtreelist">2: Adipisci (open me)</span>
|
|
25
|
+
<ul id="subtreelist" hidden>
|
|
26
|
+
<li role="treeitem">3: Lorem</li>
|
|
27
|
+
<li role="treeitem">3: Adipisci</li>
|
|
28
|
+
<li role="treeitem">3: Facilis</li>
|
|
29
|
+
</ul>
|
|
30
|
+
</li>
|
|
31
|
+
<li role="treeitem">1: Facilis</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</li>
|
|
34
|
+
<li role="treeitem">Dolor, quis</li>
|
|
35
|
+
</ul>
|
|
36
|
+
</doc-demo>
|
|
37
|
+
|
|
38
|
+
<div class="code-group">
|
|
39
|
+
<div role="tablist">
|
|
40
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
41
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
42
|
+
</div>
|
|
43
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
44
|
+
<ul id="treeList" role="tree">
|
|
45
|
+
<li role="treeitem">Lorem, ipsum</li>
|
|
46
|
+
<li role="treeitem">
|
|
47
|
+
<span aria-expanded="false" aria-owns="treelist">Inventore, perspiciatis</span>
|
|
48
|
+
<ul id="treelist" hidden>
|
|
49
|
+
<li role="treeitem">Lorem</li>
|
|
50
|
+
<li role="treeitem">
|
|
51
|
+
<span aria-expanded="false" aria-owns="subtreelist">Adipisci</span>
|
|
52
|
+
<ul id="subtreelist" hidden>
|
|
53
|
+
<li role="treeitem">Adipisci: Lorem</li>
|
|
54
|
+
<li role="treeitem">Adipisci: Adipisci</li>
|
|
55
|
+
<li role="treeitem">Adipisci: Facilis</li>
|
|
56
|
+
</ul>
|
|
57
|
+
</li>
|
|
58
|
+
<li role="treeitem">Facilis</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</li>
|
|
61
|
+
<li role="treeitem">Dolor, quis</li>
|
|
62
|
+
</ul>
|
|
63
|
+
</doc-code>
|
|
64
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
65
|
+
import Tree from "@natachah/vanilla-frontend/js/_tree"
|
|
66
|
+
const treeList = document.getElementById('treeList')
|
|
67
|
+
if (treeList) new Tree(treeList)
|
|
68
|
+
</doc-code>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<p>This can also be implemented on a <code><table></code> but it required the <code>role="treegrid"</code> attribute.</p>
|
|
72
|
+
<doc-demo>
|
|
73
|
+
<table class="demo-tree" role="treegrid">
|
|
74
|
+
<tbody>
|
|
75
|
+
<tr aria-level="1">
|
|
76
|
+
<td>1: Lorem, ipsum</td>
|
|
77
|
+
</tr>
|
|
78
|
+
<tr aria-level="1" aria-expanded="false" aria-owns="row1 row2 row3">
|
|
79
|
+
<td>1: Cum, dolorum (open me)</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr id="row1" aria-level="2" hidden>
|
|
82
|
+
<td>2: Lorem</td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr id="row2" aria-level="2" aria-expanded="false" aria-owns="row2-1 row2-2" hidden>
|
|
85
|
+
<td>2: Quo (open me)</td>
|
|
86
|
+
</tr>
|
|
87
|
+
<tr id="row2-1" aria-level="3" hidden>
|
|
88
|
+
<td>2.1: Quo</td>
|
|
89
|
+
</tr>
|
|
90
|
+
<tr id="row2-2" aria-level="3" hidden>
|
|
91
|
+
<td>2.2: Quo</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr id="row3" aria-level="2" hidden>
|
|
94
|
+
<td>2: Odio</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr aria-level="1">
|
|
97
|
+
<td>1: Perspiciatis, tenetur</td>
|
|
98
|
+
</tr>
|
|
99
|
+
</tbody>
|
|
100
|
+
</table>
|
|
101
|
+
</doc-demo>
|
|
102
|
+
|
|
103
|
+
<doc-code>
|
|
104
|
+
<table id="treeGrid" role="treegrid">
|
|
105
|
+
<tbody>
|
|
106
|
+
<tr aria-level="1">
|
|
107
|
+
<td>1: Lorem, ipsum</td>
|
|
108
|
+
</tr>
|
|
109
|
+
<tr aria-level="1" aria-expanded="false" aria-owns="row1 row2 row3">
|
|
110
|
+
<td>1: Cum, dolorum</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr id="row1" aria-level="2" hidden>
|
|
113
|
+
<td>2: Lorem</td>
|
|
114
|
+
</tr>
|
|
115
|
+
<tr id="row2" aria-level="2" aria-expanded="false" aria-owns="row2-1 row2-2" hidden>
|
|
116
|
+
<td>2: Quo</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr id="row2-1" aria-level="3" hidden>
|
|
119
|
+
<td>2.1: Quo</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr id="row2-2" aria-level="3" hidden>
|
|
122
|
+
<td>2.2: Quo</td>
|
|
123
|
+
</tr>
|
|
124
|
+
<tr id="row3" aria-level="2" hidden>
|
|
125
|
+
<td>2: Odio</td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr aria-level="1">
|
|
128
|
+
<td>1: Perspiciatis, tenetur</td>
|
|
129
|
+
</tr>
|
|
130
|
+
</tbody>
|
|
131
|
+
</table>
|
|
132
|
+
</doc-code>
|
|
133
|
+
|
|
134
|
+
<blockquote>
|
|
135
|
+
<p>When it's a <code><table></code>, the close method will impact all the children associated.</p>
|
|
136
|
+
</blockquote>
|
|
137
|
+
|
|
138
|
+
<h2>Handle</h2>
|
|
139
|
+
<p>You can decide which part of the item toggle the open/close method with the <code>data-handle</code> attribute</p>
|
|
140
|
+
<doc-demo>
|
|
141
|
+
<ul class="demo-tree" role="tree">
|
|
142
|
+
<li role="treeitem">
|
|
143
|
+
<span aria-expanded="false" aria-owns="sublist">
|
|
144
|
+
<span data-handle>
|
|
145
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
146
|
+
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
|
|
147
|
+
</svg>
|
|
148
|
+
</span>
|
|
149
|
+
Inventore, perspiciatis
|
|
150
|
+
</span>
|
|
151
|
+
<ul id="sublist" hidden>
|
|
152
|
+
<li>Some children</li>
|
|
153
|
+
<li>Some children</li>
|
|
154
|
+
<li>Some children</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</li>
|
|
157
|
+
</ul>
|
|
158
|
+
</doc-demo>
|
|
159
|
+
|
|
160
|
+
<doc-code>
|
|
161
|
+
<ul role="tree">
|
|
162
|
+
...
|
|
163
|
+
<li role="treeitem">
|
|
164
|
+
<span aria-expanded="false" aria-owns="treelist">
|
|
165
|
+
<span data-handle>
|
|
166
|
+
HANDLE
|
|
167
|
+
</span>
|
|
168
|
+
Inventore, perspiciatis
|
|
169
|
+
</span>
|
|
170
|
+
<ul id="treelist" hidden>
|
|
171
|
+
...
|
|
172
|
+
</ul>
|
|
173
|
+
</li>
|
|
174
|
+
...
|
|
175
|
+
</ul>
|
|
176
|
+
</doc-code>
|
|
177
|
+
|
|
178
|
+
<blockquote class="tip">
|
|
179
|
+
<p>If there is an <code><svg></code> as handle, the default style will provide an animation.</p>
|
|
180
|
+
</blockquote>
|
|
181
|
+
|
|
182
|
+
<h2>Javascript</h2>
|
|
183
|
+
<p>To enable this component you need to import the javascript file and create a new Tree object.</p>
|
|
184
|
+
|
|
185
|
+
<h3>Events</h3>
|
|
186
|
+
<table>
|
|
187
|
+
<thead>
|
|
188
|
+
<tr>
|
|
189
|
+
<th>Event</th>
|
|
190
|
+
<th>Description</th>
|
|
191
|
+
<th>Value</th>
|
|
192
|
+
</tr>
|
|
193
|
+
</thead>
|
|
194
|
+
<tbody>
|
|
195
|
+
<tr>
|
|
196
|
+
<td data-label="Event">
|
|
197
|
+
<p>tree:changed</p>
|
|
198
|
+
</td>
|
|
199
|
+
<td data-label="Description">
|
|
200
|
+
<p>This event is fired when an item is toggled</p>
|
|
201
|
+
</td>
|
|
202
|
+
<td data-label="Value">
|
|
203
|
+
<p><code>isOpen</code> as a <code>boolean</code></p>
|
|
204
|
+
</td>
|
|
205
|
+
</tr>
|
|
206
|
+
</tbody>
|
|
207
|
+
</table>
|
|
208
|
+
|
|
209
|
+
<doc-code data-type="js">
|
|
210
|
+
const myTree = document.getElementById('myTree')
|
|
211
|
+
myTree.addEventListener('tree:changed', (e) => {
|
|
212
|
+
const isOpen = e.detail.isOpen
|
|
213
|
+
...
|
|
214
|
+
})
|
|
215
|
+
</doc-code>
|
|
216
|
+
|
|
217
|
+
</doc-layout>
|
|
218
|
+
<script type="module" src="/main.js"></script>
|
|
219
|
+
</body>
|
|
220
|
+
|
|
221
|
+
</html>
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Layout > Grid</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Grid system</h1>
|
|
14
|
+
|
|
15
|
+
<p>A simple way to create some grid into your layout.</p>
|
|
16
|
+
|
|
17
|
+
<p>To use it, import this file:</p>
|
|
18
|
+
|
|
19
|
+
<doc-code data-type="scss">
|
|
20
|
+
@import '@natachah/vanilla-frontend/scss/layout/_grid';
|
|
21
|
+
</doc-code>
|
|
22
|
+
|
|
23
|
+
<p>There is two types of grid, the basic and the flexible.</p>
|
|
24
|
+
|
|
25
|
+
<h2>Grid</h2>
|
|
26
|
+
|
|
27
|
+
<p>You can create a basic grid via the <code>.grid</code> class.</p>
|
|
28
|
+
|
|
29
|
+
<p>This method is perfect for <b>fixed</b> and/or <b>complex</b> layout.</p>
|
|
30
|
+
|
|
31
|
+
<doc-demo>
|
|
32
|
+
<div class="grid">
|
|
33
|
+
<div>1</div>
|
|
34
|
+
<div>2</div>
|
|
35
|
+
<div>3</div>
|
|
36
|
+
<div>4</div>
|
|
37
|
+
<div>5</div>
|
|
38
|
+
<div>6</div>
|
|
39
|
+
<div>7</div>
|
|
40
|
+
<div>8</div>
|
|
41
|
+
<div>9</div>
|
|
42
|
+
<div>10</div>
|
|
43
|
+
<div>11</div>
|
|
44
|
+
<div>12</div>
|
|
45
|
+
</div>
|
|
46
|
+
</doc-demo>
|
|
47
|
+
|
|
48
|
+
<doc-code>
|
|
49
|
+
<div class="grid">
|
|
50
|
+
<div>Col 1</div>
|
|
51
|
+
<div>Col 2</div>
|
|
52
|
+
<div>Col 3</div>
|
|
53
|
+
<div>Col 4</div>
|
|
54
|
+
<div>Col 5</div>
|
|
55
|
+
<div>Col 6</div>
|
|
56
|
+
<div>Col 7</div>
|
|
57
|
+
<div>Col 8</div>
|
|
58
|
+
<div>Col 9</div>
|
|
59
|
+
<div>Col 10</div>
|
|
60
|
+
<div>Col 11</div>
|
|
61
|
+
<div>Col 12</div>
|
|
62
|
+
</div>
|
|
63
|
+
</doc-code>
|
|
64
|
+
|
|
65
|
+
<h2 id="flex-grid">Flex grid</h2>
|
|
66
|
+
|
|
67
|
+
<p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
|
|
68
|
+
|
|
69
|
+
<p>This method is more for <b>flexible</b> layout with a random number of items to display.</p>
|
|
70
|
+
|
|
71
|
+
<doc-demo>
|
|
72
|
+
<div class="flex-grid">
|
|
73
|
+
<div>1</div>
|
|
74
|
+
<div>2</div>
|
|
75
|
+
<div>3</div>
|
|
76
|
+
<div>4</div>
|
|
77
|
+
<div>5</div>
|
|
78
|
+
<div>6</div>
|
|
79
|
+
<div>7</div>
|
|
80
|
+
<div>8</div>
|
|
81
|
+
<div>9</div>
|
|
82
|
+
<div>10</div>
|
|
83
|
+
<div>11</div>
|
|
84
|
+
<div>12</div>
|
|
85
|
+
</div>
|
|
86
|
+
</doc-demo>
|
|
87
|
+
|
|
88
|
+
<doc-code>
|
|
89
|
+
<div class="flex-grid">
|
|
90
|
+
<div>1</div>
|
|
91
|
+
<div>2</div>
|
|
92
|
+
<div>3</div>
|
|
93
|
+
<div>4</div>
|
|
94
|
+
<div>5</div>
|
|
95
|
+
<div>6</div>
|
|
96
|
+
<div>7</div>
|
|
97
|
+
<div>8</div>
|
|
98
|
+
<div>9</div>
|
|
99
|
+
<div>10</div>
|
|
100
|
+
<div>11</div>
|
|
101
|
+
<div>12</div>
|
|
102
|
+
</div>
|
|
103
|
+
</doc-code>
|
|
104
|
+
|
|
105
|
+
<h2>Responsive</h2>
|
|
106
|
+
|
|
107
|
+
<p>Both of them can be responsive by changing the CSS custom property <code>--grid-columns</code> inside a <code>@media</code> or a <code>@container</code>.</p>
|
|
108
|
+
|
|
109
|
+
<p>Making the grid changes into the CSS will prevent to have multiple unused classes and force you to have controle of our layout.</p>
|
|
110
|
+
|
|
111
|
+
<h2>Columns</h2>
|
|
112
|
+
|
|
113
|
+
<h3>Offset</h3>
|
|
114
|
+
|
|
115
|
+
<p>To make a column ossfet with <code>.grid</code>, change the properties <code>grid-column-start</code> and <code>grid-column-end</code> of the column.</p>
|
|
116
|
+
|
|
117
|
+
<doc-demo>
|
|
118
|
+
<div class="grid" style="--grid-columns:4">
|
|
119
|
+
<div>Grid 1</div>
|
|
120
|
+
<div>Grid 2</div>
|
|
121
|
+
<div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
|
|
122
|
+
</div>
|
|
123
|
+
</doc-demo>
|
|
124
|
+
|
|
125
|
+
<p>But for <code>.flex-grid</code> you must calculate the percentage of the offset and set it as a <code>margin-left</code>. Or you can simply use the mixin <code>flex-grid-offset-column()</code> and pass as parameter the number of columns you want to offset <em>(by default it's one)</em></p>
|
|
126
|
+
|
|
127
|
+
<doc-demo>
|
|
128
|
+
<div class="flex-grid" style="--grid-columns:4">
|
|
129
|
+
<div>Flex 1</div>
|
|
130
|
+
<div>Flex 2</div>
|
|
131
|
+
<div id="flexGridDemoOffset">Offset</div>
|
|
132
|
+
</div>
|
|
133
|
+
</doc-demo>
|
|
134
|
+
|
|
135
|
+
<h3>Width</h3>
|
|
136
|
+
|
|
137
|
+
<p>To make a column wider with <code>.grid</code>, change the properties <code>grid-column-start</code> and <code>grid-column-end</code> of the column.</p>
|
|
138
|
+
|
|
139
|
+
<doc-demo>
|
|
140
|
+
<div class="grid" style="--grid-columns:4">
|
|
141
|
+
<div>Grid 1</div>
|
|
142
|
+
<div>Grid 2</div>
|
|
143
|
+
<div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
|
|
144
|
+
</div>
|
|
145
|
+
</doc-demo>
|
|
146
|
+
|
|
147
|
+
<p>But for <code>.flex-grid</code> you must calculate the percentage of the width and set it as a <code>flex-basis</code>. Or you can simply use the mixin <code>flex-grid-wider-column()</code> and pass as parameter the number of columns you want to take <em>(by default it's two)</em></p>
|
|
148
|
+
|
|
149
|
+
<doc-demo>
|
|
150
|
+
<div class="flex-grid" style="--grid-columns:4">
|
|
151
|
+
<div>Flex 1</div>
|
|
152
|
+
<div>Flex 2</div>
|
|
153
|
+
<div id="flexGridDemoWider">Wider</div>
|
|
154
|
+
</div>
|
|
155
|
+
</doc-demo>
|
|
156
|
+
|
|
157
|
+
<h3>Auto</h3>
|
|
158
|
+
|
|
159
|
+
<p>Both grids support auto column but are triggered by different CSS custom properties.</p>
|
|
160
|
+
|
|
161
|
+
<p>For <code>.grid</code> use the property <code>--grid-columns:auto-fit</code>.</p>
|
|
162
|
+
|
|
163
|
+
<doc-demo>
|
|
164
|
+
<div class="grid" style="--grid-columns:auto-fit">
|
|
165
|
+
<div>Grid 1</div>
|
|
166
|
+
<div>Grid 2</div>
|
|
167
|
+
<div>Grid 3</div>
|
|
168
|
+
<div>Grid 4</div>
|
|
169
|
+
</div>
|
|
170
|
+
</doc-demo>
|
|
171
|
+
|
|
172
|
+
<p>And for the <code>.flex-grid</code> use the property <code>--grid-grow:1</code>.</p>
|
|
173
|
+
|
|
174
|
+
<doc-demo>
|
|
175
|
+
<div class="flex-grid" style="--grid-grow:1">
|
|
176
|
+
<div>Flex 1</div>
|
|
177
|
+
<div>Flex 2</div>
|
|
178
|
+
<div>Flex 3</div>
|
|
179
|
+
<div>Flex 4</div>
|
|
180
|
+
</div>
|
|
181
|
+
</doc-demo>
|
|
182
|
+
|
|
183
|
+
<h2>Customization</h2>
|
|
184
|
+
|
|
185
|
+
<p>Both grid can be customize via CSS custom property.</p>
|
|
186
|
+
|
|
187
|
+
<doc-code data-type="css">
|
|
188
|
+
--grid-gap-block
|
|
189
|
+
--grid-gap-inline
|
|
190
|
+
--grid-justify
|
|
191
|
+
--grid-align
|
|
192
|
+
--grid-columns
|
|
193
|
+
--grid-grow /* only for .flex-grid */
|
|
194
|
+
|
|
195
|
+
</doc-code>
|
|
196
|
+
|
|
197
|
+
</doc-layout>
|
|
198
|
+
<script type="module" src="/main.js"></script>
|
|
199
|
+
</body>
|
|
200
|
+
|
|
201
|
+
</html>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Layout > Reset</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Reset</h1>
|
|
14
|
+
|
|
15
|
+
<p>The framework include a simple <b>reboot</b> to makes browsers render all elements more consistently and in line with modern standards.</p>
|
|
16
|
+
|
|
17
|
+
<ul>
|
|
18
|
+
<li>Unset all default style <em>(except display)</em> </li>
|
|
19
|
+
<li>Change box-sizing to <code>border-box</code> on all element</li>
|
|
20
|
+
<li>Render media as block with a default 100% width</li>
|
|
21
|
+
<li>Change the <code>overflow-wrap</code> for text</li>
|
|
22
|
+
<li>Set default size and align for <code><svg></code></li>
|
|
23
|
+
<li>Set <code><table></code>default width</li>
|
|
24
|
+
<li>Set default cursor for <code>draggable</code></li>
|
|
25
|
+
<li>Set default cursor and animation for <code>tree</code></li>
|
|
26
|
+
<li>Enable <code>scroll-behavior</code> if <code>prefers-reduced-motion</code> is not set</li>
|
|
27
|
+
<li>Set default <code>body</code> setting + <code>inert</code> mode for <code><dialog></code></li>
|
|
28
|
+
<li>Set functionalities on <code>body</code> for <code>inert</code> and <code>data-preload</code> attributes </li>
|
|
29
|
+
</ul>
|
|
30
|
+
|
|
31
|
+
<p>To use it, import this file:</p>
|
|
32
|
+
|
|
33
|
+
<doc-code data-type="scss">
|
|
34
|
+
@import '@natachah/vanilla-frontend/scss/utilities/_reset';
|
|
35
|
+
</doc-code>
|
|
36
|
+
|
|
37
|
+
<h2>Preload</h2>
|
|
38
|
+
|
|
39
|
+
<p>If you need to disabled the CSS animation on first load of the page add the data attribute <code>data-preload</code> on the <code><body></code>.</p>
|
|
40
|
+
|
|
41
|
+
<p>And then add this script taht will remove the attribute after a timeout:</p>
|
|
42
|
+
|
|
43
|
+
<doc-code data-type="js">
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
document.body.removeAttribute('data-preload')
|
|
46
|
+
}, 10)
|
|
47
|
+
</doc-code>
|
|
48
|
+
|
|
49
|
+
</doc-layout>
|
|
50
|
+
<script type="module" src="/main.js"></script>
|
|
51
|
+
</body>
|
|
52
|
+
|
|
53
|
+
</html>
|