kempo-css 2.1.3 → 2.1.5

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.
Files changed (42) hide show
  1. package/.vscode/settings.json +2 -0
  2. package/CHANGELOG.md +12 -0
  3. package/dist/kempo.min.css +1 -1
  4. package/docs/borders-spacing.html +446 -0
  5. package/docs/buttons.html +262 -0
  6. package/docs/colors.html +199 -0
  7. package/docs/components/ThemePropertyInput.js +2 -2
  8. package/docs/elevation.html +509 -0
  9. package/docs/examples/responsive-grid.html +1 -1
  10. package/docs/index.html +237 -1477
  11. package/docs/inputs.html +252 -0
  12. package/docs/kempo.css +13 -0
  13. package/docs/kempo.min.css +1 -1
  14. package/docs/layout.html +311 -0
  15. package/docs/tables.html +262 -0
  16. package/docs/theme-editor.html +936 -802
  17. package/docs/typography.html +275 -0
  18. package/docs/utilities.html +172 -0
  19. package/docs-src/.config.js +26 -0
  20. package/docs-src/borders-spacing.page.html +297 -0
  21. package/docs-src/buttons.page.html +113 -0
  22. package/docs-src/colors.page.html +50 -0
  23. package/docs-src/default.template.html +22 -0
  24. package/docs-src/elevation.page.html +361 -0
  25. package/docs-src/examples/responsive-grid.html +33 -0
  26. package/docs-src/head.fragment.html +16 -0
  27. package/docs-src/index.page.html +95 -0
  28. package/docs-src/inputs.page.html +103 -0
  29. package/docs-src/layout.page.html +163 -0
  30. package/docs-src/nav.fragment.html +116 -0
  31. package/docs-src/tables.page.html +114 -0
  32. package/docs-src/theme-editor.page.html +850 -0
  33. package/docs-src/theme-editor.template.html +11 -0
  34. package/docs-src/typography.page.html +126 -0
  35. package/docs-src/utilities.page.html +26 -0
  36. package/llms.txt +2 -0
  37. package/package.json +3 -2
  38. package/scripts/build.js +7 -1
  39. package/src/kempo.css +13 -0
  40. package/tests/typography.browser-test.js +26 -0
  41. package/docs/init.js +0 -4
  42. package/docs/nav.js +0 -33
