kempo-css 1.0.0
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/LICENSE +21 -0
- package/README.md +97 -0
- package/build.js +101 -0
- package/index.html +1327 -0
- package/kempo-hljs.css +125 -0
- package/kempo.css +1021 -0
- package/package.json +17 -0
package/index.html
ADDED
|
@@ -0,0 +1,1327 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Essential CSS</title>
|
|
7
|
+
<link rel="stylesheet" href="./essential.css" />
|
|
8
|
+
<link rel="stylesheet" href="./essential-hljs.css" />
|
|
9
|
+
<style>
|
|
10
|
+
main {
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
#theme-sticky {
|
|
14
|
+
display: block;
|
|
15
|
+
position: sticky;
|
|
16
|
+
top: 1rem;
|
|
17
|
+
container-type: scroll-state;
|
|
18
|
+
float: right;
|
|
19
|
+
|
|
20
|
+
> theme-btn button {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
will-change: opacity box-shadow;
|
|
23
|
+
transition: opacity var(--animation_ms, 256ms),
|
|
24
|
+
box-shadow var(--animation_ms, 256ms);
|
|
25
|
+
box-shadow: 0 0 0 transparent;
|
|
26
|
+
|
|
27
|
+
@container scroll-state(stuck: top) {
|
|
28
|
+
opacity: 0.7;
|
|
29
|
+
box-shadow: var(--drop_shadow);
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
opacity: 1;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<main>
|
|
41
|
+
<div id="theme-sticky">
|
|
42
|
+
<theme-btn>
|
|
43
|
+
<button></button>
|
|
44
|
+
</theme-btn>
|
|
45
|
+
</div>
|
|
46
|
+
<h1 class="ta-center">Essential CSS</h1>
|
|
47
|
+
<div class="mb">
|
|
48
|
+
<div class="card p mb">
|
|
49
|
+
<h2 class="mt0">How to use Essential CSS</h2>
|
|
50
|
+
|
|
51
|
+
<div class="mb">
|
|
52
|
+
<h4>NPM</h4>
|
|
53
|
+
<pre><code class="d-block mb-sm">npm install essentialcss</code></pre>
|
|
54
|
+
<p>Then include it in your build system, or import it directly from <code>node_modules/essentialcss/dist/essential.css</code>.</p>
|
|
55
|
+
</div>
|
|
56
|
+
<hr />
|
|
57
|
+
<h4>Direct Download</h4>
|
|
58
|
+
<a href="./essential.css" download="essential.css" class="btn primary mb">
|
|
59
|
+
Download essential.css
|
|
60
|
+
</a><br />
|
|
61
|
+
<a href="./essential-hljs.css" download="essential-hljs.css" class="btn secondary mb">
|
|
62
|
+
Download essential-hljs.css
|
|
63
|
+
</a><br />
|
|
64
|
+
<a href="https://github.com/dustinpoissant/essential-css" target="_blank" class="btn">
|
|
65
|
+
<svg height="1.15em" viewBox="0 0 173.18974 46.836636"xmlns="http://www.w3.org/2000/svg"><path fill="#0f0e0f" d="M 19.681725,2.6489257e-8 C 9.9664034,2.6489257e-8 3.7329102e-7,4.133725 3.7329102e-7,24.004338 3.7329102e-7,43.87543 11.41032,46.836632 21.025631,46.836632 c 7.961227,0 12.790338,-3.402023 12.790338,-3.402023 0.199066,-0.109629 0.221166,-0.388163 0.221166,-0.515586 V 20.726985 c 0,-0.375534 -0.304869,-0.680404 -0.680402,-0.680404 H 18.803398 c -0.375535,0 -0.680406,0.30487 -0.680406,0.680404 v 7.115371 c 0,0.375533 0.304871,0.681108 0.680406,0.681108 h 5.677081 v 8.84033 c 0,0 -1.274214,0.43388 -4.798754,0.43388 -4.157802,0 -9.9665886,-1.518345 -9.9665886,-14.291314 0,-12.775371 6.0485566,-14.456837 11.7267656,-14.456837 4.915121,0 7.032378,0.86574 8.379683,1.282626 0.423618,0.129343 0.815642,-0.292192 0.815642,-0.667726 l 1.623532,-6.874482 c 0,-0.175983 -0.05988,-0.388016 -0.259906,-0.531787 C 31.453659,1.867714 28.115616,2.6489257e-8 19.681725,2.6489257e-8 Z M 77.169581,1.696786 c -0.372654,0 -0.676181,0.305506 -0.676181,0.683926 v 42.880284 c 0,0.377938 0.303527,0.685335 0.676181,0.685335 h 8.194438 c 0.375052,0 0.676181,-0.307397 0.676181,-0.685335 V 26.919652 h 12.772731 c 0,0 -0.0219,18.339901 -0.0219,18.341344 0,0.377938 0.30347,0.685335 0.679,0.685335 h 8.213449 c 0.37505,0 0.67522,-0.307397 0.67618,-0.685335 V 2.380712 c 0,-0.37842 -0.29994,-0.683926 -0.67547,-0.683926 h -8.194439 c -0.37457,0 -0.6783,0.305506 -0.6783,0.683926 l 0.002,15.836664 H 86.0402 V 2.380712 c 0,-0.37842 -0.30112,-0.683926 -0.676172,-0.683926 z m 67.904519,0 c -0.37361,0 -0.67759,0.305506 -0.67759,0.683926 v 42.880284 c 0,0.378418 0.30372,0.686039 0.67829,0.686039 h 5.70174 c 0.25676,0 0.45141,-0.132379 0.59518,-0.36415 0.14185,-0.230323 0.34584,-1.977117 0.34584,-1.977117 0,0 3.36047,3.184376 9.72147,3.184376 7.46837,0 11.75072,-3.788626 11.75072,-17.005889 0,-13.217261 -6.84012,-14.944248 -11.46193,-14.944248 -4.61845,0 -7.75986,2.060935 -7.75986,2.060935 V 2.380712 c 0,-0.37842 -0.30305,-0.683926 -0.67618,-0.683926 z M 43.536035,2.673019 c -2.915798,0 -5.28335,2.384348 -5.28335,5.334766 0,2.947533 2.367552,5.338289 5.28335,5.338289 2.918684,0 5.284054,-2.390756 5.284054,-5.338289 0,-2.950418 -2.36537,-5.334766 -5.284054,-5.334766 z m 13.20309,4.480387 c -0.325527,0 -0.500089,0.143395 -0.500089,0.45642 v 8.391657 c 0,0 -4.198103,1.013046 -4.481798,1.095268 -0.282732,0.08174 -0.490933,0.342537 -0.490933,0.653639 v 5.273489 c 0,0.378899 0.303016,0.68463 0.677588,0.68463 h 4.295143 v 12.6868 c 0,9.422492 6.609133,10.348349 11.068901,10.348349 2.038269,0 4.476588,-0.654384 4.87905,-0.802963 0.243303,-0.08943 0.38528,-0.341783 0.38528,-0.6149 l 0.0064,-5.801048 c 0,-0.378418 -0.319329,-0.684631 -0.678995,-0.684631 -0.358225,0 -1.275308,0.145097 -2.218711,0.145097 -3.019179,0 -4.04228,-1.403214 -4.04228,-3.220299 V 23.708509 h 6.146885 c 0.374574,0 0.678996,-0.305731 0.678996,-0.68463 v -6.605418 c 0,-0.37842 -0.304422,-0.683224 -0.678996,-0.683224 h -6.146883 c 0,0 -0.0091,-8.119262 -0.0091,-8.121185 0,-0.307256 -0.158356,-0.460646 -0.514178,-0.460646 z m -17.351023,8.585353 c -0.375053,0 -0.71069,0.386095 -0.71069,0.762109 v 28.358647 c 0,0.83281 0.519552,1.08118 1.191764,1.08118 h 7.359781 c 0.807326,0 1.005111,-0.396869 1.005111,-1.094563 V 36.215698 16.421982 c 0,-0.375534 -0.302536,-0.683223 -0.677588,-0.683223 z m 73.668948,0.0648 c -0.37217,0 -0.67759,0.306915 -0.67759,0.685333 V 36.21288 c 0,8.527652 4.75283,10.613889 11.29077,10.613889 5.36423,0 9.68837,-2.963916 9.68837,-2.963916 0,0 0.20559,1.562375 0.29936,1.747499 0.0928,0.184642 0.33545,0.371195 0.59799,0.371195 l 5.25024,-0.02325 c 0.37217,0 0.67759,-0.307655 0.67759,-0.684632 l -0.003,-28.784778 c 0,-0.378418 -0.30373,-0.685334 -0.67831,-0.685334 h -8.13167 c -0.37314,0 -0.67618,0.306916 -0.67618,0.685334 v 21.025629 c 0,0 -2.06665,1.511541 -4.99879,1.511541 -2.93215,0 -3.70982,-1.330382 -3.70982,-4.201462 v -18.33571 c 0,-0.378418 -0.30306,-0.685334 -0.67619,-0.685334 z m 46.02028,6.852646 c 2.5018,0.0892 4.66211,1.530523 4.66211,7.64293 0,7.36595 -1.27349,8.820115 -5.21925,8.700868 -2.8206,-0.08607 -4.73324,-1.36574 -4.73324,-1.36574 V 24.055057 c 0,0 1.88715,-1.156867 4.20286,-1.363627 0.36604,-0.03276 0.73012,-0.04795 1.08752,-0.03522 z" /></svg>
|
|
66
|
+
</a>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<details class="card mb p0">
|
|
71
|
+
<summary class="p">Table Of Contents</summary>
|
|
72
|
+
<div class="mb bt">
|
|
73
|
+
<details>
|
|
74
|
+
<summary class="ml pl">
|
|
75
|
+
<a href="#typography" class="d-ib pyh pxq">Typography</a>
|
|
76
|
+
</summary>
|
|
77
|
+
<div class="pl">
|
|
78
|
+
<ul class="ml">
|
|
79
|
+
<li><a href="#paragraphs">Paragraphs</a></li>
|
|
80
|
+
<li><a href="#headings">Headings</a></li>
|
|
81
|
+
<li><a href="#textmarkup">Text Markup</a></li>
|
|
82
|
+
<li><a href="#lists">Lists</a></li>
|
|
83
|
+
</ul>
|
|
84
|
+
</div>
|
|
85
|
+
</details>
|
|
86
|
+
<details>
|
|
87
|
+
<summary class="ml pl">
|
|
88
|
+
<a href="#layout" class="d-ib pyh pxq">Layout</a>
|
|
89
|
+
</summary>
|
|
90
|
+
<div class="pl">
|
|
91
|
+
<ul class="ml">
|
|
92
|
+
<li><a href="#display">Display</a></li>
|
|
93
|
+
<li><a href="#flexbox">Flexbox</a></li>
|
|
94
|
+
<li><a href="#grid">Grid System</a></li>
|
|
95
|
+
<li><a href="#responsive-grid">Responsive Grid</a></li>
|
|
96
|
+
<li>
|
|
97
|
+
<a href="#min-width-grid">Alternative Responsive Grid</a>
|
|
98
|
+
</li>
|
|
99
|
+
</ul>
|
|
100
|
+
</div>
|
|
101
|
+
</details>
|
|
102
|
+
<details>
|
|
103
|
+
<summary class="ml pl">
|
|
104
|
+
<a href="#borders-spacing" class="d-ib pyh pxq"
|
|
105
|
+
>Borders & Spacing</a
|
|
106
|
+
>
|
|
107
|
+
</summary>
|
|
108
|
+
<div class="pl">
|
|
109
|
+
<ul class="ml">
|
|
110
|
+
<li><a href="#borders">Borders</a></li>
|
|
111
|
+
<li><a href="#border-radius">Border Radius</a></li>
|
|
112
|
+
<li><a href="#padding">Padding</a></li>
|
|
113
|
+
<li><a href="#margins">Margins</a></li>
|
|
114
|
+
<li><a href="#negative-margins">Negative Margins</a></li>
|
|
115
|
+
<li><a href="#cancelled-margins">Cancelled Margins</a></li>
|
|
116
|
+
</ul>
|
|
117
|
+
</div>
|
|
118
|
+
</details>
|
|
119
|
+
<details>
|
|
120
|
+
<summary class="ml pl">
|
|
121
|
+
<a href="#inputs" class="d-ib pyh pxq">Inputs</a>
|
|
122
|
+
</summary>
|
|
123
|
+
<div class="pl">
|
|
124
|
+
<ul class="ml">
|
|
125
|
+
<li><a href="#basic-inputs">Basic Inputs</a></li>
|
|
126
|
+
<li><a href="#labels">Labels</a></li>
|
|
127
|
+
<li><a href="#checkbox-radio">Checkbox / Radio</a></li>
|
|
128
|
+
</ul>
|
|
129
|
+
</div>
|
|
130
|
+
</details>
|
|
131
|
+
<details>
|
|
132
|
+
<summary class="ml pl">
|
|
133
|
+
<a href="#buttons" class="d-ib pyh pxq">Buttons</a>
|
|
134
|
+
</summary>
|
|
135
|
+
<div class="pl">
|
|
136
|
+
<ul class="ml">
|
|
137
|
+
<li><a href="#button-types">Button Types</a></li>
|
|
138
|
+
<li><a href="#button-colors">Button Colors</a></li>
|
|
139
|
+
<li><a href="#button-sizes">Button Sizes</a></li>
|
|
140
|
+
<li><a href="#button-groups">Button Groups</a></li>
|
|
141
|
+
<li><a href="#no-styles">No Styles</a></li>
|
|
142
|
+
</ul>
|
|
143
|
+
</div>
|
|
144
|
+
</details>
|
|
145
|
+
<details>
|
|
146
|
+
<summary class="ml pl">
|
|
147
|
+
<a href="#tables" class="d-ib pyh pxq">Tables</a>
|
|
148
|
+
</summary>
|
|
149
|
+
<div class="pl">
|
|
150
|
+
<ul class="ml">
|
|
151
|
+
<li><a href="#basic-table">Basic Table</a></li>
|
|
152
|
+
<li><a href="#responsive-table">Responsive Table</a></li>
|
|
153
|
+
</ul>
|
|
154
|
+
</div>
|
|
155
|
+
</details>
|
|
156
|
+
<details>
|
|
157
|
+
<summary class="ml pl">
|
|
158
|
+
<a href="#colors" class="d-ib pyh pxq">Colors</a>
|
|
159
|
+
</summary>
|
|
160
|
+
<div class="pl">
|
|
161
|
+
<ul class="ml">
|
|
162
|
+
<li><a href="#background">Background</a></li>
|
|
163
|
+
<li><a href="#text-colors">Text Colors</a></li>
|
|
164
|
+
</ul>
|
|
165
|
+
</div>
|
|
166
|
+
</details>
|
|
167
|
+
</div>
|
|
168
|
+
</details>
|
|
169
|
+
|
|
170
|
+
<h1 id="typography">Typography</h1>
|
|
171
|
+
|
|
172
|
+
<h2 id="paragraphs">Paragraphs</h2>
|
|
173
|
+
<div class="row -mx">
|
|
174
|
+
<div class="col m-span-12 px">
|
|
175
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
176
|
+
<div class="card">
|
|
177
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="col m-span-12 px">
|
|
181
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
182
|
+
<div class="card">
|
|
183
|
+
<p>
|
|
184
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
|
|
185
|
+
non unde laborum officia doloremque, repudiandae laudantium nihil!
|
|
186
|
+
Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit,
|
|
187
|
+
assumenda ipsa esse!
|
|
188
|
+
</p>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<h2 id="headings">Headings</h2>
|
|
194
|
+
<div class="row -mx">
|
|
195
|
+
<div class="col m-span-12 px">
|
|
196
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
197
|
+
<div class="card">
|
|
198
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h5</span>></span>Heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Heading 6<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="col m-span-12 px">
|
|
202
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
203
|
+
<div class="card">
|
|
204
|
+
<h1>Heading 1</h1>
|
|
205
|
+
<h2>Heading 2</h2>
|
|
206
|
+
<h3>Heading 3</h3>
|
|
207
|
+
<h4>Heading 4</h4>
|
|
208
|
+
<h5>Heading 5</h5>
|
|
209
|
+
<h6>Heading 6</h6>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<h2 id="textmarkup">Text Markup</h2>
|
|
215
|
+
<div class="row -mx">
|
|
216
|
+
<div class="col m-span-12 px">
|
|
217
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
218
|
+
<div class="card">
|
|
219
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>strong<span class="hljs-tag"></<span class="hljs-name">strong</span>></span> <span class="hljs-tag"><<span class="hljs-name">i</span>></span>italics<span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">del</span>></span>strike<span class="hljs-tag"></<span class="hljs-name">del</span>></span> <span class="hljs-tag"><<span class="hljs-name">u</span>></span>underline<span class="hljs-tag"></<span class="hljs-name">u</span>></span> <span class="hljs-tag"><<span class="hljs-name">sub</span>></span>sub<span class="hljs-tag"></<span class="hljs-name">sub</span>></span> Normal <span class="hljs-tag"><<span class="hljs-name">sup</span>></span>super<span class="hljs-tag"></<span class="hljs-name">sup</span>></span> <span class="hljs-tag"><<span class="hljs-name">b</span>></span>bold<span class="hljs-tag"></<span class="hljs-name">b</span>></span> <span class="hljs-tag"><<span class="hljs-name">mark</span>></span>highlighted<span class="hljs-tag"></<span class="hljs-name">mark</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="col m-span-12 px">
|
|
223
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
224
|
+
<div class="card">
|
|
225
|
+
<p>
|
|
226
|
+
<strong>strong</strong> <i>italics</i> <del>strike</del>
|
|
227
|
+
<u>underline</u> <sub>sub</sub> Normal <sup>super</sup>
|
|
228
|
+
<b>bold</b> <mark>highlighted</mark>
|
|
229
|
+
</p>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<h2 id="lists">Lists</h2>
|
|
235
|
+
<div class="row -mx">
|
|
236
|
+
<div class="col m-span-12 px">
|
|
237
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
238
|
+
<div class="card">
|
|
239
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="col m-span-12 px">
|
|
243
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
244
|
+
<div class="card">
|
|
245
|
+
<ol>
|
|
246
|
+
<li>Item 1</li>
|
|
247
|
+
<li>Item 2</li>
|
|
248
|
+
<li>
|
|
249
|
+
Item 3
|
|
250
|
+
<ol>
|
|
251
|
+
<li>Sub Item 1</li>
|
|
252
|
+
<li>Sub Item 2</li>
|
|
253
|
+
<li>Sub Item 3</li>
|
|
254
|
+
</ol>
|
|
255
|
+
</li>
|
|
256
|
+
</ol>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="row -mx">
|
|
261
|
+
<div class="col m-span-12 px">
|
|
262
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
263
|
+
<div class="card">
|
|
264
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="col m-span-12 px">
|
|
268
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
269
|
+
<div class="card">
|
|
270
|
+
<ul>
|
|
271
|
+
<li>Item 1</li>
|
|
272
|
+
<li>Item 2</li>
|
|
273
|
+
<li>
|
|
274
|
+
Item 3
|
|
275
|
+
<ul>
|
|
276
|
+
<li>Sub Item 1</li>
|
|
277
|
+
<li>Sub Item 2</li>
|
|
278
|
+
<li>Sub Item 3</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</li>
|
|
281
|
+
</ul>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<h1 id="layout">Layout</h1>
|
|
287
|
+
|
|
288
|
+
<h2 id="display">Display</h2>
|
|
289
|
+
<table class="mb">
|
|
290
|
+
<thead>
|
|
291
|
+
<tr>
|
|
292
|
+
<th>Class</th>
|
|
293
|
+
<th>CSS Value</th>
|
|
294
|
+
</tr>
|
|
295
|
+
</thead>
|
|
296
|
+
<tbody>
|
|
297
|
+
<tr>
|
|
298
|
+
<td><code>d-b</code></td>
|
|
299
|
+
<td>block</td>
|
|
300
|
+
</tr>
|
|
301
|
+
<tr>
|
|
302
|
+
<td><code>d-ib</code></td>
|
|
303
|
+
<td>inline-block</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr>
|
|
306
|
+
<td><code>d-i</code></td>
|
|
307
|
+
<td>inline</td>
|
|
308
|
+
</tr>
|
|
309
|
+
<tr>
|
|
310
|
+
<td><code>d-f</code></td>
|
|
311
|
+
<td>flex</td>
|
|
312
|
+
</tr>
|
|
313
|
+
<tr>
|
|
314
|
+
<td><code>d-if</code></td>
|
|
315
|
+
<td>inline-flex</td>
|
|
316
|
+
</tr>
|
|
317
|
+
</tbody>
|
|
318
|
+
</table>
|
|
319
|
+
|
|
320
|
+
<h2 id="flexbox">Flexbox</h2>
|
|
321
|
+
<div class="row -mx">
|
|
322
|
+
<div class="col m-span-12 px">
|
|
323
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
324
|
+
<div class="card">
|
|
325
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
326
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100px"</span>></span>100px<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
327
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
328
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
329
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
330
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
331
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
332
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
333
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
334
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
335
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-2"</span>></span>flex-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
336
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
337
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
338
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
339
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-3"</span>></span>flex-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
340
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="col m-span-12 px">
|
|
344
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
345
|
+
<div class="card pb">
|
|
346
|
+
<div class="d-f mb">
|
|
347
|
+
<div style="width: 100px" class="b pq mr">100px</div>
|
|
348
|
+
<div class="flex b pq">flex</div>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="d-f mb">
|
|
351
|
+
<div class="flex b pq mr">flex</div>
|
|
352
|
+
<div class="flex b pq">flex</div>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="d-f mb">
|
|
355
|
+
<div class="flex b pq mr">flex</div>
|
|
356
|
+
<div class="flex-2 b pq">flex-2</div>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="d-f">
|
|
359
|
+
<div class="flex b pq mr">flex</div>
|
|
360
|
+
<div class="flex-3 b pq">flex-3</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
|
|
366
|
+
<h2 id="grid">Grid System</h2>
|
|
367
|
+
<div class="row -mx">
|
|
368
|
+
<div class="col m-span-12 px">
|
|
369
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
370
|
+
<div class="card">
|
|
371
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
|
|
372
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
373
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
374
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
375
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
376
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
|
|
377
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-4"</span>></span>col span-4<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
378
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-8"</span>></span>col span-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
379
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
<div class="col m-span-12 px">
|
|
383
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
384
|
+
<div class="card pb">
|
|
385
|
+
<div class="row mb">
|
|
386
|
+
<div class="col b pq">col</div>
|
|
387
|
+
<div class="col b pq">col</div>
|
|
388
|
+
<div class="col b pq">col</div>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="row">
|
|
391
|
+
<div class="col span-4 b pq">col span-4</div>
|
|
392
|
+
<div class="col span-8 b pq">col span-8</div>
|
|
393
|
+
</div>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
|
|
398
|
+
<h3 id="responsive-grid">Responsive Grid</h3>
|
|
399
|
+
<div class="row -mx">
|
|
400
|
+
<div class="col m-span-12 px">
|
|
401
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
402
|
+
<div class="card">
|
|
403
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
|
|
404
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span>
|
|
405
|
+
col d-span-3 t-span-6 m-span-12
|
|
406
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
407
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span>
|
|
408
|
+
col d-span-3 t-span-6 m-span-12
|
|
409
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
410
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span>
|
|
411
|
+
col d-span-3 t-span-6 m-span-12
|
|
412
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
413
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span>
|
|
414
|
+
col d-span-3 t-span-6 m-span-12
|
|
415
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
416
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
<div class="col m-span-12 px">
|
|
420
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
421
|
+
<div class="card pb">
|
|
422
|
+
<div class="row">
|
|
423
|
+
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
424
|
+
col d-span-3 t-span-6 m-span-12
|
|
425
|
+
</div>
|
|
426
|
+
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
427
|
+
col d-span-3 t-span-6 m-span-12
|
|
428
|
+
</div>
|
|
429
|
+
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
430
|
+
col d-span-3 t-span-6 m-span-12
|
|
431
|
+
</div>
|
|
432
|
+
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
433
|
+
col d-span-3 t-span-6 m-span-12
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<h3 id="min-width-grid">Alternative Responsive Grid</h3>
|
|
441
|
+
<div class="row -mx">
|
|
442
|
+
<div class="col m-span-12 px">
|
|
443
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
444
|
+
<div class="card">
|
|
445
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
|
|
446
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 150px"</span>></span>
|
|
447
|
+
col, min-width: 150px
|
|
448
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
449
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 200px"</span>></span>
|
|
450
|
+
col, min-width: 200px
|
|
451
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
452
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 300px"</span>></span>
|
|
453
|
+
col, min-width: 300px
|
|
454
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
455
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
<div class="col m-span-12 px">
|
|
459
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
460
|
+
<div class="card pb">
|
|
461
|
+
<div class="row">
|
|
462
|
+
<div class="col b pq" style="min-width: 150px">
|
|
463
|
+
col, min-width: 150px
|
|
464
|
+
</div>
|
|
465
|
+
<div class="col b pq" style="min-width: 200px">
|
|
466
|
+
col, min-width: 200px
|
|
467
|
+
</div>
|
|
468
|
+
<div class="col b pq" style="min-width: 300px">
|
|
469
|
+
col, min-width: 300px
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<h2 id="borders-spacing">Borders & Spacing</h2>
|
|
477
|
+
|
|
478
|
+
<h3 id="borders">Borders</h3>
|
|
479
|
+
<div class="row -mx">
|
|
480
|
+
<div class="col m-span-12 px">
|
|
481
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
482
|
+
<div class="card">
|
|
483
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span>b<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
484
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bt"</span>></span>bt<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
485
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"br"</span>></span>br<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
486
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bb"</span>></span>bb<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
487
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bl"</span>></span>bl<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
488
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bx"</span>></span>bx<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
489
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"by"</span>></span>by<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="col m-span-12 px">
|
|
493
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
494
|
+
<div class="card">
|
|
495
|
+
<div class="d-ib bg-alt p mr mb b">b</div>
|
|
496
|
+
<div class="d-ib bg-alt p mr mb bt">bt</div>
|
|
497
|
+
<div class="d-ib bg-alt p mr mb br">br</div>
|
|
498
|
+
<div class="d-ib bg-alt p mr mb bb">bb</div>
|
|
499
|
+
<div class="d-ib bg-alt p mr mb bl">bl</div>
|
|
500
|
+
<div class="d-ib bg-alt p mr mb bx">bx</div>
|
|
501
|
+
<div class="d-ib bg-alt p mr mb by">by</div>
|
|
502
|
+
</div>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
<h3 id="border-radius">Border Radius</h3>
|
|
507
|
+
<div class="row -mx">
|
|
508
|
+
<div class="col m-span-12 px">
|
|
509
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
510
|
+
<div class="card">
|
|
511
|
+
<pre><code class="hljs xml"><span class="hljs-comment"><!-- All corners --></span>
|
|
512
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"r"</span>></span>r<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
513
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"round"</span>></span>round<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
514
|
+
|
|
515
|
+
<span class="hljs-comment"><!-- Individual corners --></span>
|
|
516
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtl"</span>></span>rtl<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
517
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtr"</span>></span>rtr<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
518
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbr"</span>></span>rbr<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
519
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbl"</span>></span>rbl<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
520
|
+
|
|
521
|
+
<span class="hljs-comment"><!-- Side combinations --></span>
|
|
522
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rt"</span>></span>rt<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
523
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rb"</span>></span>rb<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
524
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rl"</span>></span>rl<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
525
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rr"</span>></span>rr<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="col m-span-12 px">
|
|
529
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
530
|
+
<div class="card">
|
|
531
|
+
<div class="mb">
|
|
532
|
+
<div class="d-ib bg-alt p mr mb b r">r</div>
|
|
533
|
+
<div class="d-ib bg-alt p mr mb b round">round</div>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="mb">
|
|
536
|
+
<div class="d-ib bg-alt p mr mb b rtl">rtl</div>
|
|
537
|
+
<div class="d-ib bg-alt p mr mb b rtr">rtr</div>
|
|
538
|
+
<div class="d-ib bg-alt p mr mb b rbr">rbr</div>
|
|
539
|
+
<div class="d-ib bg-alt p mr mb b rbl">rbl</div>
|
|
540
|
+
</div>
|
|
541
|
+
<div>
|
|
542
|
+
<div class="d-ib bg-alt p mr mb b rt">rt</div>
|
|
543
|
+
<div class="d-ib bg-alt p mr mb b rb">rb</div>
|
|
544
|
+
<div class="d-ib bg-alt p mr mb b rl">rl</div>
|
|
545
|
+
<div class="d-ib bg-alt p mr mb b rr">rr</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
<h3>Border Radius Classes</h3>
|
|
551
|
+
<table>
|
|
552
|
+
<thead>
|
|
553
|
+
<tr>
|
|
554
|
+
<th>Class</th>
|
|
555
|
+
<th>Description</th>
|
|
556
|
+
</tr>
|
|
557
|
+
</thead>
|
|
558
|
+
<tbody>
|
|
559
|
+
<tr>
|
|
560
|
+
<td><code>r</code></td>
|
|
561
|
+
<td>All corners (0.25rem)</td>
|
|
562
|
+
</tr>
|
|
563
|
+
<tr>
|
|
564
|
+
<td><code>round</code></td>
|
|
565
|
+
<td>Fully rounded (9999rem)</td>
|
|
566
|
+
</tr>
|
|
567
|
+
<tr>
|
|
568
|
+
<td><code>rtl</code></td>
|
|
569
|
+
<td>Top-left corner only</td>
|
|
570
|
+
</tr>
|
|
571
|
+
<tr>
|
|
572
|
+
<td><code>rtr</code></td>
|
|
573
|
+
<td>Top-right corner only</td>
|
|
574
|
+
</tr>
|
|
575
|
+
<tr>
|
|
576
|
+
<td><code>rbr</code></td>
|
|
577
|
+
<td>Bottom-right corner only</td>
|
|
578
|
+
</tr>
|
|
579
|
+
<tr>
|
|
580
|
+
<td><code>rbl</code></td>
|
|
581
|
+
<td>Bottom-left corner only</td>
|
|
582
|
+
</tr>
|
|
583
|
+
<tr>
|
|
584
|
+
<td><code>rt</code></td>
|
|
585
|
+
<td>Top corners (left + right)</td>
|
|
586
|
+
</tr>
|
|
587
|
+
<tr>
|
|
588
|
+
<td><code>rb</code></td>
|
|
589
|
+
<td>Bottom corners (left + right)</td>
|
|
590
|
+
</tr>
|
|
591
|
+
<tr>
|
|
592
|
+
<td><code>rl</code></td>
|
|
593
|
+
<td>Left corners (top + bottom)</td>
|
|
594
|
+
</tr>
|
|
595
|
+
<tr>
|
|
596
|
+
<td><code>rr</code></td>
|
|
597
|
+
<td>Right corners (top + bottom)</td>
|
|
598
|
+
</tr>
|
|
599
|
+
</tbody>
|
|
600
|
+
</table>
|
|
601
|
+
<p class="mt">
|
|
602
|
+
<small
|
|
603
|
+
><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
|
|
604
|
+
<code>r0</code>, <code>rt0</code>) to cancel border radius.</small
|
|
605
|
+
>
|
|
606
|
+
</p>
|
|
607
|
+
|
|
608
|
+
<h2 id="padding">Padding</h2>
|
|
609
|
+
|
|
610
|
+
<div class="card">
|
|
611
|
+
<h3>Color Legend</h3>
|
|
612
|
+
<ul>
|
|
613
|
+
<li><strong style="color: #00ff00">Green</strong> = Padding</li>
|
|
614
|
+
<li><strong style="color: #ff8c00">Orange</strong> = Margins</li>
|
|
615
|
+
<li>
|
|
616
|
+
<strong style="color: #ff0000">Red</strong> = Negative Margins
|
|
617
|
+
</li>
|
|
618
|
+
<li>
|
|
619
|
+
<strong style="color: #ff0000">Red Border</strong> = Cancelled
|
|
620
|
+
Margins
|
|
621
|
+
</li>
|
|
622
|
+
</ul>
|
|
623
|
+
<p>
|
|
624
|
+
<small
|
|
625
|
+
>Additional styles may be added to the example output (borders,
|
|
626
|
+
spacing, colors) for demonstration.</small
|
|
627
|
+
>
|
|
628
|
+
</p>
|
|
629
|
+
</div>
|
|
630
|
+
|
|
631
|
+
<div class="row -mx">
|
|
632
|
+
<div class="col m-span-12 px">
|
|
633
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
634
|
+
<div class="card">
|
|
635
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>p<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
636
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt"</span>></span>pt<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
637
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pr"</span>></span>pr<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
638
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb"</span>></span>pb<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
639
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pl"</span>></span>pl<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
640
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px"</span>></span>px<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
641
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py"</span>></span>py<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="col m-span-12 px">
|
|
645
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
646
|
+
<div class="card">
|
|
647
|
+
<div class="d-ib bg-success mx mb p">
|
|
648
|
+
<div class="d-ib bg-alt pq">p</div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="d-ib bg-success mx mb pt">
|
|
651
|
+
<div class="d-ib bg-alt pq">pt</div>
|
|
652
|
+
</div>
|
|
653
|
+
<div class="d-ib bg-success mx mb pr">
|
|
654
|
+
<div class="d-ib bg-alt pq">pr</div>
|
|
655
|
+
</div>
|
|
656
|
+
<div class="d-ib bg-success mx mb pb">
|
|
657
|
+
<div class="d-ib bg-alt pq">pb</div>
|
|
658
|
+
</div>
|
|
659
|
+
<div class="d-ib bg-success mx mb pl">
|
|
660
|
+
<div class="d-ib bg-alt pq">pl</div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="d-ib bg-success mx mb px">
|
|
663
|
+
<div class="d-ib bg-alt pq">px</div>
|
|
664
|
+
</div>
|
|
665
|
+
<div class="d-ib bg-success mx mb py">
|
|
666
|
+
<div class="d-ib bg-alt pq">py</div>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</div>
|
|
671
|
+
|
|
672
|
+
<h3 id="margins">Margins</h3>
|
|
673
|
+
<div class="row -mx">
|
|
674
|
+
<div class="col m-span-12 px">
|
|
675
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
676
|
+
<div class="card">
|
|
677
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>m<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
678
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt"</span>></span>mt<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
679
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr"</span>></span>mr<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
680
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>></span>mb<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
681
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml"</span>></span>ml<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
682
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx"</span>></span>mx<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
683
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my"</span>></span>my<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="col m-span-12 px">
|
|
687
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
688
|
+
<div class="card">
|
|
689
|
+
<div class="d-ib bg-warning mx mb p">
|
|
690
|
+
<div class="d-ib bg-alt pq">m</div>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="d-ib bg-warning mx mb pt">
|
|
693
|
+
<div class="d-ib bg-alt pq">mt</div>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="d-ib bg-warning mx mb pr">
|
|
696
|
+
<div class="d-ib bg-alt pq">mr</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="d-ib bg-warning mx mb pb">
|
|
699
|
+
<div class="d-ib bg-alt pq">mb</div>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="d-ib bg-warning mx mb pl">
|
|
702
|
+
<div class="d-ib bg-alt pq">ml</div>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="d-ib bg-warning mx mb px">
|
|
705
|
+
<div class="d-ib bg-alt pq">mx</div>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="d-ib bg-warning mx mb py">
|
|
708
|
+
<div class="d-ib bg-alt pq">my</div>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
|
|
714
|
+
<h3 id="negative-margins">Negative Margins</h3>
|
|
715
|
+
<div class="row -mx">
|
|
716
|
+
<div class="col m-span-12 px">
|
|
717
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
718
|
+
<div class="card">
|
|
719
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-m"</span>></span>-m<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
720
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mt"</span>></span>-mt<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
721
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mr"</span>></span>-mr<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
722
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mb"</span>></span>-mb<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
723
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-ml"</span>></span>-ml<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
724
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mx"</span>></span>-mx<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
725
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-my"</span>></span>-my<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
726
|
+
</div>
|
|
727
|
+
</div>
|
|
728
|
+
<div class="col m-span-12 px">
|
|
729
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
730
|
+
<div class="card">
|
|
731
|
+
<div class="d-ib bg-danger mx mb p">
|
|
732
|
+
<div class="d-ib bg-alt pq">-m</div>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="d-ib bg-danger mx mb pt">
|
|
735
|
+
<div class="d-ib bg-alt pq">-mt</div>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="d-ib bg-danger mx mb pr">
|
|
738
|
+
<div class="d-ib bg-alt pq">-mr</div>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="d-ib bg-danger mx mb pb">
|
|
741
|
+
<div class="d-ib bg-alt pq">-mb</div>
|
|
742
|
+
</div>
|
|
743
|
+
<div class="d-ib bg-danger mx mb pl">
|
|
744
|
+
<div class="d-ib bg-alt pq">-ml</div>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="d-ib bg-danger mx mb px">
|
|
747
|
+
<div class="d-ib bg-alt pq">-mx</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="d-ib bg-danger mx mb py">
|
|
750
|
+
<div class="d-ib bg-alt pq">-my</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
</div>
|
|
755
|
+
|
|
756
|
+
<h3 id="cancelled-margins">Cancelled Margins</h3>
|
|
757
|
+
<div class="row -mx">
|
|
758
|
+
<div class="col m-span-12 px">
|
|
759
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
760
|
+
<div class="card">
|
|
761
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m m0"</span>></span>m m0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
762
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mt0"</span>></span>m mt0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
763
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mr0"</span>></span>m mr0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
764
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mb0"</span>></span>m mb0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
765
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m ml0"</span>></span>m ml0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
766
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mx0"</span>></span>m mx0<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
767
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m my0"</span>></span>m my0<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
768
|
+
</div>
|
|
769
|
+
</div>
|
|
770
|
+
<div class="col m-span-12 px">
|
|
771
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
772
|
+
<div class="card">
|
|
773
|
+
<div class="d-ib bg-warning mx mb">
|
|
774
|
+
<div
|
|
775
|
+
class="d-ib bg-alt pq b"
|
|
776
|
+
style="border-color: var(--c_danger) !important"
|
|
777
|
+
>
|
|
778
|
+
m m0
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
781
|
+
<div class="d-ib bg-warning mx mb px pb">
|
|
782
|
+
<div
|
|
783
|
+
class="d-ib bg-alt pq bt"
|
|
784
|
+
style="border-color: var(--c_danger) !important"
|
|
785
|
+
>
|
|
786
|
+
m mt0
|
|
787
|
+
</div>
|
|
788
|
+
</div>
|
|
789
|
+
<div class="d-ib bg-warning mx mb py pl">
|
|
790
|
+
<div
|
|
791
|
+
class="d-ib bg-alt pq br"
|
|
792
|
+
style="border-color: var(--c_danger) !important"
|
|
793
|
+
>
|
|
794
|
+
m mr0
|
|
795
|
+
</div>
|
|
796
|
+
</div>
|
|
797
|
+
<div class="d-ib bg-warning mx mb px pt">
|
|
798
|
+
<div
|
|
799
|
+
class="d-ib bg-alt pq bb"
|
|
800
|
+
style="border-color: var(--c_danger) !important"
|
|
801
|
+
>
|
|
802
|
+
m mb0
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
<div class="d-ib bg-warning mx mb py pr">
|
|
806
|
+
<div
|
|
807
|
+
class="d-ib bg-alt pq bl"
|
|
808
|
+
style="border-color: var(--c_danger) !important"
|
|
809
|
+
>
|
|
810
|
+
m ml0
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
<div class="d-ib bg-warning mx mb py">
|
|
814
|
+
<div
|
|
815
|
+
class="d-ib bg-alt pq bx"
|
|
816
|
+
style="border-color: var(--c_danger) !important"
|
|
817
|
+
>
|
|
818
|
+
m mx0
|
|
819
|
+
</div>
|
|
820
|
+
</div>
|
|
821
|
+
<div class="d-ib bg-warning mx mb px">
|
|
822
|
+
<div
|
|
823
|
+
class="d-ib bg-alt pq by"
|
|
824
|
+
style="border-color: var(--c_danger) !important"
|
|
825
|
+
>
|
|
826
|
+
m my0
|
|
827
|
+
</div>
|
|
828
|
+
</div>
|
|
829
|
+
</div>
|
|
830
|
+
</div>
|
|
831
|
+
</div>
|
|
832
|
+
|
|
833
|
+
<h1 id="inputs">Inputs</h1>
|
|
834
|
+
|
|
835
|
+
<h2 id="basic-inputs">Basic Inputs</h2>
|
|
836
|
+
<div class="row -mx">
|
|
837
|
+
<div class="col m-span-12 px">
|
|
838
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
839
|
+
<div class="card">
|
|
840
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input"</span> /></span>
|
|
841
|
+
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
|
842
|
+
<span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
|
843
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
844
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
845
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
846
|
+
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
|
|
847
|
+
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span>></span>
|
|
848
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
849
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
850
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
851
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 4<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
852
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 5<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
853
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 6<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
854
|
+
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
|
855
|
+
</div>
|
|
856
|
+
</div>
|
|
857
|
+
<div class="col m-span-12 px">
|
|
858
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
859
|
+
<div class="card pb">
|
|
860
|
+
<input placeholder="Input" />
|
|
861
|
+
<textarea placeholder="Textarea"></textarea>
|
|
862
|
+
<select>
|
|
863
|
+
<option>Option 1</option>
|
|
864
|
+
<option>Option 2</option>
|
|
865
|
+
<option>Option 3</option>
|
|
866
|
+
</select>
|
|
867
|
+
<select multiple>
|
|
868
|
+
<option>Option 1</option>
|
|
869
|
+
<option>Option 2</option>
|
|
870
|
+
<option>Option 3</option>
|
|
871
|
+
<option>Option 4</option>
|
|
872
|
+
<option>Option 5</option>
|
|
873
|
+
<option>Option 6</option>
|
|
874
|
+
</select>
|
|
875
|
+
</div>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
|
|
879
|
+
<h2 id="labels">Labels</h2>
|
|
880
|
+
<div class="row -mx">
|
|
881
|
+
<div class="col m-span-12 px">
|
|
882
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
883
|
+
<div class="card">
|
|
884
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input"</span>></span>Input:<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
885
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input"</span> /></span></code></pre>
|
|
886
|
+
</div>
|
|
887
|
+
</div>
|
|
888
|
+
<div class="col m-span-12 px">
|
|
889
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
890
|
+
<div class="card pb">
|
|
891
|
+
<label for="input">Input:</label>
|
|
892
|
+
<input id="input" />
|
|
893
|
+
</div>
|
|
894
|
+
</div>
|
|
895
|
+
</div>
|
|
896
|
+
|
|
897
|
+
<h2 id="checkbox-radio">Checkbox / Radio</h2>
|
|
898
|
+
<div class="row -mx">
|
|
899
|
+
<div class="col m-span-12 px">
|
|
900
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
901
|
+
<div class="card">
|
|
902
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"check1"</span> /></span>
|
|
903
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
904
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"check2"</span> /></span>
|
|
905
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Check 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
906
|
+
|
|
907
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad1"</span> /></span>
|
|
908
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Radio 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
909
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad2"</span> /></span>
|
|
910
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Radio 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
<div class="col m-span-12 px">
|
|
914
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
915
|
+
<div class="card pb">
|
|
916
|
+
<input type="checkbox" id="check1" />
|
|
917
|
+
<label for="check1" class="checkbox">Check 1</label>
|
|
918
|
+
<input type="checkbox" id="check2" />
|
|
919
|
+
<label for="check2" class="checkbox">Check 2</label>
|
|
920
|
+
<br /><br />
|
|
921
|
+
<input type="radio" name="radios" id="rad1" />
|
|
922
|
+
<label for="rad1" class="checkbox">Radio 1</label>
|
|
923
|
+
<input type="radio" name="radios" id="rad2" />
|
|
924
|
+
<label for="rad2" class="checkbox">Radio 2</label>
|
|
925
|
+
</div>
|
|
926
|
+
</div>
|
|
927
|
+
</div>
|
|
928
|
+
|
|
929
|
+
<h1 id="buttons">Buttons</h1>
|
|
930
|
+
|
|
931
|
+
<h2 id="button-types">Button Types</h2>
|
|
932
|
+
<div class="row -mx">
|
|
933
|
+
<div class="col m-span-12 px">
|
|
934
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
935
|
+
<div class="card">
|
|
936
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
937
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"input"</span> /></span>
|
|
938
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"submit input"</span> /></span>
|
|
939
|
+
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>a.btn<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
<div class="col m-span-12 px">
|
|
943
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
944
|
+
<div class="card pb">
|
|
945
|
+
<button>button</button>
|
|
946
|
+
<input type="button" value="input" />
|
|
947
|
+
<input type="submit" value="submit input" />
|
|
948
|
+
<a href="#" class="btn">a.btn</a>
|
|
949
|
+
</div>
|
|
950
|
+
</div>
|
|
951
|
+
</div>
|
|
952
|
+
|
|
953
|
+
<h2 id="button-colors">Button Colors</h2>
|
|
954
|
+
<div class="row -mx">
|
|
955
|
+
<div class="col m-span-12 px">
|
|
956
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
957
|
+
<div class="card">
|
|
958
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
959
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
960
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
961
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
962
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
963
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
964
|
+
</div>
|
|
965
|
+
</div>
|
|
966
|
+
<div class="col m-span-12 px">
|
|
967
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
968
|
+
<div class="card pb">
|
|
969
|
+
<button>Default</button>
|
|
970
|
+
<button class="primary">Primary</button>
|
|
971
|
+
<button class="secondary">Secondary</button>
|
|
972
|
+
<button class="success">Success</button>
|
|
973
|
+
<button class="warning">Warning</button>
|
|
974
|
+
<button class="danger">Danger</button>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
</div>
|
|
978
|
+
|
|
979
|
+
<h2 id="button-sizes">Button Sizes</h2>
|
|
980
|
+
<div class="row -mx">
|
|
981
|
+
<div class="col m-span-12 px">
|
|
982
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
983
|
+
<div class="card">
|
|
984
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span>Small<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
985
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
986
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>></span>Large<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
987
|
+
</div>
|
|
988
|
+
</div>
|
|
989
|
+
<div class="col m-span-12 px">
|
|
990
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
991
|
+
<div class="card pb">
|
|
992
|
+
<button class="small">Small</button>
|
|
993
|
+
<button>Normal</button>
|
|
994
|
+
<button class="large">Large</button>
|
|
995
|
+
</div>
|
|
996
|
+
</div>
|
|
997
|
+
</div>
|
|
998
|
+
|
|
999
|
+
<h2 id="button-groups">Button Groups</h2>
|
|
1000
|
+
<div class="row -mx">
|
|
1001
|
+
<div class="col m-span-12 px">
|
|
1002
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1003
|
+
<div class="card">
|
|
1004
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-grp"</span>></span>
|
|
1005
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1006
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1007
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1008
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1009
|
+
</div>
|
|
1010
|
+
</div>
|
|
1011
|
+
<div class="col m-span-12 px">
|
|
1012
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1013
|
+
<div class="card pb">
|
|
1014
|
+
<div class="btn-grp">
|
|
1015
|
+
<button>Default</button>
|
|
1016
|
+
<button>Default</button>
|
|
1017
|
+
<button>Default</button>
|
|
1018
|
+
</div>
|
|
1019
|
+
</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
|
|
1023
|
+
<h2 id="no-styles">No Styles</h2>
|
|
1024
|
+
<div class="row -mx">
|
|
1025
|
+
<div class="col m-span-12 px">
|
|
1026
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1027
|
+
<div class="card">
|
|
1028
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-style"</span>></span>no-style<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1029
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-btn"</span>></span>no-btn<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
1030
|
+
</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
<div class="col m-span-12 px">
|
|
1033
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1034
|
+
<div class="card pb">
|
|
1035
|
+
<button class="no-style">no-style</button>
|
|
1036
|
+
<button class="no-btn">no-btn</button>
|
|
1037
|
+
</div>
|
|
1038
|
+
</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
|
|
1041
|
+
<h1 id="tables">Tables</h1>
|
|
1042
|
+
|
|
1043
|
+
<h2 id="basic-table">Basic Table</h2>
|
|
1044
|
+
<div class="row -mx">
|
|
1045
|
+
<div class="col m-span-12 px">
|
|
1046
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1047
|
+
<div class="card">
|
|
1048
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span>
|
|
1049
|
+
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
|
1050
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1051
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1052
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1053
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1054
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1055
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1056
|
+
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
|
1057
|
+
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
|
1058
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1059
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1060
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1061
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1062
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1063
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1064
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1065
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1066
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1067
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1068
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1069
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1070
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1071
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1072
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1073
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1074
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1075
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1076
|
+
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
|
1077
|
+
<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
1078
|
+
</div>
|
|
1079
|
+
</div>
|
|
1080
|
+
<div class="col m-span-12 px">
|
|
1081
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1082
|
+
<div class="card pb">
|
|
1083
|
+
<table>
|
|
1084
|
+
<thead>
|
|
1085
|
+
<tr>
|
|
1086
|
+
<th>Field 1</th>
|
|
1087
|
+
<th>Field 2</th>
|
|
1088
|
+
<th>Field 3</th>
|
|
1089
|
+
<th>Field 4</th>
|
|
1090
|
+
</tr>
|
|
1091
|
+
</thead>
|
|
1092
|
+
<tbody>
|
|
1093
|
+
<tr>
|
|
1094
|
+
<td>Row 1 - Data 1</td>
|
|
1095
|
+
<td>Row 1 - Data 2</td>
|
|
1096
|
+
<td>Row 1 - Data 3</td>
|
|
1097
|
+
<td>Row 1 - Data 4</td>
|
|
1098
|
+
</tr>
|
|
1099
|
+
<tr>
|
|
1100
|
+
<td>Row 2 - Data 1</td>
|
|
1101
|
+
<td>Row 2 - Data 2</td>
|
|
1102
|
+
<td>Row 2 - Data 3</td>
|
|
1103
|
+
<td>Row 2 - Data 4</td>
|
|
1104
|
+
</tr>
|
|
1105
|
+
<tr>
|
|
1106
|
+
<td>Row 3 - Data 1</td>
|
|
1107
|
+
<td>Row 3 - Data 2</td>
|
|
1108
|
+
<td>Row 3 - Data 3</td>
|
|
1109
|
+
<td>Row 3 - Data 4</td>
|
|
1110
|
+
</tr>
|
|
1111
|
+
</tbody>
|
|
1112
|
+
</table>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
</div>
|
|
1116
|
+
|
|
1117
|
+
<h2 id="responsive-table">Responsive Table</h2>
|
|
1118
|
+
<div class="row -mx">
|
|
1119
|
+
<div class="col m-span-12 px">
|
|
1120
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1121
|
+
<div class="card">
|
|
1122
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>></span>
|
|
1123
|
+
<span class="hljs-tag"><<span class="hljs-name">table</span>></span>
|
|
1124
|
+
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
|
1125
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1126
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1127
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1128
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1129
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1130
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1131
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1132
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1133
|
+
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
|
1134
|
+
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
|
1135
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1136
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1137
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1138
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1139
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1140
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1141
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1142
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1143
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1144
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1145
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1146
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1147
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1148
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1149
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1150
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1151
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1152
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1153
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1154
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1155
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1156
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1157
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1158
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1159
|
+
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
|
1160
|
+
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
|
|
1161
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1162
|
+
</div>
|
|
1163
|
+
</div>
|
|
1164
|
+
<div class="col m-span-12 px">
|
|
1165
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1166
|
+
<div
|
|
1167
|
+
class="card pb"
|
|
1168
|
+
id="resizable-table-card"
|
|
1169
|
+
style="resize: horizontal; overflow: auto; min-width: 200px"
|
|
1170
|
+
>
|
|
1171
|
+
<div class="table-wrapper">
|
|
1172
|
+
<table>
|
|
1173
|
+
<thead>
|
|
1174
|
+
<tr>
|
|
1175
|
+
<th>Field 1</th>
|
|
1176
|
+
<th>Field 2</th>
|
|
1177
|
+
<th>Field 3</th>
|
|
1178
|
+
<th>Field 4</th>
|
|
1179
|
+
<th>Field 5</th>
|
|
1180
|
+
<th>Field 6</th>
|
|
1181
|
+
</tr>
|
|
1182
|
+
</thead>
|
|
1183
|
+
<tbody>
|
|
1184
|
+
<tr>
|
|
1185
|
+
<td>Row 1 - Data 1</td>
|
|
1186
|
+
<td>Row 1 - Data 2</td>
|
|
1187
|
+
<td>Row 1 - Data 3</td>
|
|
1188
|
+
<td>Row 1 - Data 4</td>
|
|
1189
|
+
<td>Row 1 - Data 5</td>
|
|
1190
|
+
<td>Row 1 - Data 6</td>
|
|
1191
|
+
</tr>
|
|
1192
|
+
<tr>
|
|
1193
|
+
<td>Row 2 - Data 1</td>
|
|
1194
|
+
<td>Row 2 - Data 2</td>
|
|
1195
|
+
<td>Row 2 - Data 3</td>
|
|
1196
|
+
<td>Row 2 - Data 4</td>
|
|
1197
|
+
<td>Row 2 - Data 5</td>
|
|
1198
|
+
<td>Row 2 - Data 6</td>
|
|
1199
|
+
</tr>
|
|
1200
|
+
<tr>
|
|
1201
|
+
<td>Row 3 - Data 1</td>
|
|
1202
|
+
<td>Row 3 - Data 2</td>
|
|
1203
|
+
<td>Row 3 - Data 3</td>
|
|
1204
|
+
<td>Row 3 - Data 4</td>
|
|
1205
|
+
<td>Row 3 - Data 5</td>
|
|
1206
|
+
<td>Row 3 - Data 6</td>
|
|
1207
|
+
</tr>
|
|
1208
|
+
</tbody>
|
|
1209
|
+
</table>
|
|
1210
|
+
</div>
|
|
1211
|
+
</div>
|
|
1212
|
+
</div>
|
|
1213
|
+
</div>
|
|
1214
|
+
|
|
1215
|
+
<h1 id="colors">Colors</h1>
|
|
1216
|
+
|
|
1217
|
+
<h2 id="background">Background</h2>
|
|
1218
|
+
<div class="row -mx">
|
|
1219
|
+
<div class="col m-span-12 px">
|
|
1220
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1221
|
+
<div class="card">
|
|
1222
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span>></span>Alternate<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1223
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-inv"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1224
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1225
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1226
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1227
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1228
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1229
|
+
</div>
|
|
1230
|
+
</div>
|
|
1231
|
+
<div class="col m-span-12 px">
|
|
1232
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1233
|
+
<div class="card pb">
|
|
1234
|
+
<div class="bg-alt p">Alternate</div>
|
|
1235
|
+
<div class="bg-inv p">Inverse</div>
|
|
1236
|
+
<div class="bg-primary p">Primary</div>
|
|
1237
|
+
<div class="bg-secondary p">Secondary</div>
|
|
1238
|
+
<div class="bg-success p">Success</div>
|
|
1239
|
+
<div class="bg-warning p">Warning</div>
|
|
1240
|
+
<div class="bg-danger p">Danger</div>
|
|
1241
|
+
</div>
|
|
1242
|
+
</div>
|
|
1243
|
+
</div>
|
|
1244
|
+
|
|
1245
|
+
<h2 id="text-colors">Text Colors</h2>
|
|
1246
|
+
<div class="row -mx">
|
|
1247
|
+
<div class="col m-span-12 px">
|
|
1248
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1249
|
+
<div class="card">
|
|
1250
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1251
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted"</span>></span>Muted<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1252
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1253
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1254
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1255
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1256
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1257
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
1258
|
+
</div>
|
|
1259
|
+
</div>
|
|
1260
|
+
<div class="col m-span-12 px">
|
|
1261
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1262
|
+
<div class="card">
|
|
1263
|
+
<p>Normal</p>
|
|
1264
|
+
<p class="tc-muted">Muted</p>
|
|
1265
|
+
<p class="tc-inv">Inverse</p>
|
|
1266
|
+
<p class="tc-primary">Primary</p>
|
|
1267
|
+
<p class="tc-secondary">Secondary</p>
|
|
1268
|
+
<p class="tc-success">Success</p>
|
|
1269
|
+
<p class="tc-warning">Warning</p>
|
|
1270
|
+
<p class="tc-danger">Danger</p>
|
|
1271
|
+
</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
</div>
|
|
1274
|
+
</main>
|
|
1275
|
+
<script>
|
|
1276
|
+
// Initialize theme from localStorage on page load
|
|
1277
|
+
function initializeTheme() {
|
|
1278
|
+
const savedTheme =
|
|
1279
|
+
localStorage.getItem("essential-css-theme") || "auto";
|
|
1280
|
+
document.documentElement.setAttribute("theme", savedTheme);
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
// Initialize theme before custom element is defined
|
|
1284
|
+
initializeTheme();
|
|
1285
|
+
|
|
1286
|
+
window.customElements.define(
|
|
1287
|
+
"theme-btn",
|
|
1288
|
+
class ThemeButton extends HTMLElement {
|
|
1289
|
+
constructor() {
|
|
1290
|
+
super();
|
|
1291
|
+
this.$button = null;
|
|
1292
|
+
}
|
|
1293
|
+
connectedCallback() {
|
|
1294
|
+
this.$button = this.querySelector("button");
|
|
1295
|
+
this.$button.addEventListener("click", this.click);
|
|
1296
|
+
this._updateIcon();
|
|
1297
|
+
}
|
|
1298
|
+
_updateIcon = () => {
|
|
1299
|
+
if (!this.$button) return;
|
|
1300
|
+
this.$button.innerHTML = {
|
|
1301
|
+
auto: `<svg viewBox="0 -960 960 960" class="icon" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>`,
|
|
1302
|
+
light: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>`,
|
|
1303
|
+
dark: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>`,
|
|
1304
|
+
}[this.theme];
|
|
1305
|
+
};
|
|
1306
|
+
click = () => {
|
|
1307
|
+
if (this.theme === "auto") this.theme = "dark";
|
|
1308
|
+
else if (this.theme === "dark") this.theme = "light";
|
|
1309
|
+
else if (this.theme === "light") this.theme = "auto";
|
|
1310
|
+
this._updateIcon();
|
|
1311
|
+
};
|
|
1312
|
+
get theme() {
|
|
1313
|
+
return document.documentElement.getAttribute("theme") || "auto";
|
|
1314
|
+
}
|
|
1315
|
+
set theme(v) {
|
|
1316
|
+
document.documentElement.setAttribute("theme", v);
|
|
1317
|
+
// Save theme to localStorage
|
|
1318
|
+
localStorage.setItem("essential-css-theme", v);
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
); // Set max-width for resizable table card based on initial size const resizableCard = document.getElementById('resizable-table-card');
|
|
1322
|
+
if (resizableCard) {
|
|
1323
|
+
resizableCard.style.maxWidth = resizableCard.offsetWidth + "px";
|
|
1324
|
+
}
|
|
1325
|
+
</script>
|
|
1326
|
+
</body>
|
|
1327
|
+
</html>
|