@natachah/vanilla-frontend 0.2.0 → 0.2.1
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.
|
@@ -26,10 +26,8 @@
|
|
|
26
26
|
|
|
27
27
|
<p>You can create a basic grid via the <code>.grid</code> class.</p>
|
|
28
28
|
|
|
29
|
-
<p>This method is perfect for <b>fixed</b> and/or <b>complex</b> layout.</p>
|
|
30
|
-
|
|
31
29
|
<doc-demo>
|
|
32
|
-
<div class="grid">
|
|
30
|
+
<div class="grid" style="--grid-columns:8">
|
|
33
31
|
<div>1</div>
|
|
34
32
|
<div>2</div>
|
|
35
33
|
<div>3</div>
|
|
@@ -46,29 +44,20 @@
|
|
|
46
44
|
</doc-demo>
|
|
47
45
|
|
|
48
46
|
<doc-code>
|
|
49
|
-
<div class="grid">
|
|
47
|
+
<div class="grid" style="--grid-columns:8">
|
|
50
48
|
<div>Col 1</div>
|
|
51
49
|
<div>Col 2</div>
|
|
52
50
|
<div>Col 3</div>
|
|
53
|
-
<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>
|
|
51
|
+
<div>...</div>
|
|
62
52
|
</div>
|
|
63
53
|
</doc-code>
|
|
64
54
|
|
|
65
55
|
<h2 id="flex-grid">Flex grid</h2>
|
|
66
56
|
|
|
67
57
|
<p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
|
|
68
|
-
<p>This method is more for <b>flexible</b> layout with a random number of items to display.</p>
|
|
69
58
|
|
|
70
59
|
<doc-demo>
|
|
71
|
-
<div class="flex-grid">
|
|
60
|
+
<div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
|
|
72
61
|
<div>1</div>
|
|
73
62
|
<div>2</div>
|
|
74
63
|
<div>3</div>
|
|
@@ -85,7 +74,39 @@
|
|
|
85
74
|
</doc-demo>
|
|
86
75
|
|
|
87
76
|
<doc-code>
|
|
88
|
-
<div class="flex-grid">
|
|
77
|
+
<div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
|
|
78
|
+
<div>1</div>
|
|
79
|
+
<div>2</div>
|
|
80
|
+
<div>3</div>
|
|
81
|
+
<div>...</div>
|
|
82
|
+
</div>
|
|
83
|
+
</doc-code>
|
|
84
|
+
|
|
85
|
+
<h2>Customization</h2>
|
|
86
|
+
|
|
87
|
+
<p>Both of them can be customize by changing the CSS custom properties.</p>
|
|
88
|
+
|
|
89
|
+
<doc-code data-type="scss">
|
|
90
|
+
--grid-columns: 12;
|
|
91
|
+
--grid-gap-inline: 1rem;
|
|
92
|
+
--grid-gap-block: 1rem;
|
|
93
|
+
--grid-min-column-size: 0%;
|
|
94
|
+
--grid-min-columns: auto-fit;
|
|
95
|
+
</doc-code>
|
|
96
|
+
|
|
97
|
+
<p>But <code>.flex-grid</code> as also the property <code>--grid-grow</code> !</p>
|
|
98
|
+
|
|
99
|
+
<h3>Responsive</h3>
|
|
100
|
+
|
|
101
|
+
<p>There is multiple way to make them responsive, but a simple one is to change the CSS custom properties as:</p>
|
|
102
|
+
|
|
103
|
+
<doc-code data-type="scss">
|
|
104
|
+
--grid-columns: 6; // The maximum number of columns
|
|
105
|
+
--grid-min-column-size: 120px; // The minimum width of a column
|
|
106
|
+
</doc-code>
|
|
107
|
+
|
|
108
|
+
<doc-demo>
|
|
109
|
+
<div class="grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
|
|
89
110
|
<div>1</div>
|
|
90
111
|
<div>2</div>
|
|
91
112
|
<div>3</div>
|
|
@@ -94,23 +115,13 @@
|
|
|
94
115
|
<div>6</div>
|
|
95
116
|
<div>7</div>
|
|
96
117
|
<div>8</div>
|
|
97
|
-
<div>9</div>
|
|
98
|
-
<div>10</div>
|
|
99
|
-
<div>11</div>
|
|
100
|
-
<div>12</div>
|
|
101
118
|
</div>
|
|
102
|
-
</doc-
|
|
103
|
-
|
|
104
|
-
<h2>Responsive</h2>
|
|
105
|
-
|
|
106
|
-
<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>
|
|
107
|
-
|
|
108
|
-
<h3>Auto-fill</h3>
|
|
119
|
+
</doc-demo>
|
|
109
120
|
|
|
110
|
-
<p>
|
|
121
|
+
<p>Same thing for the Flex grid:</p>
|
|
111
122
|
|
|
112
123
|
<doc-demo>
|
|
113
|
-
<div class="grid" style="--grid-columns:
|
|
124
|
+
<div class="flex-grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
|
|
114
125
|
<div>1</div>
|
|
115
126
|
<div>2</div>
|
|
116
127
|
<div>3</div>
|
|
@@ -119,10 +130,6 @@
|
|
|
119
130
|
<div>6</div>
|
|
120
131
|
<div>7</div>
|
|
121
132
|
<div>8</div>
|
|
122
|
-
<div>9</div>
|
|
123
|
-
<div>10</div>
|
|
124
|
-
<div>11</div>
|
|
125
|
-
<div>12</div>
|
|
126
133
|
</div>
|
|
127
134
|
</doc-demo>
|
|
128
135
|
|
|
@@ -130,10 +137,10 @@
|
|
|
130
137
|
|
|
131
138
|
<h3>Offset</h3>
|
|
132
139
|
|
|
133
|
-
<p>To make a column ossfet with <code>.grid</code>, change the properties <code>grid-column-start</code> and <code>grid-column-end</code>
|
|
140
|
+
<p>To make a column ossfet with <code>.grid</code>, change the properties <code>--grid-min-columns</code> to a fixed number, and add the properties <code>grid-column-start</code> and <code>grid-column-end</code> into the column.</p>
|
|
134
141
|
|
|
135
142
|
<doc-demo>
|
|
136
|
-
<div class="grid" style="--grid-columns:4">
|
|
143
|
+
<div class="grid" style="--grid-min-columns:4">
|
|
137
144
|
<div>Grid 1</div>
|
|
138
145
|
<div>Grid 2</div>
|
|
139
146
|
<div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
|
|
@@ -171,47 +178,6 @@
|
|
|
171
178
|
<div id="flexGridDemoWider">Wider</div>
|
|
172
179
|
</div>
|
|
173
180
|
</doc-demo>
|
|
174
|
-
|
|
175
|
-
<h3>Auto</h3>
|
|
176
|
-
|
|
177
|
-
<p>Both grids support auto column but are triggered by different CSS custom properties.</p>
|
|
178
|
-
|
|
179
|
-
<p>For <code>.grid</code> use the property <code>--grid-columns:auto-fit</code>.</p>
|
|
180
|
-
|
|
181
|
-
<doc-demo>
|
|
182
|
-
<div class="grid" style="--grid-columns:auto-fit">
|
|
183
|
-
<div>Grid 1</div>
|
|
184
|
-
<div>Grid 2</div>
|
|
185
|
-
<div>Grid 3</div>
|
|
186
|
-
<div>Grid 4</div>
|
|
187
|
-
</div>
|
|
188
|
-
</doc-demo>
|
|
189
|
-
|
|
190
|
-
<p>And for the <code>.flex-grid</code> use the property <code>--grid-grow:1</code>.</p>
|
|
191
|
-
|
|
192
|
-
<doc-demo>
|
|
193
|
-
<div class="flex-grid" style="--grid-grow:1">
|
|
194
|
-
<div>Flex 1</div>
|
|
195
|
-
<div>Flex 2</div>
|
|
196
|
-
<div>Flex 3</div>
|
|
197
|
-
<div>Flex 4</div>
|
|
198
|
-
</div>
|
|
199
|
-
</doc-demo>
|
|
200
|
-
|
|
201
|
-
<h2>Customization</h2>
|
|
202
|
-
|
|
203
|
-
<p>Both grid can be customize via CSS custom property.</p>
|
|
204
|
-
|
|
205
|
-
<doc-code data-type="css">
|
|
206
|
-
--grid-gap-block
|
|
207
|
-
--grid-gap-inline
|
|
208
|
-
--grid-justify
|
|
209
|
-
--grid-align
|
|
210
|
-
--grid-columns
|
|
211
|
-
--grid-grow /* only for .flex-grid */
|
|
212
|
-
--grid-column-size /* only for .grid */
|
|
213
|
-
</doc-code>
|
|
214
|
-
|
|
215
181
|
</doc-layout>
|
|
216
182
|
<script type="module" src="/main.js"></script>
|
|
217
183
|
</body>
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.2.
|
|
21
|
+
0.2.1
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
///
|
|
12
12
|
////
|
|
13
13
|
|
|
14
|
+
$grid-column-max-calc: calc((100% - var(--grid-gap-inline, 1rem) * (var(--grid-columns, 12) - 1)) / var(--grid-columns, 12));
|
|
15
|
+
$grid-column-min-calc: min(max($grid-column-max-calc, var(--grid-min-column-size, 0%)), 100%);
|
|
16
|
+
|
|
14
17
|
.grid,
|
|
15
18
|
.flex-grid {
|
|
16
19
|
gap: var(--grid-gap-block, 1rem) var(--grid-gap-inline, 1rem);
|
|
@@ -20,7 +23,7 @@
|
|
|
20
23
|
|
|
21
24
|
.grid {
|
|
22
25
|
display: grid;
|
|
23
|
-
grid-template-columns: repeat(var(--grid-columns,
|
|
26
|
+
grid-template-columns: repeat(var(--grid-min-columns, auto-fit), minmax($grid-column-min-calc, 1fr));
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
.flex-grid {
|
|
@@ -28,9 +31,7 @@
|
|
|
28
31
|
flex-wrap: wrap;
|
|
29
32
|
|
|
30
33
|
> * {
|
|
31
|
-
|
|
32
|
-
flex-
|
|
33
|
-
flex-grow: var(--grid-grow, 0);
|
|
34
|
+
flex-basis: $grid-column-min-calc;
|
|
35
|
+
flex-grow: var(--grid-grow, 1);
|
|
34
36
|
}
|
|
35
|
-
|
|
36
37
|
}
|
|
Binary file
|