package/docs/borders-spacing.html ADDED
@@ -0,0 +1,446 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Borders & Spacing - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
51
+ <a href="./typography.html#lists" class="d-b">Lists</a>
52
+ </div>
53
+ <h5><a href="./layout.html">Layout</a></h5>
54
+ <div class="ml mb -mt">
55
+ <a href="./layout.html#display" class="d-b">Display</a>
56
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
57
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
58
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
59
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
60
+ </div>
61
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
62
+ <div class="ml mb -mt">
63
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
64
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
65
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
66
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
67
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
68
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
69
+ </div>
70
+ <h5><a href="./inputs.html">Inputs</a></h5>
71
+ <div class="ml mb -mt">
72
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
73
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
74
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
75
+ </div>
76
+ <h5><a href="./buttons.html">Buttons</a></h5>
77
+ <div class="ml mb -mt">
78
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
79
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
80
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
81
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
82
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
83
+ </div>
84
+ <h5><a href="./tables.html">Tables</a></h5>
85
+ <div class="ml mb -mt">
86
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
87
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
88
+ </div>
89
+ <h5><a href="./colors.html">Colors</a></h5>
90
+ <div class="ml mb -mt">
91
+ <a href="./colors.html#background" class="d-b">Background</a>
92
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
93
+ </div>
94
+ <h5><a href="./elevation.html">Elevation</a></h5>
95
+ <div class="ml mb -mt">
96
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
97
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
98
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
99
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
100
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
101
+ </div>
102
+ <h5><a href="./utilities.html">Utilities</a></h5>
103
+ <div class="ml mb -mt">
104
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
105
+ </div>
106
+ <hr />
107
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
108
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
109
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
110
+ <div style="height:33vh"></div>
111
+ </menu>
112
+ </k-aside>
113
+ <script type="module">
114
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
115
+ await window.customElements.whenDefined('k-aside');
116
+ document.getElementById('navSideMenu').toggle();
117
+ });
118
+ document.addEventListener('click', function(e) {
119
+ if (e.target.matches('a[href^="#"]')) {
120
+ e.preventDefault();
121
+ const targetId = e.target.getAttribute('href').replace('#', '');
122
+ const target = document.getElementById(targetId);
123
+ if (target) {
124
+ target.scrollIntoView({ behavior: 'smooth' });
125
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
126
+ document.getElementById('navSideMenu').hide();
127
+ }
128
+ }
129
+ });
130
+ const fixedNav = document.querySelector('k-nav[fixed]');
131
+ if (fixedNav) {
132
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
133
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
134
+ updateNavShadow();
135
+ }
136
+ </script>
137
+
138
+ <k-main>
139
+ <main>
140
+ <h1 class="ta-center">Borders & Spacing</h1>
141
+
142
+ <h3 id="borders">Borders</h3>
143
+ <div class="row -mx">
144
+ <div class="col m-span-12 px">
145
+ <k-card label="HTML">
146
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span>b<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bt"</span>&gt;</span>bt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"br"</span>&gt;</span>br<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bb"</span>&gt;</span>bb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bl"</span>&gt;</span>bl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bx"</span>&gt;</span>bx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"by"</span>&gt;</span>by<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
147
+ </k-card>
148
+ </div>
149
+ <div class="col m-span-12 px">
150
+ <k-card label="Output*">
151
+ <div class="d-ib bg-alt p mr mb b">b</div>
152
+ <div class="d-ib bg-alt p mr mb bt">bt</div>
153
+ <div class="d-ib bg-alt p mr mb br">br</div>
154
+ <div class="d-ib bg-alt p mr mb bb">bb</div>
155
+ <div class="d-ib bg-alt p mr mb bl">bl</div>
156
+ <div class="d-ib bg-alt p mr mb bx">bx</div>
157
+ <div class="d-ib bg-alt p mr mb by">by</div>
158
+ </k-card>
159
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
160
+ </div>
161
+ </div>
162
+
163
+ <h3 id="border-radius">Border Radius</h3>
164
+ <div class="row -mx">
165
+ <div class="col m-span-12 px">
166
+ <k-card label="HTML">
167
+ <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- All corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"r"</span>&gt;</span>r<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"round"</span>&gt;</span>round<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Individual corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtl"</span>&gt;</span>rtl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtr"</span>&gt;</span>rtr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbr"</span>&gt;</span>rbr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbl"</span>&gt;</span>rbl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Side combinations --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rt"</span>&gt;</span>rt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rb"</span>&gt;</span>rb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rl"</span>&gt;</span>rl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rr"</span>&gt;</span>rr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
168
+ </k-card>
169
+ </div>
170
+ <div class="col m-span-12 px">
171
+ <k-card label="Output*">
172
+ <div class="mb">
173
+ <div class="d-ib bg-alt p mr mb b r">r</div>
174
+ <div class="d-ib bg-alt p mr mb b round">round</div>
175
+ </div>
176
+ <div class="mb">
177
+ <div class="d-ib bg-alt p mr mb b rtl">rtl</div>
178
+ <div class="d-ib bg-alt p mr mb b rtr">rtr</div>
179
+ <div class="d-ib bg-alt p mr mb b rbr">rbr</div>
180
+ <div class="d-ib bg-alt p mr mb b rbl">rbl</div>
181
+ </div>
182
+ <div>
183
+ <div class="d-ib bg-alt p mr mb b rt">rt</div>
184
+ <div class="d-ib bg-alt p mr mb b rb">rb</div>
185
+ <div class="d-ib bg-alt p mr mb b rl">rl</div>
186
+ <div class="d-ib bg-alt p mr mb b rr">rr</div>
187
+ </div>
188
+ </k-card>
189
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
190
+ </div>
191
+ </div>
192
+ <h3>Border Radius Classes</h3>
193
+ <table>
194
+ <thead>
195
+ <tr>
196
+ <th>Class</th>
197
+ <th>Description</th>
198
+ </tr>
199
+ </thead>
200
+ <tbody>
201
+ <tr>
202
+ <td><code>r</code></td>
203
+ <td>All corners (0.25rem)</td>
204
+ </tr>
205
+ <tr>
206
+ <td><code>round</code></td>
207
+ <td>Fully rounded (9999rem)</td>
208
+ </tr>
209
+ <tr>
210
+ <td><code>rtl</code></td>
211
+ <td>Top-left corner only</td>
212
+ </tr>
213
+ <tr>
214
+ <td><code>rtr</code></td>
215
+ <td>Top-right corner only</td>
216
+ </tr>
217
+ <tr>
218
+ <td><code>rbr</code></td>
219
+ <td>Bottom-right corner only</td>
220
+ </tr>
221
+ <tr>
222
+ <td><code>rbl</code></td>
223
+ <td>Bottom-left corner only</td>
224
+ </tr>
225
+ <tr>
226
+ <td><code>rt</code></td>
227
+ <td>Top corners (left + right)</td>
228
+ </tr>
229
+ <tr>
230
+ <td><code>rb</code></td>
231
+ <td>Bottom corners (left + right)</td>
232
+ </tr>
233
+ <tr>
234
+ <td><code>rl</code></td>
235
+ <td>Left corners (top + bottom)</td>
236
+ </tr>
237
+ <tr>
238
+ <td><code>rr</code></td>
239
+ <td>Right corners (top + bottom)</td>
240
+ </tr>
241
+ </tbody>
242
+ </table>
243
+ <p class="mt">
244
+ <small><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
245
+ <code>r0</code>, <code>rt0</code>) to cancel border radius.</small>
246
+ </p>
247
+
248
+ <h2 id="padding">Padding</h2>
249
+
250
+ <k-card>
251
+ <h3>Color Legend</h3>
252
+ <ul>
253
+ <li><strong style="color: #00ff00">Green</strong> = Padding</li>
254
+ <li><strong style="color: #ff8c00">Orange</strong> = Margins</li>
255
+ <li>
256
+ <strong style="color: #ff0000">Red</strong> = Negative Margins
257
+ </li>
258
+ <li>
259
+ <strong style="color: #ff0000">Red Border</strong> = Cancelled
260
+ Margins
261
+ </li>
262
+ </ul>
263
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
264
+ </k-card>
265
+
266
+ <div class="row -mx">
267
+ <div class="col m-span-12 px">
268
+ <k-card label="HTML">
269
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>p<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt"</span>&gt;</span>pt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pr"</span>&gt;</span>pr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb"</span>&gt;</span>pb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pl"</span>&gt;</span>pl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px"</span>&gt;</span>px<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py"</span>&gt;</span>py<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
270
+ </k-card>
271
+ </div>
272
+ <div class="col m-span-12 px">
273
+ <k-card label="Output*">
274
+ <div class="d-ib bg-success mx mb p">
275
+ <div class="d-ib bg-alt pq">p</div>
276
+ </div>
277
+ <div class="d-ib bg-success mx mb pt">
278
+ <div class="d-ib bg-alt pq">pt</div>
279
+ </div>
280
+ <div class="d-ib bg-success mx mb pr">
281
+ <div class="d-ib bg-alt pq">pr</div>
282
+ </div>
283
+ <div class="d-ib bg-success mx mb pb">
284
+ <div class="d-ib bg-alt pq">pb</div>
285
+ </div>
286
+ <div class="d-ib bg-success mx mb pl">
287
+ <div class="d-ib bg-alt pq">pl</div>
288
+ </div>
289
+ <div class="d-ib bg-success mx mb px">
290
+ <div class="d-ib bg-alt pq">px</div>
291
+ </div>
292
+ <div class="d-ib bg-success mx mb py">
293
+ <div class="d-ib bg-alt pq">py</div>
294
+ </div>
295
+ </k-card>
296
+ </div>
297
+ </div>
298
+
299
+ <h3 id="margins">Margins</h3>
300
+ <div class="row -mx">
301
+ <div class="col m-span-12 px">
302
+ <k-card label="HTML">
303
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>m<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt"</span>&gt;</span>mt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr"</span>&gt;</span>mr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>mb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml"</span>&gt;</span>ml<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx"</span>&gt;</span>mx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
304
+ </k-card>
305
+ </div>
306
+ <div class="col m-span-12 px">
307
+ <k-card label="Output*">
308
+ <div class="d-ib bg-warning mx mb p">
309
+ <div class="d-ib bg-alt pq">m</div>
310
+ </div>
311
+ <div class="d-ib bg-warning mx mb pt">
312
+ <div class="d-ib bg-alt pq">mt</div>
313
+ </div>
314
+ <div class="d-ib bg-warning mx mb pr">
315
+ <div class="d-ib bg-alt pq">mr</div>
316
+ </div>
317
+ <div class="d-ib bg-warning mx mb pb">
318
+ <div class="d-ib bg-alt pq">mb</div>
319
+ </div>
320
+ <div class="d-ib bg-warning mx mb pl">
321
+ <div class="d-ib bg-alt pq">ml</div>
322
+ </div>
323
+ <div class="d-ib bg-warning mx mb px">
324
+ <div class="d-ib bg-alt pq">mx</div>
325
+ </div>
326
+ <div class="d-ib bg-warning mx mb py">
327
+ <div class="d-ib bg-alt pq">my</div>
328
+ </div>
329
+ </k-card>
330
+ </div>
331
+ </div>
332
+
333
+ <h3 id="negative-margins">Negative Margins</h3>
334
+ <div class="row -mx">
335
+ <div class="col m-span-12 px">
336
+ <k-card label="HTML">
337
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-m"</span>&gt;</span>-m<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mt"</span>&gt;</span>-mt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mr"</span>&gt;</span>-mr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mb"</span>&gt;</span>-mb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-ml"</span>&gt;</span>-ml<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mx"</span>&gt;</span>-mx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-my"</span>&gt;</span>-my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
338
+ </k-card>
339
+ </div>
340
+ <div class="col m-span-12 px">
341
+ <k-card label="Output*">
342
+ <div class="d-ib bg-danger mx mb p">
343
+ <div class="d-ib bg-alt pq">-m</div>
344
+ </div>
345
+ <div class="d-ib bg-danger mx mb pt">
346
+ <div class="d-ib bg-alt pq">-mt</div>
347
+ </div>
348
+ <div class="d-ib bg-danger mx mb pr">
349
+ <div class="d-ib bg-alt pq">-mr</div>
350
+ </div>
351
+ <div class="d-ib bg-danger mx mb pb">
352
+ <div class="d-ib bg-alt pq">-mb</div>
353
+ </div>
354
+ <div class="d-ib bg-danger mx mb pl">
355
+ <div class="d-ib bg-alt pq">-ml</div>
356
+ </div>
357
+ <div class="d-ib bg-danger mx mb px">
358
+ <div class="d-ib bg-alt pq">-mx</div>
359
+ </div>
360
+ <div class="d-ib bg-danger mx mb py">
361
+ <div class="d-ib bg-alt pq">-my</div>
362
+ </div>
363
+ </k-card>
364
+ </div>
365
+ </div>
366
+
367
+ <h3 id="cancelled-margins">Cancelled Margins</h3>
368
+ <div class="row -mx">
369
+ <div class="col m-span-12 px">
370
+ <k-card label="HTML">
371
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m m0"</span>&gt;</span>m m0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mt0"</span>&gt;</span>m mt0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mr0"</span>&gt;</span>m mr0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mb0"</span>&gt;</span>m mb0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m ml0"</span>&gt;</span>m ml0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mx0"</span>&gt;</span>m mx0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m my0"</span>&gt;</span>m my0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
372
+ </k-card>
373
+ </div>
374
+ <div class="col m-span-12 px">
375
+ <k-card label="Output*">
376
+ <div class="d-ib bg-warning mx mb">
377
+ <div
378
+ class="d-ib bg-alt pq b"
379
+ style="border-color: var(--c_danger) !important"
380
+ >
381
+ m m0
382
+ </div>
383
+ </div>
384
+ <div class="d-ib bg-warning mx mb px pb">
385
+ <div
386
+ class="d-ib bg-alt pq bt"
387
+ style="border-color: var(--c_danger) !important"
388
+ >
389
+ m mt0
390
+ </div>
391
+ </div>
392
+ <div class="d-ib bg-warning mx mb py pl">
393
+ <div
394
+ class="d-ib bg-alt pq br"
395
+ style="border-color: var(--c_danger) !important"
396
+ >
397
+ m mr0
398
+ </div>
399
+ </div>
400
+ <div class="d-ib bg-warning mx mb px pt">
401
+ <div
402
+ class="d-ib bg-alt pq bb"
403
+ style="border-color: var(--c_danger) !important"
404
+ >
405
+ m mb0
406
+ </div>
407
+ </div>
408
+ <div class="d-ib bg-warning mx mb py pr">
409
+ <div
410
+ class="d-ib bg-alt pq bl"
411
+ style="border-color: var(--c_danger) !important"
412
+ >
413
+ m ml0
414
+ </div>
415
+ </div>
416
+ <div class="d-ib bg-warning mx mb py">
417
+ <div
418
+ class="d-ib bg-alt pq bx"
419
+ style="border-color: var(--c_danger) !important"
420
+ >
421
+ m mx0
422
+ </div>
423
+ </div>
424
+ <div class="d-ib bg-warning mx mb px">
425
+ <div
426
+ class="d-ib bg-alt pq by"
427
+ style="border-color: var(--c_danger) !important"
428
+ >
429
+ m my0
430
+ </div>
431
+ </div>
432
+ </k-card>
433
+ </div>
434
+ </div>
435
+
436
+ </main>
437
+ <div style="height:33vh"></div>
438
+ </k-main>
439
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
440
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
441
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
442
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
443
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
444
+
445
+ </body>
446
+ </html>