UNPKG

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