mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-16 19:25:24 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Docs: Sidebar styles

Browse source
This commit is contained in:
Lucas Larroche 2021-11-02 00:20:55 +07:00
parent 7e02e9f959
commit c71144455b
52 changed files with 247 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

29
docs/src/_sidebar.html
View file

@ -1,6 +1,16 @@
<aside>
<nav>
<h1>Documentation</h1>
<nav class="closed-on-mobile">
<a href="./" class="secondary" id="toggle-docs-navigation">
<svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16">
<title>Expand</title>
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16">
<title>Collapse</title>
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
</svg>
Table of content
</a>
<details>
<summary>Getting started</summary>
<ul>
@ -53,11 +63,10 @@
</ul>
</details>
</nav>
</aside>
<script>
const activeLink = document.querySelector(`aside a#${props.active}`);
const parentAccordion = activeLink.closest('details');
activeLink.classList.add('active');
parentAccordion.setAttribute('open', 'true');
</script>
<script>
const activeLink = document.querySelector(`aside a#${props.active}`);
const parentAccordion = activeLink.closest('details');
activeLink.classList.add('active');
parentAccordion.setAttribute('open', 'true');
</script>
</aside>

4
docs/src/accordions.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="accordions">
<hgroup>
<h2>Accordions</h2>
<h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
<h1>Accordions</h1>
<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
</hgroup>
<article aria-label="Accordions examples">
<details>

4
docs/src/buttons.html
View file

@ -17,8 +17,8 @@
<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>
<h1>Buttons</h1>
<h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
</hgroup>
<article aria-label="Button example">
<button aria-label="Button">Button</button>

4
docs/src/cards.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="cards">
<hgroup>
<h2>Cards</h2>
<h3>A flexible container with graceful spacings across devices and viewports.</h3>
<h1>Cards</h1>
<h2>A flexible container with graceful spacings across devices and viewports.</h2>
</hgroup>
<article aria-label="Card example">
I'm a card!

4
docs/src/classless.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="classless">
<hgroup>
<h2>Class-less version</h2>
<h3>For wild HTML purists!</h3>
<h1>Class-less version</h1>
<h2>For wild HTML purists!</h2>
</hgroup>
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<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.html">containers</a> to define a centered or a fluid viewport.</p>

6
docs/src/containers.html
View file

@ -17,11 +17,11 @@
<div role="document">
<section id="containers">
<hgroup>
<h2>Containers</h2>
<h3>
<h1>Containers</h1>
<h2>
<code>.container</code> enable a centered viewport.<br>
<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
</h3>
</h2>
</hgroup>
<pre><code>&lt;<b>body</b>&gt;

4
docs/src/customization.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="customization">
<hgroup>
<h2>Customization</h2>
<h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
<h1>Customization</h1>
<h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
</hgroup>
<p>Example: <strong>pick a color!</strong></p>

4
docs/src/forms.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="forms">
<hgroup>
<h2>Forms</h2>
<h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
<h1>Forms</h1>
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
</hgroup>
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>

4
docs/src/grid.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="grid">
<hgroup>
<h2>Grid</h2>
<h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
<h1>Grid</h1>
<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
</hgroup>
<article aria-label="Grid example">
<div class="grid">

4
docs/src/index.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="start">
<hgroup>
<h2>Usage</h2>
<h3>Works without package manager or dependencies 🙂!</h3>
<h1>Usage</h1>
<h2>Works without package manager or dependencies 🙂!</h2>
</hgroup>
<p>There are 3 ways to get started with pico.css:</p>
<h4>Install manually</h4>

4
docs/src/loading.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="loading">
<hgroup>
<h2>Loading</h2>
<h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
<h1>Loading</h1>
<h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
</hgroup>
<article aria-label="Loading buttons example">
<button aria-busy="true">Please wait…</button>

4
docs/src/navs.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="navs">
<hgroup>
<h2>Navs</h2>
<h3>The essential navbar component in pure semantic HTML.</h3>
<h1>Navs</h1>
<h2>The essential navbar component in pure semantic HTML.</h2>
</hgroup>
<article aria-label="Nav example">
<nav>

4
docs/src/progress.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="progress">
<hgroup>
<h2>Progress</h2>
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
<h1>Progress</h1>
<h2>Progress bar element in pure HTML, without JavaScript.</h2>
</hgroup>
<article aria-label="Progress bar example">
<progress value="25" max="100"></progress>

4
docs/src/rtl.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="rtl">
<hgroup>
<h2>RTL</h2>
<h3>Support for right-to-left text in Pico.</h3>
<h1>RTL</h1>
<h2>Support for right-to-left text in Pico.</h2>
</hgroup>
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element.</p>

4
docs/src/scroller.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="scroller">
<hgroup>
<h2>Horizontal scroller</h2>
<h3><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h3>
<h1>Horizontal scroller</h1>
<h2><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h2>
</hgroup>
<p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
<figure>

4
docs/src/tables.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="tables">
<hgroup>
<h2>Tables</h2>
<h3>Default styles for tables without <code>.classes</code></h3>
<h1>Tables</h1>
<h2>Default styles for tables without <code>.classes</code></h2>
</hgroup>
<figure>
<table>

4
docs/src/themes.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="themes">
<hgroup>
<h2>Themes</h2>
<h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
<h1>Themes</h1>
<h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
</hgroup>
<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>
<article aria-label="Theme switcher">

4
docs/src/tooltips.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="tooltips">
<hgroup>
<h2>Tooltips</h2>
<h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
<h1>Tooltips</h1>
<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
</hgroup>
<article aria-label="Tooltips examples">
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>

4
docs/src/typography.html
View file

@ -17,8 +17,8 @@
<div role="document">
<section id="typography">
<hgroup>
<h2>Typography</h2>
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
<h1>Typography</h1>
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
</hgroup>
<figure>
<table role="grid">

2
docs/src/we-love-classes.html
View file

@ -16,7 +16,7 @@
<div role="document">
<section id="we-love-classes">
<h2>We love <code>.classes</code></h2>
<h1>We love <code>.classes</code></h1>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
<p>But of course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>