mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Update index.html
Make hamburger nav show under xxl viewport replaced spaces with tabs.
This commit is contained in:
JWB
GitHub
parent
f25840f51a
commit
bfdf6dbf6c
1 changed files with 189 additions and 188 deletions
377
docs/index.html
377
docs/index.html
|
|
@ -27,11 +27,11 @@
|
|||
<link rel="stylesheet" href="pico.min.css" />
|
||||
<link rel="stylesheet" href="pico.colors.min.css" />
|
||||
|
||||
<!--
|
||||
Yohn's Simple CSS Class helpers
|
||||
I might add these to the main PicoCSS later
|
||||
-->
|
||||
<link rel="stylesheet" href="basics.css" />
|
||||
<!--
|
||||
Yohn's Simple CSS Class helpers
|
||||
I might add these to the main PicoCSS later
|
||||
-->
|
||||
<link rel="stylesheet" href="basics.css" />
|
||||
<style>
|
||||
:root {
|
||||
--pico-logo-wordmark: #fff;
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<aside>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
||||
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
||||
<li><a href="#tab-regions">Tabs [role="region"]</a></li>
|
||||
<li><a href="#tooltip">Tooltip</a></li>
|
||||
<li><a href="#floating-labels">Floating Labels [role="form"]</a></li>
|
||||
|
|
@ -103,129 +103,130 @@
|
|||
<!-- hamburger-menu -->
|
||||
<article id="hamburger-menu">
|
||||
<header>
|
||||
<h2>Hamburger Menu <code>nav[role="navigation"]</code></h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<h2>Hamburger Menu <code>nav[role="navigation"]</code></h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<p>Use the default <code><nav></code> component in <a href="https://picocss.com/docs/nav">Pico CSS</a> docs, but add the <code>role="navigation"</code> attribute to the <code><nav></code>.</p>
|
||||
<h5>Positioning</h5>
|
||||
<p>The default position puts your nav links and burger menu at the end of the line, but <code>data-position="start"</code> will put them at the start of the line.</p>
|
||||
<h5>Breakpoints</h5>
|
||||
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the same breakpoints <a href="#rows">the .row</a> uses.</p>
|
||||
<h5>Hamburger Icon</h5>
|
||||
<p>Before the list of elements you want to be within the burger menu, add the following:</p>
|
||||
<code>
|
||||
<input type="checkbox" id="YOUR-ID" /><br>
|
||||
<label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
|
||||
</code>
|
||||
<p>Change <code>YOUR-ID</code> to whatever id you want to use, but ensure the id for the checkbox, is the same as the id for the label.</p>
|
||||
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <code>input[type="checkbox"]</code> within the <code><label></code> element, it will not work correctly if you do that.</blockquote>
|
||||
<h6>Custom Hamburger Icon?</h6>
|
||||
<p>Replace the <code>&#x2261;</code> with your own icon, svg element, or image.</p>
|
||||
<h5>Collapsed List</h5>
|
||||
<p>Add <code>role="list"</code> attribute to the <code><ul></code> or <code><ol></code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code><li></code> element.</p>
|
||||
<hr>
|
||||
<nav role="navigation" data-position="start" data-breakpoint="xxlg">
|
||||
<ul>
|
||||
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><strong>Like Us on GitHub!</strong></li>
|
||||
</ul>
|
||||
<input type="checkbox" id="menu-btn" />
|
||||
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.5);">
|
||||
≡
|
||||
</label>
|
||||
<ol role="list">
|
||||
<li role="listitem"><a href="#">Home</a></li>
|
||||
<li role="listitem"><a href="#">About</a></li>
|
||||
<li role="listitem"><a href="#">Services</a></li>
|
||||
<li role="listitem"><a href="#">Login</a></li>
|
||||
<li role="listitem"><a href="#">Sign Up</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h5>Positioning</h5>
|
||||
<p>The default position puts your nav links and burger menu at the end of the line, but <code>data-position="start"</code> will put them at the start of the line.</p>
|
||||
<h5>Breakpoints</h5>
|
||||
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the same breakpoints <a href="#rows">the .row</a> uses.</p>
|
||||
<h5>Hamburger Icon</h5>
|
||||
<p>Before the list of elements you want to be within the burger menu, add the following:</p>
|
||||
<code>
|
||||
<input type="checkbox" id="YOUR-ID" /><br>
|
||||
<label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
|
||||
</code>
|
||||
<p>Change <code>YOUR-ID</code> to whatever id you want to use, but ensure the id for the checkbox, is the same as the id for the label.</p>
|
||||
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <code>input[type="checkbox"]</code> within the <code><label></code> element, it will not work correctly if you do that.</blockquote>
|
||||
<h6>Custom Hamburger Icon?</h6>
|
||||
<p>Replace the <code>&#x2261;</code> with your own icon, svg element, or image.</p>
|
||||
<h5>Collapsed List</h5>
|
||||
<p>Add <code>role="list"</code> attribute to the <code><ul></code> or <code><ol></code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code><li></code> element.</p>
|
||||
<hr>
|
||||
<h3>Example Hamburger Menu (resize width of screen if you don't see it)</h3>
|
||||
<nav role="navigation" data-position="start" data-breakpoint="xxl">
|
||||
<ul>
|
||||
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><strong>Like Us on GitHub!</strong></li>
|
||||
</ul>
|
||||
<input type="checkbox" id="menu-btn" />
|
||||
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.5);">
|
||||
≡
|
||||
</label>
|
||||
<ol role="list">
|
||||
<li role="listitem"><a href="#">Home</a></li>
|
||||
<li role="listitem"><a href="#">About</a></li>
|
||||
<li role="listitem"><a href="#">Services</a></li>
|
||||
<li role="listitem"><a href="#">Login</a></li>
|
||||
<li role="listitem"><a href="#">Sign Up</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</article>
|
||||
<!-- /hamburger-menu -->
|
||||
<hr>
|
||||
<hr>
|
||||
<!-- Tabs -->
|
||||
<article id="tab-regions">
|
||||
<header>
|
||||
<h2>Tabs <code>section[role="region"]</code></h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<h3 class="mt-0">Information</h3>
|
||||
<ul class="pb-0">
|
||||
<li>I wanted this to work without javascript</li>
|
||||
<li>I wanted to use the <code><details></code> and <code><summary></code> tags.</li></ul>
|
||||
<h3 class="mt-0">Grips</h3>
|
||||
<ol>
|
||||
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <code><details></code> and <code><summary></code> tags.</li>
|
||||
<li><code><section></code> in theory has a default <code>role</code> attribute value of <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and no JavaScript!</li>
|
||||
<header>
|
||||
<h2>Tabs <code>section[role="region"]</code></h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<h3 class="mt-0">Information</h3>
|
||||
<ul class="pb-0">
|
||||
<li>I wanted this to work without javascript</li>
|
||||
<li>I wanted to use the <code><details></code> and <code><summary></code> tags.</li></ul>
|
||||
<h3 class="mt-0">Grips</h3>
|
||||
<ol>
|
||||
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <code><details></code> and <code><summary></code> tags.</li>
|
||||
<li><code><section></code> in theory has a default <code>role</code> attribute value of <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and no JavaScript!</li>
|
||||
|
||||
</ol>
|
||||
<hr>
|
||||
<h2>Example Tabs with no JavaScript:</h2>
|
||||
<!-- start tab example -->
|
||||
</ol>
|
||||
<hr>
|
||||
<h2>Example Tabs with no JavaScript:</h2>
|
||||
<!-- start tab example -->
|
||||
<section role="region">
|
||||
<details name="lets-go" open>
|
||||
<summary>Tab 1</summary>
|
||||
<div>
|
||||
<p>Content for Tab 1</p>
|
||||
<p>Content for Tab 1</p>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 2</summary>
|
||||
<div>
|
||||
<p>Just a random table</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>row 1 col 1</td>
|
||||
<td>row 1 col 2</td>
|
||||
<td>row 1 col 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2 col 1</td>
|
||||
<td>row 2 col 2</td>
|
||||
<td>row 2 col 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 3 col 1</td>
|
||||
<td>row 3 col 2</td>
|
||||
<td>row 3 col 3</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 3</summary>
|
||||
<div>
|
||||
<form action="javascript:void(0);">
|
||||
<section role="form">
|
||||
<input type="text" id="name" name="name" placeholder="Name:" required>
|
||||
<label for="name">Name:</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<input type="email" id="email" name="email" placeholder="Email:" required>
|
||||
<label for="email">Email:</label>
|
||||
</section>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 4</summary>
|
||||
<div>
|
||||
<p>Content for Tab 4</p>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 5</summary>
|
||||
<div>
|
||||
<p>Content for Tab 5</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
<!-- / tab example -->
|
||||
<details name="lets-go" open>
|
||||
<summary>Tab 1</summary>
|
||||
<div>
|
||||
<p>Content for Tab 1</p>
|
||||
<p>Content for Tab 1</p>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 2</summary>
|
||||
<div>
|
||||
<p>Just a random table</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>row 1 col 1</td>
|
||||
<td>row 1 col 2</td>
|
||||
<td>row 1 col 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2 col 1</td>
|
||||
<td>row 2 col 2</td>
|
||||
<td>row 2 col 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 3 col 1</td>
|
||||
<td>row 3 col 2</td>
|
||||
<td>row 3 col 3</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 3</summary>
|
||||
<div>
|
||||
<form action="javascript:void(0);">
|
||||
<section role="form">
|
||||
<input type="text" id="name" name="name" placeholder="Name:" required>
|
||||
<label for="name">Name:</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<input type="email" id="email" name="email" placeholder="Email:" required>
|
||||
<label for="email">Email:</label>
|
||||
</section>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 4</summary>
|
||||
<div>
|
||||
<p>Content for Tab 4</p>
|
||||
</div>
|
||||
</details>
|
||||
<details name="lets-go">
|
||||
<summary>Tab 5</summary>
|
||||
<div>
|
||||
<p>Content for Tab 5</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
<!-- / tab example -->
|
||||
</article>
|
||||
<!-- /Tabs -->
|
||||
<hr>
|
||||
|
|
@ -241,51 +242,51 @@
|
|||
</article>
|
||||
<!-- /Tooltip -->
|
||||
<hr>
|
||||
<!-- Floating Labels -->
|
||||
<!-- Floating Labels -->
|
||||
<article id="floating-labels">
|
||||
<header>
|
||||
<h2>Floating Labels</h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <code><section></code> tag, ensure you have a <code>placeholder="example"</code> attribute on your input or textarea tags, and that placeholder value needs to be the same value that is used within the label tag, which would go after your form element.</textarea></code>.</p>
|
||||
<hr>
|
||||
<form action="javascript:void(0);" novalidate>
|
||||
<section role="form">
|
||||
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name">
|
||||
<label for="fl-name-ele" id="fl-name">Name</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" aria-labelledby="fl-email">
|
||||
<label for="fl-email-ele" id="fl-email">Email</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
|
||||
<option selected disabled value="">Topic</option>
|
||||
<option>General</option>
|
||||
<option>Support</option>
|
||||
<option>Feedback</option>
|
||||
</select>
|
||||
<label for="fl-topic-ele" id="fl-topic">Topic</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" aria-labelledby="fl-message"></textarea>
|
||||
<label for="fl-message-ele" id="fl-message">Message</label>
|
||||
</section>
|
||||
</form>
|
||||
</article>
|
||||
<header>
|
||||
<h2>Floating Labels</h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <code><section></code> tag, ensure you have a <code>placeholder="example"</code> attribute on your input or textarea tags, and that placeholder value needs to be the same value that is used within the label tag, which would go after your form element.</textarea></code>.</p>
|
||||
<hr>
|
||||
<form action="javascript:void(0);" novalidate>
|
||||
<section role="form">
|
||||
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name">
|
||||
<label for="fl-name-ele" id="fl-name">Name</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" aria-labelledby="fl-email">
|
||||
<label for="fl-email-ele" id="fl-email">Email</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
|
||||
<option selected disabled value="">Topic</option>
|
||||
<option>General</option>
|
||||
<option>Support</option>
|
||||
<option>Feedback</option>
|
||||
</select>
|
||||
<label for="fl-topic-ele" id="fl-topic">Topic</label>
|
||||
</section>
|
||||
<section role="form">
|
||||
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" aria-labelledby="fl-message"></textarea>
|
||||
<label for="fl-message-ele" id="fl-message">Message</label>
|
||||
</section>
|
||||
</form>
|
||||
</article>
|
||||
<!-- /Floating Labels -->
|
||||
<hr>
|
||||
<!-- Validation -->
|
||||
<!-- Validation -->
|
||||
<form action="javascript:void(0);" id="validate">
|
||||
<article>
|
||||
<header>
|
||||
<h2>Validation</h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<h2>Validation</h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
<p>
|
||||
Using form :user-valid and :user-invalid.</p>
|
||||
<p>You can disable the validation by adding the attribute <code>novalidate</code> to the form tag.
|
||||
<p>Classless except for the file input button previews.</p>
|
||||
<p>You can disable the validation by adding the attribute <code>novalidate</code> to the form tag.
|
||||
<p>Classless except for the file input button previews.</p>
|
||||
</p>
|
||||
<input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}" required>
|
||||
<small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small>
|
||||
|
|
@ -336,10 +337,10 @@
|
|||
<!-- Group -->
|
||||
<article id="group">
|
||||
<header>
|
||||
<h2>Group</h2>
|
||||
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
||||
</header>
|
||||
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
||||
<h2>Group</h2>
|
||||
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
||||
</header>
|
||||
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
||||
<form action="javascript:void(0);" novalidate>
|
||||
<div role="group">
|
||||
<label for="email">Email:</label>
|
||||
|
|
@ -532,35 +533,35 @@
|
|||
--pico-timeline-line-color: var(--pico-primary-background);<br>
|
||||
--pico-timeline-dot-background-color: var(--pico-primary-inverse);<br>
|
||||
--pico-timeline-dot-border-color: var(--pico-primary-background);<br>
|
||||
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
|
||||
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
|
||||
</div>
|
||||
</details>
|
||||
</header>
|
||||
<div class="timeline">
|
||||
<section class="point left">
|
||||
<article>
|
||||
<header><h3>2017</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point right">
|
||||
<article>
|
||||
<header><h3>2016</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point left">
|
||||
<article>
|
||||
<header><h3>2015</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point right">
|
||||
<article>
|
||||
<header><h3>2012</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point left">
|
||||
<article>
|
||||
<header><h3>2017</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point right">
|
||||
<article>
|
||||
<header><h3>2016</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point left">
|
||||
<article>
|
||||
<header><h3>2015</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="point right">
|
||||
<article>
|
||||
<header><h3>2012</h3></header>
|
||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue