Skip to content

Commit bbb53c7

Browse files
committed
Docs: separate pages
1 parent cea5c8c commit bbb53c7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2994
-1498
lines changed

README.md

-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,6 @@ Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LIC
178178

179179
Website and docs:
180180
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
181-
- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
182181
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
183182

184183
Pico Library:

docs/accordions.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordions • Pico.css</title><meta name="description" content="Toggle sections of content in pure HTML, without JavaScript."><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://www.picocss.com/docs/accordions.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><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"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><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></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav><h1>Documentation</h1><details><summary>Getting started</summary><ul><li><a href="./" id="start-link" class="secondary">Usage</a></li><li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li><li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li><li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li><li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li></ul></details><details><summary>Layout</summary><ul><li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li><li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li><li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li></ul></details><details><summary>Elements</summary><ul><li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li><li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li><li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li><li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li></ul></details><details><summary>Components</summary><ul><li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li><li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li><li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li><li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li></ul></details><details><summary>Utilities</summary><ul><li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li><li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li></ul></details><details><summary>Extend</summary><ul><li><a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a></li></ul></details></nav></aside><script>const activeLink=document.querySelector("aside a#accordions-link"),parentAccordion=activeLink.closest("details");activeLink.classList.add("active"),parentAccordion.setAttribute("open","true")</script><div role="document"><section id="accordions"><hgroup><h2>Accordions</h2><h3>Toggle sections of content in pure HTML, without JavaScript.</h3></hgroup><article aria-label="Accordions examples"><details><summary>Collapsible elements 1</summary><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></details><details open><summary>Collapsible elements 2</summary><ul><li>Vestibulum id elit quis massa interdum sodales.</li><li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li><li>Quisque sed eros non eros ornare elementum.</li><li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li></ul></details><footer class="code"><pre><code>&lt;<b>details</b>&gt;
2+
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
3+
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
4+
&lt;/<b>details</b>&gt;
5+
6+
&lt;<b>details</b> <i>open</i>&gt;
7+
&lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
8+
&lt;<b>ul</b>&gt;
9+
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
10+
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
11+
&lt;/<b>ul</b>&gt;
12+
&lt;/<b>details</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>

docs/buttons.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Buttons • Pico.css</title><meta name="description" content="The essential button in pure HTML, without .classes for the default style."><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://www.picocss.com/docs/buttons.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><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"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><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></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav><h1>Documentation</h1><details><summary>Getting started</summary><ul><li><a href="./" id="start-link" class="secondary">Usage</a></li><li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li><li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li><li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li><li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li></ul></details><details><summary>Layout</summary><ul><li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li><li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li><li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li></ul></details><details><summary>Elements</summary><ul><li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li><li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li><li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li><li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li></ul></details><details><summary>Components</summary><ul><li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li><li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li><li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li><li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li></ul></details><details><summary>Utilities</summary><ul><li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li><li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li></ul></details><details><summary>Extend</summary><ul><li><a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a></li></ul></details></nav></aside><script>const activeLink=document.querySelector("aside a#buttons-link"),parentAccordion=activeLink.closest("details");activeLink.classList.add("active"),parentAccordion.setAttribute("open","true")</script><div role="document"><section id="buttons"><hgroup><h2>Buttons</h2><h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3></hgroup><article aria-label="Button example"><button aria-label="Button">Button</button> <input type="submit"><footer class="code"><pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
2+
&lt;<b>input</b> <i>type</i>=<u>"submit"</u>&gt;</code></pre></footer></article><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><article aria-label="Inline buttons examples"><a href="#" onclick="event.preventDefault()" role="button">Link</a> <a href="#" onclick="event.preventDefault()" role="button">Link</a><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;
3+
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p><article aria-label="Buttons styles examples"><a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a><footer class="code"><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;
4+
&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></footer></article><p>And a classic <code>.outline</code> variant.</p><article aria-label="Outline style examples"><a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a> <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a><footer class="code"><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;
5+
&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;
6+
&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></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>

0 commit comments

Comments
 (0)