UNPKG

46.8 kBHTMLView Raw
1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
7 <meta name="description" content="">
8 <title>Pico.css • Graceful & Minimal CSS design system</title>
9 <link rel="shortcut icon" href="img/favicon.ico">
10 <link rel="stylesheet" href="../css/pico.min.css">
11 <link rel="stylesheet" href="css/pico.docs.min.css">
12 </head>
13
14 <body>
15
16 <!-- Nav -->
17 <nav class="container-fluid">
18 <ul>
19 <li>
20 <a href="https://picocss.com" aria-label="Back home">
21 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
22 <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
23 </svg>
24 </a>
25 </li>
26 <li>Documentation</li>
27 </ul>
28 <ul>
29 <li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
30 <li><a href="#docs" class="secondary">Docs</a></li>
31 <li>
32 <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
33 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
34 <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
35 </svg>
36 </a>
37 </li>
38 </ul>
39 </nav><!-- ./ Nav -->
40
41 <!-- Main -->
42 <main class="container" id="docs">
43
44 <!-- Aside -->
45 <aside>
46 <nav>
47 <h1>Documentation</h1>
48 <details open>
49 <summary>Getting started</summary>
50 <ul>
51 <li><a href="#start" class="secondary">Usage</a></li>
52 <li><a href="#themes" class="secondary">Themes</a></li>
53 <li><a href="#customization" class="secondary">Customization</a></li>
54 <li><a href="#classless" class="secondary">Class-less version</a></li>
55 </ul>
56 </details>
57 <details open>
58 <summary>Layout</summary>
59 <ul>
60 <li><a href="#containers" class="secondary">Containers</a></li>
61 <li><a href="#grids" class="secondary">Grids</a></li>
62 <li><a href="#scroller" class="secondary">Horizontal scroller</a></li>
63 </ul>
64 </details>
65 <details open>
66 <summary>Elements</summary>
67 <ul>
68 <li><a href="#typography" class="secondary">Typography</a></li>
69 <li><a href="#buttons" class="secondary">Buttons</a></li>
70 <li><a href="#forms" class="secondary">Forms</a></li>
71 </ul>
72 </details>
73 <details open>
74 <summary>Components</summary>
75 <ul>
76 <li><a href="#accordions" class="secondary">Accordions</a></li>
77 <li><a href="#cards" class="secondary">Cards</a></li>
78 <li><a href="#navs" class="secondary">Navs</a></li>
79 <li><a href="#tooltips" class="secondary">Tooltips</a></li>
80 </ul>
81 </details>
82 <details open>
83 <summary>Extend</summary>
84 <ul>
85 <li>
86 <a href="#love" class="secondary">We love .classes</a>
87 </li>
88 </ul>
89 </details>
90 </nav>
91 </aside><!-- ./ Aside -->
92
93 <!-- Document -->
94 <div role="document">
95
96 <!-- Docs: Start -->
97 <section id="start">
98 <hgroup>
99 <h2>Usage</h2>
100 <h3>Work without package manager or dependencies 🙂!</h3>
101 </hgroup>
102 <p>There are 3 ways to get started with pico.css:</p>
103 <h4>Install manually</h4>
104 <a href="https://github.com/picocss/pico/archive/v1.0.5.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.
105 <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
106 <h4>Install from CDN</h4>
107 <p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
108 <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
109 <h4>Install with NPM</h4>
110 <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
111 <p>Starter template:</p>
112
113<pre><code><em>&lt;!doctype html&gt;</em>
114&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
115 &lt;<b>head</b>&gt;
116 &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
117 &lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"</u>&gt;
118 &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
119 &lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
120 &lt;/<b>head</b>&gt;
121 &lt;<b>body</b>&gt;
122 &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;
123 &lt;<b>h1</b>&gt;Hello, world!&lt;/<b>h1</b>&gt;
124 &lt;/<b>main</b>&gt;
125 &lt;/<b>body</b>&gt;
126&lt;/<b>html</b>&gt;</code></pre>
127
128 </section><!-- ./ Docs: Start -->
129
130 <!-- Docs: Themes -->
131 <section id="themes">
132 <hgroup>
133 <h2>Themes</h2>
134 <h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
135 </hgroup>
136 <p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
137 <article aria-label="Theme switcher">
138 <button class="contrast theme-switcher">...</button>
139 </article>
140 <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p>
141 <article data-theme="light">
142 <h4>Light theme</h4>
143 <form class="grid">
144 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
145 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
146 <button type="submit" aria-label="Example button">Login</button>
147 </form>
148
149<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
150 ...
151&lt;/<b>article</b>&gt;</code></pre>
152
153 </article>
154 <article data-theme="dark">
155 <h4>Dark theme</h4>
156 <form class="grid">
157 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
158 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
159 <button type="submit" aria-label="Example button">Login</button>
160 </form>
161
162<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
163 ...
164&lt;/<b>article</b>&gt;</code></pre>
165
166 </article>
167 </section><!-- ./ Themes -->
168
169 <!-- Docs: Customization-->
170 <section id="customization">
171 <hgroup>
172 <h2>Customization</h2>
173 <h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
174 </hgroup>
175 <h5>Pick a color!</h5>
176 <article data-theme="generated">
177 <h4><span class="name">Custom theme</span></h4>
178 <form>
179 <div class="grid">
180 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
181 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
182 <button type="submit" aria-label="Example button">Login</button>
183 </div>
184 <fieldset>
185 <label for="remember">
186 <input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
187 Remember me
188 </label>
189 </fieldset>
190 </form>
191 </article>
192
193 <p>SCSS:</p>
194
195<pre><code><em>// <span class="name">Custom colors</span></em>
196<i>$primary-500</i>: <u class="c500">...</u>;
197<i>$primary-600</i>: <u class="c600">...</u>;
198<i>$primary-700</i>: <u class="c700">...</u>;
199
200<em>// Pico library</em>
201<b>@import</b> <u>"path/pico"</u>;</code></pre>
202
203 <p>CSS:</p>
204
205<pre><code><em>/* <span class="name"></span>Light theme (Default) */
206/* Can be forced with data-theme="light" */</em>
207<b>[data-theme=<u>"light"</u>]</b>,
208<b>:root:not([data-theme=<u>"dark"</u>])</b> {
209 <i>--primary</i>: <u class="c600">...</u>;
210 <i>--primary-hover</i>: <u class="c700">...</u>;
211 <i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
212 <i>--primary-inverse</i>: <u class="inverse">...</u>;
213}
214
215
216<em>/* <span class="name"></span>Dark theme (Auto) */
217/* Automatically enabled if user has Dark mode enabled */</em>
218<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
219 <b>:root:not([data-theme="light"])</b> {
220 <i>--primary</i>: <u class="c600">...</u>;
221 <i>--primary-hover</i>: <u class="c500">...</u>;
222 <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
223 <i>--primary-inverse</i>: <u class="inverse">...</u>;
224}
225
226
227<em>/* <span class="name"></span>Dark theme (Forced) */
228/* Enabled if forced with data-theme="dark" */</em>
229<b>[data-theme="<u>dark</u>"]</b> {
230 <i>--primary</i>: <u class="c600">...</u>;
231 <i>--primary-hover</i>: <u class="c500">...</u>;
232 <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
233 <i>--primary-inverse</i>: <u class="inverse">...</u>;
234}</code></pre>
235
236 <p>Colors can be modified in <a href="https://github.com/picocss/pico/tree/master/scss/themes">scss/themes/</a>.</p>
237 <p>Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in <a href="https://github.com/picocss/pico/blob/master/scss/_variables.scss">scss/_variables.scss</a>.</p>
238 <p>You can also compile pico with only the modules you need to generate a slimer version. Example in <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
239 </section><!-- ./ Docs: Customization -->
240
241
242 <!-- Docs: Classless -->
243 <section id="classless">
244 <hgroup>
245 <h2>Class-less version</h2>
246 <h3>For wild HTML purists!</h3>
247 </hgroup>
248 <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
249 <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
250 <p><strong>Usage:</strong></p>
251 <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
252 <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
253 <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
254 <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
255 </section><!-- ./ Docs: Classless -->
256
257 <!-- Docs: Container -->
258 <section id="containers">
259 <hgroup>
260 <h2>Containers</h2>
261 <h3>
262 <code>.container</code> enable a centered viewport.<br>
263 <code>.container-fluid</code> enable a <code>100%</code> layout.
264 </h3>
265 </hgroup>
266
267<pre><code>&lt;<b>body</b>&gt;
268 &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
269&lt;/<b>body</b>&gt;</code></pre>
270
271 <p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p>
272 <figure>
273 <table>
274 <thead>
275 <tr>
276 <th>Device</th>
277 <th>Extra&nbsp;small</th>
278 <th>Small</th>
279 <th>Medium</th>
280 <th>Large</th>
281 <th>Extra&nbsp;large</th>
282 </tr>
283 </thead>
284 <tbody>
285 <tr>
286 <th>Breakpoint</th>
287 <td>&lt;576<small>px</small></td>
288 <td>≥576<small>px</small></td>
289 <td>≥768<small>px</small></td>
290 <td>≥992<small>px</small></td>
291 <td>≥1200<small>px</small></td>
292 </tr>
293 <tr>
294 <th>Viewport</th>
295 <td>None&nbsp;<small>(auto)</small></td>
296 <td>540<small>px</small></td>
297 <td>720<small>px</small></td>
298 <td>960<small>px</small></td>
299 <td>1140<small>px</small></td>
300 </tr>
301 </tbody>
302 </table>
303 </figure>
304 <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p>
305 <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
306 </section><!-- ./ Docs: Container -->
307
308 <!-- Docs: Grid -->
309 <section id="grids">
310 <hgroup>
311 <h2>Grids</h2>
312 <h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
313 </hgroup>
314 <article aria-label="Grid example">
315 <div class="grid">
316 <div>1</div>
317 <div>2</div>
318 <div>3</div>
319 <div>4</div>
320 </div>
321
322<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
323 &lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
324 &lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
325 &lt;<b>div</b>&gt;3&lt;/<b>div</b>&gt;
326 &lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
327&lt;/<b>div</b>&gt;</code></pre>
328
329 </article>
330 <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
331 <details>
332 <summary>
333 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
334 <circle cx="12" cy="12" r="10"></circle>
335 <line x1="12" y1="16" x2="12" y2="12"></line>
336 <line x1="12" y1="8" x2="12.01" y2="8"></line>
337 </svg>
338 &nbsp;More about grids
339 </summary>
340 <p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
341 <p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the Pico spirit.</p>
342 <p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
343 <p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
344 <p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
345 </details>
346
347 </section><!-- ./ Docs: Grid -->
348
349 <!-- Docs: Horizontal scroller -->
350 <section id="scroller">
351 <hgroup>
352 <h2>Horizontal scroller</h2>
353 <h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
354 </hgroup>
355 <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p>
356 <figure>
357 <table>
358 <thead>
359 <tr>
360 <th scope="col">#</th>
361 <th scope="col">Heading</th>
362 <th scope="col">Heading</th>
363 <th scope="col">Heading</th>
364 <th scope="col">Heading</th>
365 <th scope="col">Heading</th>
366 <th scope="col">Heading</th>
367 <th scope="col">Heading</th>
368 </tr>
369 </thead>
370 <tbody>
371 <tr>
372 <th scope="row">1</th>
373 <td>Cell</td>
374 <td>Cell</td>
375 <td>Cell</td>
376 <td>Cell</td>
377 <td>Cell</td>
378 <td>Cell</td>
379 <td>Cell</td>
380 </tr>
381 <tr>
382 <th scope="row">2</th>
383 <td>Cell</td>
384 <td>Cell</td>
385 <td>Cell</td>
386 <td>Cell</td>
387 <td>Cell</td>
388 <td>Cell</td>
389 <td>Cell</td>
390 </tr>
391 <tr>
392 <th scope="row">3</th>
393 <td>Cell</td>
394 <td>Cell</td>
395 <td>Cell</td>
396 <td>Cell</td>
397 <td>Cell</td>
398 <td>Cell</td>
399 <td>Cell</td>
400 </tr>
401 </tbody>
402 </table>
403 </figure>
404
405<pre><code>&lt;<b>figure</b>&gt;
406 &lt;<b>table</b>&gt;
407 ...
408 &lt;/<b>table</b>&gt;
409&lt;/<b>figure</b>&gt;</code></pre>
410
411 </section><!-- ./ Docs: Horizontal scroller -->
412
413 <!-- Docs: Typography -->
414 <section id="typography">
415 <hgroup>
416 <h2>Typography</h2>
417 <h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3>
418 </hgroup>
419 <figure>
420 <table>
421 <thead>
422 <tr>
423 <th>Device</th>
424 <th>Extra&nbsp;small</th>
425 <th>Small</th>
426 <th>Medium</th>
427 <th>Large</th>
428 <th>Extra&nbsp;large</th>
429 </tr>
430 </thead>
431 <tbody>
432 <tr>
433 <th>Base&nbsp;font</th>
434 <td>16<small>px</small></td>
435 <td>17<small>px</small></td>
436 <td>18<small>px</small></td>
437 <td>19<small>px</small></td>
438 <td>20<small>px</small></td>
439 </tr>
440 <tr>
441 <th>h1</th>
442 <td>32<small>px</small></td>
443 <td>34<small>px</small></td>
444 <td>36<small>px</small></td>
445 <td>38<small>px</small></td>
446 <td>40<small>px</small></td>
447 </tr>
448 <tr>
449 <th>h2</th>
450 <td>28<small>px</small></td>
451 <td>29<small>px</small></td>
452 <td>31.5<small>px</small></td>
453 <td>33.25<small>px</small></td>
454 <td>35<small>px</small></td>
455 </tr>
456 <tr>
457 <th>h3</th>
458 <td>24<small>px</small></td>
459 <td>25.5<small>px</small></td>
460 <td>27<small>px</small></td>
461 <td>28.5<small>px</small></td>
462 <td>30<small>px</small></td>
463 </tr>
464 <tr>
465 <th>h4</th>
466 <td>20<small>px</small></td>
467 <td>21.25<small>px</small></td>
468 <td>22.5<small>px</small></td>
469 <td>23.75<small>px</small></td>
470 <td>25<small>px</small></td>
471 </tr>
472 <tr>
473 <th>h5</th>
474 <td>18<small>px</small></td>
475 <td>19.125<small>px</small></td>
476 <td>20.25<small>px</small></td>
477 <td>21.375<small>px</small></td>
478 <td>22.5<small>px</small></td>
479 </tr>
480 <tr>
481 <th>h6</th>
482 <td>16<small>px</small></td>
483 <td>17<small>px</small></td>
484 <td>18<small>px</small></td>
485 <td>19<small>px</small></td>
486 <td>20<small>px</small></td>
487 </tr>
488 </tbody>
489 </table>
490 </figure>
491 <p>Headings:</p>
492 <article aria-label="Headings examples">
493 <h1>Heading 1</h1>
494 <h2>Heading 2</h2>
495 <h3>Heading 3</h3>
496 <h4>Heading 4</h4>
497 <h5>Heading 5</h5>
498 <h6>Heading 6</h6>
499 <p>Paragraph</p>
500
501<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
502&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
503&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
504&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
505&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
506&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;
507&lt;<b>p</b>&gt;Paragraph&lt;/<b>p</b>&gt;</code></pre>
508
509 </article>
510 <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
511 <article aria-label="Hgroup example">
512 <hgroup>
513 <h2>Heading 2</h2>
514 <h3>Subtitle for heading 2</h3>
515 </hgroup>
516
517<pre><code>&lt;<b>hgroup</b>&gt;
518 &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
519 &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
520&lt;<b>hgroup</b>&gt;</code></pre>
521
522 </article>
523 <p>Inline text elements:</p>
524 <article aria-label="Iinline text examples">
525 <div class="grid">
526 <div>
527 <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
528 <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
529 <p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
530 <p><del>Deleted</del> <code>del</code></p>
531 <p><ins>Inserted</ins> <code>ins</code></p>
532 <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
533 </div>
534 <div>
535 <p><mark>Highlighted</mark> <code>mark</code></p>
536 <p><s>Strikethrough</s> <code>s</code></p>
537 <p><small>Small </small> <code>small</code></p>
538 <p>Text <sub>Sub</sub> <code>sub</code></p>
539 <p>Text <sup>Sup</sup> <code>sup</code></p>
540 <p><u>Underline</u> <code>u</code></p>
541 </div>
542 </div>
543 </article>
544 <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
545 <article aria-label="Links examples">
546 <a href="#" onclick="event.preventDefault()">Primary</a><br>
547 <a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
548 <a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
549
550<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
551&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
552&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
553
554 </article>
555 </section><!-- ./ Docs: Typography -->
556
557 <!-- Docs: Button -->
558 <section id="buttons">
559 <hgroup>
560 <h2>Buttons</h2>
561 <h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
562 </hgroup>
563 <article aria-label="Grid example">
564 <button aria-label="Example button">Button</button>
565 <input type="submit">
566
567<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
568&lt;<b>input</b> <i>type</i>=<u>"submit"</u>&gt;</code></pre>
569
570 </article>
571 <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code>&lt;<b>a</b> <i>role</i>=<u>"button"&gt;</u></code> if you need an inline element.</p>
572 <article aria-label="Inline buttons examples">
573 <a href="#" onclick="event.preventDefault()" role="button">Link</a>
574 <a href="#" onclick="event.preventDefault()" role="button">Link</a>
575
576<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
577&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre>
578
579 </article>
580 <p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
581 <article aria-label="Buttons styles examples">
582 <a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
583 <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
584
585<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
586&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
587
588 </article>
589 <p>And a classic <code>.outline</code> variant.</p>
590 <article aria-label="Outline style examples">
591 <a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
592 <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
593 <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
594
595<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
596&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
597&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
598
599 </article>
600 </section><!-- ./ Docs: Button -->
601
602 <!-- Docs: Form -->
603 <section id="forms">
604 <hgroup>
605 <h2>Forms</h2>
606 <h3>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</h3>
607 </hgroup>
608 <p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
609 <p>All natives form elements are fully customized and themables with CSS variables.</p>
610 <article aria-label="Form example">
611 <form>
612 <div class="grid">
613 <label for="firstname">
614 First name
615 <input type="text" id="firstname" name="firstname" placeholder="First name" required>
616 </label>
617 <label for="lastname">
618 Last name
619 <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
620 </label>
621 </div>
622 <label for="email">Email address</label>
623 <input type="email" id="email" name="email" placeholder="Email address" required>
624 <small>We'll never share your email with anyone else.</small>
625 <button type="submit" aria-label="Example button">Submit</button>
626 </form>
627
628<pre><code>&lt;<b>form</b>&gt;
629
630 <em>&lt;!-- Grid --&gt;</em>
631 &lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
632
633 <em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
634 &lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
635 First name
636 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
637 &lt;/<b>label</b>&gt;
638
639 &lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
640 Last name
641 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt;
642 &lt;/<b>label</b>&gt;
643
644 &lt;/<b>div</b>&gt;
645
646 <em>&lt;!-- Markup example 2: input is after label --&gt;</em>
647 &lt;<b>label</b> <i>for</i>=<u>"email"</u>&gt;Email address&lt;/<b>label</b>&gt;
648 &lt;<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>&gt;
649 &lt;<b>small</b>&gt;We'll never share your email with anyone else.&lt;/<b>small</b>&gt;
650
651 <em>&lt;!-- Button --&gt;</em>
652 &lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;
653
654&lt;/<b>form</b>&gt;</code></pre>
655
656 </article>
657 <p>Disabled and validation states:</p>
658 <article aria-label="Validation states examples">
659 <form class="grid">
660 <input type="text" placeholder="Valid" aria-label="Valid" class="valid">
661 <input type="text" placeholder="Invalid" aria-label="Invalid" class="invalid">
662 <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
663 <input type="text" value="Readonly" aria-label="Readonly" readonly>
664 </form>
665
666<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>class</i>=<u>"valid"</u>&gt;
667&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>class</i>=<u>"invalid"</u>&gt;
668&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
669&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
670
671 </article>
672 <p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
673 <p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
674 <article aria-label="Select, radios, checkboxes, switch examples">
675 <label for="country">Country</label>
676 <select id="country">
677 <option selected>Choose...</option>
678 <option>...</option>
679 </select>
680 <fieldset>
681 <legend>Gender</legend>
682 <label for="male">
683 <input type="radio" id="male" name="gender" value="male" checked>
684 Male
685 </label>
686 <label for="female">
687 <input type="radio" id="female" name="gender" value="female">
688 Female
689 </label>
690 <label for="other">
691 <input type="radio" id="other" name="gender" value="other">
692 Other
693 </label>
694 </fieldset>
695 <fieldset>
696 <label for="terms">
697 <input type="checkbox" id="terms" name="terms">
698 I agree to the Terms and Conditions
699 </label>
700 </fieldset>
701 <fieldset>
702 <label for="switch">
703 <input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
704 Publish on my profile
705 </label>
706 </fieldset>
707
708<pre><code><em>&lt;!-- Select --&gt;</em>
709&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt;
710&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt;
711 &lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt;
712 &lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
713&lt;/<b>select</b>&gt;
714
715<em>&lt;!-- Radios --&gt;</em>
716&lt;<b>fieldset</b>&gt;
717 &lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt;
718 &lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt;
719 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"male"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"male"</u> <i>checked</i>&gt;
720 Male
721 &lt;/<b>label</b>&gt;
722 &lt;<b>label</b> <i>for</i>=<u>"female"</u>&gt;
723 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"female"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"female"</u>&gt;
724 Female
725 &lt;/<b>label</b>&gt;
726 &lt;<b>label</b> <i>for</i>=<u>"other"</u>&gt;
727 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"other"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"other"</u>&gt;
728 Other
729 &lt;/<b>label</b>&gt;
730&lt;/<b>fieldset</b>&gt;
731
732<em>&lt;!-- Checkbox --&gt;</em>
733&lt;<b>fieldset</b>&gt;
734 &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
735 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
736 I agree to the Terms and Conditions
737 &lt;/<b>label</b>&gt;
738&lt;/<b>fieldset</b>&gt;
739
740<em>&lt;!-- Switch --&gt;</em>
741&lt;<b>fieldset</b>&gt;
742 &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
743 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
744 Publish on my profile
745 &lt;/<b>label</b>&gt;
746&lt;/<b>fieldset</b>&gt;</code></pre>
747
748 </article>
749 </section><!-- ./ Docs: Form -->
750
751 <!-- Docs: Accordions -->
752 <section id="accordions">
753 <hgroup>
754 <h2>Accordions</h2>
755 <h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
756 </hgroup>
757 <article aria-label="Accordions examples">
758 <details>
759 <summary>Collapsible elements 1</summary>
760 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
761 </details>
762 <details open>
763 <summary>Collapsible elements 2</summary>
764 <ul>
765 <li>Vestibulum id elit quis massa interdum sodales.</li>
766 <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
767 <li>Quisque sed eros non eros ornare elementum.</li>
768 <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
769 </ul>
770 </details>
771
772<pre><code>&lt;<b>details</b>&gt;
773 &lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
774 &lt;<b>p</b>&gt;...&lt;/<b>p</b>&gt;
775&lt;/<b>details</b>&gt;
776
777&lt;<b>details</b> <i>open</i>&gt;
778 &lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
779 &lt;<b>ul</b>&gt;
780 &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
781 &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
782 &lt;/<b>ul</b>&gt;
783&lt;/<b>details</b>&gt;</code></pre>
784
785 </article>
786
787 </section><!-- ./ Docs: Accordions -->
788
789 <!-- Docs: Cards -->
790 <section id="cards">
791 <hgroup>
792 <h2>Cards</h2>
793 <h3>A flexible container with graceful spacings across devices and viewport sizes.</h3>
794 </hgroup>
795 <article aria-label="Card example">
796 I'm a card!
797 </article>
798 <pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre>
799 <p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
800 <article aria-label="Card sectioning example">
801 Body
802 <footer>Footer</footer>
803 </article>
804
805<pre><code>&lt;<b>article</b>&gt;
806 Body
807 &lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
808&lt;/<b>article</b>&gt;</code></pre>
809
810 </section><!-- ./ Docs: Card -->
811
812 <!-- Docs: Navs -->
813 <section id="navs">
814 <hgroup>
815 <h2>Navs</h2>
816 <h3>The essential navbar component in pure semantic HTML.</h3>
817 </hgroup>
818 <article aria-label="Nav example">
819 <nav>
820 <ul>
821 <li><strong>Brand</strong></li>
822 </ul>
823 <ul>
824 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
825 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
826 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
827 </ul>
828 </nav>
829
830<pre><code>&lt;<b>nav</b>&gt;
831 &lt;<b>ul</b>&gt;
832 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
833 &lt;/<b>ul</b>&gt;
834 &lt;<b>ul</b>&gt;
835 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
836 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
837 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
838 &lt;/<b>ul</b>&gt;
839&lt;/<b>nav</b>&gt;</code></pre>
840
841 </article>
842 <p><code>&lt;<b>ul</b>&gt;</code> are automatically distributed horizontally.</p>
843 <p><code>&lt;<b>li</b>&gt;</code> are unstyled and inlined.</p>
844 <article aria-label="Nav example">
845 <nav>
846 <ul>
847 <li>
848 <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
849 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
850 <line x1="3" y1="12" x2="21" y2="12">
851 </line><line x1="3" y1="6" x2="21" y2="6">
852 </line><line x1="3" y1="18" x2="21" y2="18">
853 </line>
854 </svg>
855 </a>
856 </li>
857 </ul>
858 <ul>
859 <li><strong>Brand</strong></li>
860 </ul>
861 <ul>
862 <li>
863 <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
864 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
865 <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
866 </svg>
867 </a>
868 </li>
869 </ul>
870 </nav>
871
872<pre><code>&lt;<b>nav</b>&gt;
873 &lt;<b>ul</b>&gt;
874 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
875 &lt;/<b>ul</b>&gt;
876 &lt;<b>ul</b>&gt;
877 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
878 &lt;/<b>ul</b>&gt;
879 &lt;<b>ul</b>&gt;
880 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
881 &lt;/<b>ul</b>&gt;
882&lt;/<b>nav</b>&gt;</code></pre>
883
884 </article>
885 <p>Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked vertically.</p>
886 <article aria-label="Vertical nav example">
887 <aside>
888 <nav>
889 <ul>
890 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
891 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
892 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
893 </ul>
894 </nav>
895 </aside>
896
897<pre><code>&lt;<b>aside</b>&gt;
898 &lt;<b>nav</b>&gt;
899 &lt;<b>ul</b>&gt;
900 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
901 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
902 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
903 &lt;/<b>ul</b>&gt;
904 &lt;/<b>nav</b>&gt;
905&lt;/<b>aside</b>&gt;</code></pre>
906
907 </article>
908 </section><!-- ./ Docs: Nav -->
909
910 <!-- Docs: Tooltips -->
911 <section id="tooltips">
912 <hgroup>
913 <h2>Tooltips</h2>
914 <h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
915 </hgroup>
916 <article aria-label="Tooltips examples">
917 <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
918 <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
919 <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
920
921<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
922&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
923&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
924
925 </article>
926 </section><!-- ./ Docs: Nav -->
927
928 <!-- Love -->
929 <section id="love">
930 <h2>We love <code>.classes</code></h2>
931 <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
932 <p>But off course, <code>.classes</code> are not a bad practice at all.</p>
933 <p>Feel free to use <em>modifiers</em>.</p>
934 <div data-theme="valid">
935 <pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
936 </div>
937 <p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
938 <div data-theme="invalid">
939 <pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
940 </div>
941 </section><!-- ./ Love -->
942
943 <!-- Footer -->
944 <footer>
945 <hr>
946 <p>
947 <small>
948 Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a><br>
949 Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
950 </small>
951 </p>
952 </footer><!-- ./ Footer -->
953
954 </div><!-- ./ Document -->
955
956 </main><!-- ./ Main -->
957
958 <!-- JavaScript -->
959 <script src="js/pico.docs.min.js"></script>
960
961 </body>
962
963</html>