UNPKG

57.5 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="56px">
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="16px">
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 <li><a href="#tables" class="secondary">Tables</a></li>
72 </ul>
73 </details>
74 <details open>
75 <summary>Components</summary>
76 <ul>
77 <li><a href="#accordions" class="secondary">Accordions</a></li>
78 <li><a href="#cards" class="secondary">Cards</a></li>
79 <li><a href="#navs" class="secondary">Navs</a></li>
80 <li><a href="#progress" class="secondary">Progress</a></li>
81 <li><a href="#tooltips" class="secondary">Tooltips</a></li>
82 </ul>
83 </details>
84 <details open>
85 <summary>Extend</summary>
86 <ul>
87 <li>
88 <a href="#love" class="secondary">We love .classes</a>
89 </li>
90 </ul>
91 </details>
92 </nav>
93 </aside><!-- ./ Aside -->
94
95 <!-- Document -->
96 <div role="document">
97
98 <!-- Docs: Start -->
99 <section id="start">
100 <hgroup>
101 <h2>Usage</h2>
102 <h3>Work without package manager or dependencies 🙂!</h3>
103 </hgroup>
104 <p>There are 3 ways to get started with pico.css:</p>
105 <h4>Install manually</h4>
106 <p><a href="https://github.com/picocss/pico/releases/latest">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
107 <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
108 <h4>Install from CDN</h4>
109 <p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
110 <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>
111 <h4>Install with NPM</h4>
112 <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
113 <p>Starter HTML template:</p>
114
115<pre><code><em>&lt;!doctype html&gt;</em>
116&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
117 &lt;<b>head</b>&gt;
118 &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
119 &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;
120 &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
121 &lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
122 &lt;/<b>head</b>&gt;
123 &lt;<b>body</b>&gt;
124 &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;
125 &lt;<b>h1</b>&gt;Hello, world!&lt;/<b>h1</b>&gt;
126 &lt;/<b>main</b>&gt;
127 &lt;/<b>body</b>&gt;
128&lt;/<b>html</b>&gt;</code></pre>
129
130 </section><!-- ./ Docs: Start -->
131
132 <!-- Docs: Themes -->
133 <section id="themes">
134 <hgroup>
135 <h2>Themes</h2>
136 <h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
137 </hgroup>
138 <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>
139 <article aria-label="Theme switcher">
140 <button class="contrast theme-switcher">...</button>
141 </article>
142 <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>
143 <article data-theme="light" aria-label="Forced light theme example">
144 <h4>Light theme</h4>
145 <form class="grid">
146 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
147 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
148 <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
149 </form>
150
151<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
152 ...
153&lt;/<b>article</b>&gt;</code></pre>
154
155 </article>
156 <article data-theme="dark" aria-label="Forced dark theme example">
157 <h4>Dark theme</h4>
158 <form class="grid">
159 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
160 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
161 <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
162 </form>
163
164<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
165 ...
166&lt;/<b>article</b>&gt;</code></pre>
167
168 </article>
169 </section><!-- ./ Themes -->
170
171 <!-- Docs: Customization-->
172 <section id="customization">
173 <hgroup>
174 <h2>Customization</h2>
175 <h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
176 </hgroup>
177 <p>Example: <strong>pick a color!</strong></p>
178
179 <article data-theme="generated" aria-label="Generated theme example">
180 <h4><span class="name">Custom theme</span></h4>
181 <form>
182 <div class="grid">
183 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
184 <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
185 <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
186 </div>
187 <fieldset>
188 <label for="remember">
189 <input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
190 Remember me
191 </label>
192 </fieldset>
193 </form>
194 </article>
195 <p>There are 2 ways to customize your version of Pico.css:</p>
196 <h4>Importing SASS</h4>
197 <p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
198 <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
199
200<pre><code><em>/* Custom <span class="name"> </span>version */</em>
201
202<em>// Override default variables</em>
203<i>$primary-500</i>: <u class="c500">...</u>;
204<i>$primary-600</i>: <u class="c600">...</u>;
205<i>$primary-700</i>: <u class="c700">...</u>;
206
207<em>// Import full Pico source code</em>
208<b>@import</b> <u>"path/pico"</u>;</code></pre>
209
210 <p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
211
212<pre><code><em>/* Custom <span class="name"> </span>version */</em>
213
214<em>// Custom theme</em>
215<b>@import</b> <u>"path/themes/custom"</u>;
216
217<em>// Import needed components</em>
218<b>@import</b> <u>"path/layout/document"</u>;
219<b>@import</b> <u>"path/layout/sectioning"</u>;
220<em>...</em>
221</code></pre>
222
223 <p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
224 <h4>Overriding CSS variables</h4>
225 <p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
226
227<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
228/* Can be forced with data-theme="light" */</em>
229<b>[data-theme=<u>"light"</u>]</b>,
230<b>:root:not([data-theme=<u>"dark"</u>])</b> {
231 <i>--primary</i>: <u class="c600">...</u>;
232 <i>--primary-hover</i>: <u class="c700">...</u>;
233 <i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
234 <i>--primary-inverse</i>: <u class="inverse">...</u>;
235}
236
237<em>/* <span class="name"></span>Dark scheme (Auto) */
238/* Automatically enabled if user has Dark mode enabled */</em>
239<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
240 <b>:root:not([data-theme=<u>"light"</u>])</b> {
241 <i>--primary</i>: <u class="c600">...</u>;
242 <i>--primary-hover</i>: <u class="c500">...</u>;
243 <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
244 <i>--primary-inverse</i>: <u class="inverse">...</u>;
245 }
246}
247
248<em>/* <span class="name"></span>Dark scheme (Forced) */
249/* Enabled if forced with data-theme="dark" */</em>
250<b>[data-theme=<u>"dark"</u>]</b> {
251 <i>--primary</i>: <u class="c600">...</u>;
252 <i>--primary-hover</i>: <u class="c500">...</u>;
253 <i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
254 <i>--primary-inverse</i>: <u class="inverse">...</u>;
255}
256
257<em>/* <span class="name"></span>(Common styles) */</em>
258<b>:root</b> {
259 <i>--primary-border</i>: <u>var</u>(<i>--primary</i>);
260 <i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
261 <i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
262 <i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
263 <i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</i>);
264}
265</code></pre>
266
267 <p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/default.css</a></p>
268 </section><!-- ./ Docs: Customization -->
269
270
271 <!-- Docs: Classless -->
272 <section id="classless">
273 <hgroup>
274 <h2>Class-less version</h2>
275 <h3>For wild HTML purists!</h3>
276 </hgroup>
277 <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
278 <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>
279 <p><strong>Usage:</strong></p>
280 <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
281 <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>
282 <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
283 <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>
284 </section><!-- ./ Docs: Classless -->
285
286 <!-- Docs: Container -->
287 <section id="containers">
288 <hgroup>
289 <h2>Containers</h2>
290 <h3>
291 <code>.container</code> enable a centered viewport.<br>
292 <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
293 </h3>
294 </hgroup>
295
296<pre><code>&lt;<b>body</b>&gt;
297 &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
298&lt;/<b>body</b>&gt;</code></pre>
299
300 <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>
301 <figure>
302 <table role="grid">
303 <thead>
304 <tr>
305 <th>Device</th>
306 <th>Extra&nbsp;small</th>
307 <th>Small</th>
308 <th>Medium</th>
309 <th>Large</th>
310 <th>Extra&nbsp;large</th>
311 </tr>
312 </thead>
313 <tbody>
314 <tr>
315 <th>Breakpoint</th>
316 <td>&lt;576<small>px</small></td>
317 <td>≥576<small>px</small></td>
318 <td>≥768<small>px</small></td>
319 <td>≥992<small>px</small></td>
320 <td>≥1200<small>px</small></td>
321 </tr>
322 <tr>
323 <th>Viewport</th>
324 <td>None&nbsp;<small>(auto)</small></td>
325 <td>540<small>px</small></td>
326 <td>720<small>px</small></td>
327 <td>960<small>px</small></td>
328 <td>1140<small>px</small></td>
329 </tr>
330 </tbody>
331 </table>
332 </figure>
333 <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>
334 <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
335 </section><!-- ./ Docs: Container -->
336
337 <!-- Docs: Grid -->
338 <section id="grids">
339 <hgroup>
340 <h2>Grids</h2>
341 <h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
342 </hgroup>
343 <article aria-label="Grid example">
344 <div class="grid">
345 <div>1</div>
346 <div>2</div>
347 <div>3</div>
348 <div>4</div>
349 </div>
350
351<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
352 &lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
353 &lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
354 &lt;<b>div</b>&gt;3&lt;/<b>div</b>&gt;
355 &lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
356&lt;/<b>div</b>&gt;</code></pre>
357
358 </article>
359 <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
360 <p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
361 <details>
362 <summary>
363 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
364 <circle cx="12" cy="12" r="10"></circle>
365 <line x1="12" y1="16" x2="12" y2="12"></line>
366 <line x1="12" y1="8" x2="12.01" y2="8"></line>
367 </svg>
368 &nbsp;More about grids
369 </summary>
370 <p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
371 <p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
372 <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>
373 <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>
374 <p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
375 </details>
376
377 </section><!-- ./ Docs: Grid -->
378
379 <!-- Docs: Horizontal scroller -->
380 <section id="scroller">
381 <hgroup>
382 <h2>Horizontal scroller</h2>
383 <h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
384 </hgroup>
385 <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
386 <figure>
387 <table role="grid">
388 <thead>
389 <tr>
390 <th scope="col">#</th>
391 <th scope="col">Heading</th>
392 <th scope="col">Heading</th>
393 <th scope="col">Heading</th>
394 <th scope="col">Heading</th>
395 <th scope="col">Heading</th>
396 <th scope="col">Heading</th>
397 <th scope="col">Heading</th>
398 <th scope="col">Heading</th>
399 <th scope="col">Heading</th>
400 </tr>
401 </thead>
402 <tbody>
403 <tr>
404 <th scope="row">1</th>
405 <td>Cell</td>
406 <td>Cell</td>
407 <td>Cell</td>
408 <td>Cell</td>
409 <td>Cell</td>
410 <td>Cell</td>
411 <td>Cell</td>
412 <td>Cell</td>
413 <td>Cell</td>
414 </tr>
415 <tr>
416 <th scope="row">2</th>
417 <td>Cell</td>
418 <td>Cell</td>
419 <td>Cell</td>
420 <td>Cell</td>
421 <td>Cell</td>
422 <td>Cell</td>
423 <td>Cell</td>
424 <td>Cell</td>
425 <td>Cell</td>
426 </tr>
427 <tr>
428 <th scope="row">3</th>
429 <td>Cell</td>
430 <td>Cell</td>
431 <td>Cell</td>
432 <td>Cell</td>
433 <td>Cell</td>
434 <td>Cell</td>
435 <td>Cell</td>
436 <td>Cell</td>
437 <td>Cell</td>
438 </tr>
439 </tbody>
440 </table>
441 </figure>
442
443<pre><code>&lt;<b>figure</b>&gt;
444 &lt;<b>table</b>&gt;
445 ...
446 &lt;/<b>table</b>&gt;
447&lt;/<b>figure</b>&gt;</code></pre>
448
449 </section><!-- ./ Docs: Horizontal scroller -->
450
451 <!-- Docs: Typography -->
452 <section id="typography">
453 <hgroup>
454 <h2>Typography</h2>
455 <h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3>
456 </hgroup>
457 <figure>
458 <table role="grid">
459 <thead>
460 <tr>
461 <th>Device</th>
462 <th>Extra&nbsp;small</th>
463 <th>Small</th>
464 <th>Medium</th>
465 <th>Large</th>
466 <th>Extra&nbsp;large</th>
467 </tr>
468 </thead>
469 <tbody>
470 <tr>
471 <th>Base&nbsp;font</th>
472 <td>16<small>px</small></td>
473 <td>17<small>px</small></td>
474 <td>18<small>px</small></td>
475 <td>19<small>px</small></td>
476 <td>20<small>px</small></td>
477 </tr>
478 <tr>
479 <th>h1</th>
480 <td>32<small>px</small></td>
481 <td>34<small>px</small></td>
482 <td>36<small>px</small></td>
483 <td>38<small>px</small></td>
484 <td>40<small>px</small></td>
485 </tr>
486 <tr>
487 <th>h2</th>
488 <td>28<small>px</small></td>
489 <td>29<small>px</small></td>
490 <td>31.5<small>px</small></td>
491 <td>33.25<small>px</small></td>
492 <td>35<small>px</small></td>
493 </tr>
494 <tr>
495 <th>h3</th>
496 <td>24<small>px</small></td>
497 <td>25.5<small>px</small></td>
498 <td>27<small>px</small></td>
499 <td>28.5<small>px</small></td>
500 <td>30<small>px</small></td>
501 </tr>
502 <tr>
503 <th>h4</th>
504 <td>20<small>px</small></td>
505 <td>21.25<small>px</small></td>
506 <td>22.5<small>px</small></td>
507 <td>23.75<small>px</small></td>
508 <td>25<small>px</small></td>
509 </tr>
510 <tr>
511 <th>h5</th>
512 <td>18<small>px</small></td>
513 <td>19.125<small>px</small></td>
514 <td>20.25<small>px</small></td>
515 <td>21.375<small>px</small></td>
516 <td>22.5<small>px</small></td>
517 </tr>
518 <tr>
519 <th>h6</th>
520 <td>16<small>px</small></td>
521 <td>17<small>px</small></td>
522 <td>18<small>px</small></td>
523 <td>19<small>px</small></td>
524 <td>20<small>px</small></td>
525 </tr>
526 </tbody>
527 </table>
528 </figure>
529 <p>Headings:</p>
530 <article aria-label="Headings examples">
531 <h1>Heading 1</h1>
532 <h2>Heading 2</h2>
533 <h3>Heading 3</h3>
534 <h4>Heading 4</h4>
535 <h5>Heading 5</h5>
536 <h6>Heading 6</h6>
537
538<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
539&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
540&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
541&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
542&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
543&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
544
545 </article>
546 <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>
547 <article aria-label="Hgroup example">
548 <hgroup>
549 <h2>Heading 2</h2>
550 <h3>Subtitle for heading 2</h3>
551 </hgroup>
552
553<pre><code>&lt;<b>hgroup</b>&gt;
554 &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
555 &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
556&lt;<b>hgroup</b>&gt;</code></pre>
557
558 </article>
559 <p>Inline text elements:</p>
560 <article aria-label="Inline text examples">
561 <div class="grid">
562 <div>
563 <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
564 <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
565 <p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
566 <p><del>Deleted</del> <code>del</code></p>
567 <p><ins>Inserted</ins> <code>ins</code></p>
568 <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
569 </div>
570 <div>
571 <p><mark>Highlighted</mark> <code>mark</code></p>
572 <p><s>Strikethrough</s> <code>s</code></p>
573 <p><small>Small </small> <code>small</code></p>
574 <p>Text <sub>Sub</sub> <code>sub</code></p>
575 <p>Text <sup>Sup</sup> <code>sup</code></p>
576 <p><u>Underline</u> <code>u</code></p>
577 </div>
578 </div>
579 </article>
580 <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
581 <article aria-label="Links examples">
582 <a href="#" onclick="event.preventDefault()">Primary</a><br>
583 <a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
584 <a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
585
586<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
587&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
588&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
589
590 </article>
591 <p>Blockquote:</p>
592 <article aria-label="Blockquote example">
593 <blockquote>
594 "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
595 <footer>
596 <cite>- Phasellus eget lacinia</cite>
597 </footer>
598 </blockquote>
599
600<pre><code>&lt;<b>blockquote</b>&gt;
601 "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
602 &lt;<b>footer</b>&gt;
603 &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
604 &lt;/<b>footer</b>&gt;
605&lt;/<b>blockquote</b>&gt;</code></pre>
606
607 </article>
608 </section><!-- ./ Docs: Typography -->
609
610 <!-- Docs: Button -->
611 <section id="buttons">
612 <hgroup>
613 <h2>Buttons</h2>
614 <h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
615 </hgroup>
616 <article aria-label="Button example">
617 <button aria-label="Button">Button</button>
618 <input type="submit">
619
620<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
621&lt;<b>input</b> <i>type</i>=<u>"submit"</u>&gt;</code></pre>
622
623 </article>
624 <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>
625 <article aria-label="Inline buttons examples">
626 <a href="#" onclick="event.preventDefault()" role="button">Link</a>
627 <a href="#" onclick="event.preventDefault()" role="button">Link</a>
628
629<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
630&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre>
631
632 </article>
633 <p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
634 <article aria-label="Buttons styles examples">
635 <a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
636 <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
637
638<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;
639&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>
640
641 </article>
642 <p>And a classic <code>.outline</code> variant.</p>
643 <article aria-label="Outline style examples">
644 <a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
645 <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
646 <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
647
648<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;
649&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;
650&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>
651
652 </article>
653 </section><!-- ./ Docs: Button -->
654
655 <!-- Docs: Form -->
656 <section id="forms">
657 <hgroup>
658 <h2>Forms</h2>
659 <h3>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</h3>
660 </hgroup>
661 <p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
662 <p>All natives form elements are fully customized and themables with CSS variables.</p>
663 <article aria-label="Form example">
664 <form>
665 <div class="grid">
666 <label for="firstname">
667 First name
668 <input type="text" id="firstname" name="firstname" placeholder="First name" required>
669 </label>
670 <label for="lastname">
671 Last name
672 <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
673 </label>
674 </div>
675 <label for="email">Email address</label>
676 <input type="email" id="email" name="email" placeholder="Email address" required>
677 <small>We'll never share your email with anyone else.</small>
678 <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
679 </form>
680
681<pre><code>&lt;<b>form</b>&gt;
682
683 <em>&lt;!-- Grid --&gt;</em>
684 &lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
685
686 <em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
687 &lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
688 First name
689 &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;
690 &lt;/<b>label</b>&gt;
691
692 &lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
693 Last name
694 &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;
695 &lt;/<b>label</b>&gt;
696
697 &lt;/<b>div</b>&gt;
698
699 <em>&lt;!-- Markup example 2: input is after label --&gt;</em>
700 &lt;<b>label</b> <i>for</i>=<u>"email"</u>&gt;Email address&lt;/<b>label</b>&gt;
701 &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;
702 &lt;<b>small</b>&gt;We'll never share your email with anyone else.&lt;/<b>small</b>&gt;
703
704 <em>&lt;!-- Button --&gt;</em>
705 &lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;
706
707&lt;/<b>form</b>&gt;</code></pre>
708
709 </article>
710 <p>Disabled and validation states:</p>
711 <article aria-label="Validation states examples">
712 <form class="grid">
713 <input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
714 <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true">
715 <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
716 <input type="text" value="Readonly" aria-label="Readonly" readonly>
717 </form>
718
719<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
720&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
721&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
722&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
723
724 </article>
725 <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>
726 <p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
727 <article aria-label="Select, radios, checkboxes, switch examples">
728 <label for="country">Country</label>
729 <select id="country">
730 <option selected>Choose...</option>
731 <option>...</option>
732 </select>
733 <fieldset>
734 <legend>Gender</legend>
735 <label for="male">
736 <input type="radio" id="male" name="gender" value="male" checked>
737 Male
738 </label>
739 <label for="female">
740 <input type="radio" id="female" name="gender" value="female">
741 Female
742 </label>
743 <label for="other">
744 <input type="radio" id="other" name="gender" value="other">
745 Other
746 </label>
747 </fieldset>
748 <fieldset>
749 <label for="terms">
750 <input type="checkbox" id="terms" name="terms">
751 I agree to the Terms and Conditions
752 </label>
753 </fieldset>
754 <fieldset>
755 <label for="switch">
756 <input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
757 Publish on my profile
758 </label>
759 </fieldset>
760
761<pre><code><em>&lt;!-- Select --&gt;</em>
762&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt;
763&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt;
764 &lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt;
765 &lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
766&lt;/<b>select</b>&gt;
767
768<em>&lt;!-- Radios --&gt;</em>
769&lt;<b>fieldset</b>&gt;
770 &lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt;
771 &lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt;
772 &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;
773 Male
774 &lt;/<b>label</b>&gt;
775 &lt;<b>label</b> <i>for</i>=<u>"female"</u>&gt;
776 &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;
777 Female
778 &lt;/<b>label</b>&gt;
779 &lt;<b>label</b> <i>for</i>=<u>"other"</u>&gt;
780 &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;
781 Other
782 &lt;/<b>label</b>&gt;
783&lt;/<b>fieldset</b>&gt;
784
785<em>&lt;!-- Checkbox --&gt;</em>
786&lt;<b>fieldset</b>&gt;
787 &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
788 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
789 I agree to the Terms and Conditions
790 &lt;/<b>label</b>&gt;
791&lt;/<b>fieldset</b>&gt;
792
793<em>&lt;!-- Switch --&gt;</em>
794&lt;<b>fieldset</b>&gt;
795 &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
796 &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;
797 Publish on my profile
798 &lt;/<b>label</b>&gt;
799&lt;/<b>fieldset</b>&gt;</code></pre>
800
801 </article>
802 <p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
803 <article aria-label="Indeterminate checkbox example">
804 <label for="indeterminate-checkbox">
805 <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
806 Select all
807 </label>
808 <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
809
810<pre><code>&lt;<b>script</b>&gt;
811 <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
812&lt;/<b>script</b>&gt;</code></pre>
813
814 </article>
815
816 <p>Others input types:</p>
817 <article aria-label="File browser, range slider, date, time, color examples">
818 <label for="file">File browser
819 <input type="file" id="file" name="file">
820 </label>
821 <label for="range">Range slider
822 <input type="range" min="0" max="100" value="50" id="range" name="range">
823 </label>
824 <label for="date">Date
825 <input type="date" id="date" name="date">
826 </label>
827 <label for="time">Time
828 <input type="time" id="time" name="time">
829 </label>
830 <label for="color">Color
831 <input type="color" id="color" name="color" value="#0eaaaa">
832 </label>
833
834<pre><code><em>&lt;!-- File browser --&gt;</em>
835&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
836 &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
837&lt;/<b>label</b>&gt;
838
839<em>&lt;!-- Range slider --&gt;</em>
840&lt;<b>label</b> <i>for</i>=<u>"range"</u>&gt;Range slider
841 &lt;<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>&gt;
842&lt;/<b>label</b>&gt;
843
844<em>&lt;!-- Date --&gt;</em>
845&lt;<b>label</b> <i>for</i>=<u>"date"</u>&gt;Date
846 &lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>&gt;
847&lt;/<b>label</b>&gt;
848
849<em>&lt;!-- Time --&gt;</em>
850&lt;<b>label</b> <i>for</i>=<u>"time"</u>&gt;Time
851 &lt;<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>&gt;
852&lt;/<b>label</b>&gt;
853
854<em>&lt;!-- Color --&gt;</em>
855&lt;<b>label</b> <i>for</i>=<u>"color"</u>&gt;Color
856 &lt;<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
857&lt;/<b>label</b>&gt;</code></pre>
858
859 </article>
860 </section><!-- ./ Docs: Form -->
861
862 <!-- Docs: Tables -->
863 <section id="tables">
864 <hgroup>
865 <h2>Tables</h2>
866 <h3>Default styles for tables without <code>.classes</code></h3>
867 </hgroup>
868 <figure>
869 <table>
870 <thead>
871 <tr>
872 <th scope="col">#</th>
873 <th scope="col">Heading</th>
874 <th scope="col">Heading</th>
875 <th scope="col">Heading</th>
876 <th scope="col">Heading</th>
877 <th scope="col">Heading</th>
878 </tr>
879 </thead>
880 <tbody>
881 <tr>
882 <th scope="row">1</th>
883 <td>Cell</td>
884 <td>Cell</td>
885 <td>Cell</td>
886 <td>Cell</td>
887 <td>Cell</td>
888 </tr>
889 <tr>
890 <th scope="row">2</th>
891 <td>Cell</td>
892 <td>Cell</td>
893 <td>Cell</td>
894 <td>Cell</td>
895 <td>Cell</td>
896 </tr>
897 <tr>
898 <th scope="row">3</th>
899 <td>Cell</td>
900 <td>Cell</td>
901 <td>Cell</td>
902 <td>Cell</td>
903 <td>Cell</td>
904 </tr>
905 </tbody>
906 </table>
907 </figure>
908
909<pre><code>&lt;<b>table</b>&gt;
910 &lt;<b>thead</b>&gt;
911 &lt;<b>tr</b>&gt;
912 &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
913 &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
914 &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
915 &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
916 &lt;/<b>tr</b>&gt;
917 &lt;/<b>thead</b>&gt;
918 &lt;<b>tbody</b>&gt;
919 &lt;<b>tr</b>&gt;
920 &lt;<b>th</b> <i>scope</i>=<u>"row"</u>>1&lt;/<b>th</b>&gt;
921 &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
922 &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
923 &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
924 &lt;/<b>tr</b>&gt;
925 &lt;/<b>tbody</b>&gt;
926&lt;/<b>table</b>&gt;</code></pre>
927
928 <p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>
929 <figure>
930 <table role="grid">
931 <thead>
932 <tr>
933 <th scope="col">#</th>
934 <th scope="col">Heading</th>
935 <th scope="col">Heading</th>
936 <th scope="col">Heading</th>
937 <th scope="col">Heading</th>
938 <th scope="col">Heading</th>
939 </tr>
940 </thead>
941 <tbody>
942 <tr>
943 <th scope="row">1</th>
944 <td>Cell</td>
945 <td>Cell</td>
946 <td>Cell</td>
947 <td>Cell</td>
948 <td>Cell</td>
949 </tr>
950 <tr>
951 <th scope="row">2</th>
952 <td>Cell</td>
953 <td>Cell</td>
954 <td>Cell</td>
955 <td>Cell</td>
956 <td>Cell</td>
957 </tr>
958 <tr>
959 <th scope="row">3</th>
960 <td>Cell</td>
961 <td>Cell</td>
962 <td>Cell</td>
963 <td>Cell</td>
964 <td>Cell</td>
965 </tr>
966 </tbody>
967 </table>
968 </figure>
969
970<pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
971 <em>...</em>
972&lt;/<b>table</b>&gt;</code></pre>
973
974 </section><!-- ./ Docs: Tables -->
975
976 <!-- Docs: Accordions -->
977 <section id="accordions">
978 <hgroup>
979 <h2>Accordions</h2>
980 <h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
981 </hgroup>
982 <article aria-label="Accordions examples">
983 <details>
984 <summary>Collapsible elements 1</summary>
985 <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>
986 </details>
987 <details open>
988 <summary>Collapsible elements 2</summary>
989 <ul>
990 <li>Vestibulum id elit quis massa interdum sodales.</li>
991 <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
992 <li>Quisque sed eros non eros ornare elementum.</li>
993 <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
994 </ul>
995 </details>
996
997<pre><code>&lt;<b>details</b>&gt;
998 &lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
999 &lt;<b>p</b>&gt;...&lt;/<b>p</b>&gt;
1000&lt;/<b>details</b>&gt;
1001
1002&lt;<b>details</b> <i>open</i>&gt;
1003 &lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
1004 &lt;<b>ul</b>&gt;
1005 &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
1006 &lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
1007 &lt;/<b>ul</b>&gt;
1008&lt;/<b>details</b>&gt;</code></pre>
1009
1010 </article>
1011
1012 </section><!-- ./ Docs: Accordions -->
1013
1014 <!-- Docs: Cards -->
1015 <section id="cards">
1016 <hgroup>
1017 <h2>Cards</h2>
1018 <h3>A flexible container with graceful spacings across devices and viewport sizes.</h3>
1019 </hgroup>
1020 <article aria-label="Card example">
1021 I'm a card!
1022 </article>
1023 <pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre>
1024 <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>
1025 <article aria-label="Card sectioning example">
1026 Body
1027 <footer>Footer</footer>
1028 </article>
1029
1030<pre><code>&lt;<b>article</b>&gt;
1031 Body
1032 &lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
1033&lt;/<b>article</b>&gt;</code></pre>
1034
1035 </section><!-- ./ Docs: Card -->
1036
1037 <!-- Docs: Navs -->
1038 <section id="navs">
1039 <hgroup>
1040 <h2>Navs</h2>
1041 <h3>The essential navbar component in pure semantic HTML.</h3>
1042 </hgroup>
1043 <article aria-label="Nav example">
1044 <nav>
1045 <ul>
1046 <li><strong>Brand</strong></li>
1047 </ul>
1048 <ul>
1049 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1050 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1051 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1052 </ul>
1053 </nav>
1054
1055<pre><code>&lt;<b>nav</b>&gt;
1056 &lt;<b>ul</b>&gt;
1057 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
1058 &lt;/<b>ul</b>&gt;
1059 &lt;<b>ul</b>&gt;
1060 &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;
1061 &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;
1062 &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;
1063 &lt;/<b>ul</b>&gt;
1064&lt;/<b>nav</b>&gt;</code></pre>
1065
1066 </article>
1067 <p><code>&lt;<b>ul</b>&gt;</code> are automatically distributed horizontally.</p>
1068 <p><code>&lt;<b>li</b>&gt;</code> are unstyled and inlined.</p>
1069 <article aria-label="Nav example">
1070 <nav>
1071 <ul>
1072 <li>
1073 <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
1074 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1075 <line x1="3" y1="12" x2="21" y2="12">
1076 </line><line x1="3" y1="6" x2="21" y2="6">
1077 </line><line x1="3" y1="18" x2="21" y2="18">
1078 </line>
1079 </svg>
1080 </a>
1081 </li>
1082 </ul>
1083 <ul>
1084 <li><strong>Brand</strong></li>
1085 </ul>
1086 <ul>
1087 <li>
1088 <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
1089 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1090 <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>
1091 </svg>
1092 </a>
1093 </li>
1094 </ul>
1095 </nav>
1096
1097<pre><code>&lt;<b>nav</b>&gt;
1098 &lt;<b>ul</b>&gt;
1099 &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;
1100 &lt;/<b>ul</b>&gt;
1101 &lt;<b>ul</b>&gt;
1102 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
1103 &lt;/<b>ul</b>&gt;
1104 &lt;<b>ul</b>&gt;
1105 &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;
1106 &lt;/<b>ul</b>&gt;
1107&lt;/<b>nav</b>&gt;</code></pre>
1108
1109 </article>
1110 <p>Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked vertically.</p>
1111 <article aria-label="Vertical nav example">
1112 <aside>
1113 <nav>
1114 <ul>
1115 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1116 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1117 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
1118 </ul>
1119 </nav>
1120 </aside>
1121
1122<pre><code>&lt;<b>aside</b>&gt;
1123 &lt;<b>nav</b>&gt;
1124 &lt;<b>ul</b>&gt;
1125 &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;
1126 &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;
1127 &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;
1128 &lt;/<b>ul</b>&gt;
1129 &lt;/<b>nav</b>&gt;
1130&lt;/<b>aside</b>&gt;</code></pre>
1131
1132 </article>
1133 </section><!-- ./ Docs: Nav -->
1134
1135 <!-- Docs: Progress -->
1136 <section id="progress">
1137 <hgroup>
1138 <h2>Progress</h2>
1139 <h3>Progress bar element in pure HTML, without JavaScript.</h3>
1140 </hgroup>
1141 <article aria-label="Progress bar example">
1142 <progress value="25" max="100"></progress>
1143
1144<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
1145
1146 </article>
1147
1148 <p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
1149
1150 <article aria-label="Indeterminate progress bar example">
1151 <progress id="indeterminate-progress"></progress>
1152 <script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
1153
1154<pre><code>&lt;<b>script</b>&gt;
1155 <i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
1156&lt;/<b>script</b>&gt;</code></pre>
1157
1158 </article>
1159
1160 </section><!-- ./ Docs: Progress -->
1161
1162 <!-- Docs: Tooltips -->
1163 <section id="tooltips">
1164 <hgroup>
1165 <h2>Tooltips</h2>
1166 <h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
1167 </hgroup>
1168 <article aria-label="Tooltips examples">
1169 <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
1170 <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
1171 <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
1172
1173<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;
1174&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;
1175&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>
1176
1177 </article>
1178 </section><!-- ./ Docs: Tooltips -->
1179
1180 <!-- Love -->
1181 <section id="love">
1182 <h2>We love <code>.classes</code></h2>
1183 <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
1184 <p>But off course, <code>.classes</code> are not a bad practice at all.</p>
1185 <p>Feel free to use <em>modifiers</em>.</p>
1186 <div data-theme="valid">
1187 <pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
1188 </div>
1189 <p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
1190 <div data-theme="invalid">
1191 <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>
1192 </div>
1193 </section><!-- ./ Love -->
1194
1195 <!-- Footer -->
1196 <footer>
1197 <hr>
1198 <p>
1199 <small>
1200 Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>, <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a> & <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a><br>
1201 Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
1202 </small>
1203 </p>
1204 </footer><!-- ./ Footer -->
1205
1206 </div><!-- ./ Document -->
1207
1208 </main><!-- ./ Main -->
1209
1210 <!-- JavaScript -->
1211 <script src="js/pico.docs.min.js"></script>
1212
1213 </body>
1214
1215</html>