forked from picocss/pico
-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes Hamburger Menu show part of menu below #49
Fixes Accordion chevron padding picocss#653 Demo has been updated with new hamburger nav example.
- Loading branch information
Showing
8 changed files
with
119 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -83,7 +83,7 @@ There are 4 ways to get started with pico.css: | |
| Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css. | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.min.css" /> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.min.css" /> | ||
| ``` | ||
|
|
||
| ### Install with NPM | ||
|
|
@@ -141,7 +141,7 @@ Use the default `.classless` version if you need centered viewports: | |
| ```html | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.classless.min.css" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.classless.min.css" | ||
| /> | ||
| ``` | ||
|
|
||
|
|
@@ -150,7 +150,7 @@ Or use the `.fluid.classless` version if you need a fluid container: | |
| ```html | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.fluid.classless.min.css" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.fluid.classless.min.css" | ||
| /> | ||
| ``` | ||
|
|
||
|
|
@@ -165,7 +165,7 @@ Then just write pure HTML, and it should look great: | |
| <meta name="color-scheme" content="light dark" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].8/css/pico.classless.min.css" | ||
| href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].9/css/pico.classless.min.css" | ||
| /> | ||
| <title>Hello, world!</title> | ||
| </head> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,7 +24,7 @@ | |
| <link rel="manifest" href="manifest.json"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"> | ||
| <!-- Pico.css --> | ||
| <link rel="stylesheet" href="pico.min.css" id="theme-color-ss"> | ||
| <link rel="stylesheet" href="pico.css" id="theme-color-ss"> | ||
| <link rel="stylesheet" href="pico.colors.min.css"> | ||
| <!-- | ||
| Yohn's Simple CSS Class helpers | ||
|
|
@@ -216,7 +216,7 @@ | |
| <main class="col-12 col-md-9 col-lg-10"> | ||
| <article> | ||
| <header> | ||
| <h2>Yohns PicoCSS Fork v2.2.8</h2> | ||
| <h2>Yohns PicoCSS Fork v2.2.9</h2> | ||
| </header> | ||
| <p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a> | ||
| repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted | ||
|
|
@@ -230,6 +230,10 @@ <h2>Yohns PicoCSS Fork v2.2.8</h2> | |
| href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as | ||
| the preview here. I may get a build script going to compile the javascript plugins / components later. Let | ||
| me know if this feature would help you.</p> | ||
| <hr> | ||
| <h3><details class="hide-arrow"></h3> | ||
| <p>With classes enabled, adding the <code>hide-arrow</code> class to your <code><details class="hide-arrow"></code> will hide the arrow on the <code><summary></code> tag within the accordion and dropdown components.</p> | ||
|
|
||
| <footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork! | ||
| </footer> | ||
| </article> | ||
|
|
@@ -531,25 +535,25 @@ <h6>(resize width of screen if you don't see it)</h6> | |
| </ul> | ||
| <input type="checkbox" id="menu-btn" /> | ||
| <!-- role="button" --> | ||
| <label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" | ||
| <label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" | ||
| aria-controls="nav-example"> ≡ </label> | ||
| <ol id="nav-example" role="list"> | ||
| <li role="listitem"><a href="#">Home</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Home</a></li> | ||
| <li role="listitem"> | ||
| <details class="dropdown"> | ||
| <summary class="secondary">About</summary> | ||
| <details class="dropdown hide-arrow"> | ||
| <summary class="secondary" role="button">About</summary> | ||
| <ul> | ||
| <li><a class="load-page" href="#">What’s new in v2?</a></li> | ||
| <li><a class="load-page" href="#">Mission</a></li> | ||
| <li><a class="load-page" href="#">Usage scenarios</a></li> | ||
| <li><a class="load-page" href="#">Brand</a></li> | ||
| <li><a class="load-page" href="#">Built With</a></li> | ||
| <li><a href="javascript:void(0);">What’s new in v2?</a></li> | ||
| <li><a href="javascript:void(0);">Mission</a></li> | ||
| <li><a href="javascript:void(0);">Usage scenarios</a></li> | ||
| <li><a href="javascript:void(0);">Brand</a></li> | ||
| <li><a href="javascript:void(0);">Built With</a></li> | ||
| </ul> | ||
| </details> | ||
| </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> | ||
| <li role="listitem"><a href="javascript:void(0);">Services</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Login</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Sign Up</a></li> | ||
| </ol> | ||
| </nav> | ||
| <!-- End Responsive Nav 1 --> | ||
|
|
@@ -563,29 +567,59 @@ <h3>Hamburger Menu Under Nav Example</h3> | |
| <li><strong>Like Us on GitHub!</strong></li> | ||
| </ul> | ||
| <input type="checkbox" id="menu-btn2"> | ||
| <label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" | ||
| <label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" | ||
| aria-controls="nav-example2"> ≡ </label> | ||
| <ol id="nav-example2" role="list"> | ||
| <li role="listitem"><a href="#">Home</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Home</a></li> | ||
| <li role="listitem"> | ||
| <details class="dropdown"> | ||
| <summary class="secondary">About</summary> | ||
| <details class="dropdown hide-arrow"> | ||
| <summary>About 2</summary> | ||
| <ul> | ||
| <li><a class="load-page" href="#">What’s new in v2?</a></li> | ||
| <li><a class="load-page" href="#">Mission</a></li> | ||
| <li><a class="load-page" href="#">Usage scenarios</a></li> | ||
| <li><a class="load-page" href="#">Brand</a></li> | ||
| <li><a class="load-page" href="#">Built With</a></li> | ||
| <li><a href="javascript:void(0);">What’s new in v2?</a></li> | ||
| <li><a href="javascript:void(0);">Mission</a></li> | ||
| <li><a href="javascript:void(0);">Usage scenarios</a></li> | ||
| <li><a href="javascript:void(0);">Brand</a></li> | ||
| <li><a href="javascript:void(0);">Built With</a></li> | ||
| </ul> | ||
| </details> | ||
| </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> | ||
| <li role="listitem"><a href="javascript:void(0);">Services</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Login</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Sign Up</a></li> | ||
| </ol> | ||
| </nav> | ||
| <!-- End Responsive Nav 2 --> | ||
| <hr> | ||
| <!-- Start Responsive Nav 3 --> | ||
| <nav class="container-fluid" role="navigation" data-position="end" data-breakpoint="lg"> | ||
| <input type="checkbox" id="hamburger3"> | ||
| <label for="hamburger3" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" aria-controls="top-nav">≡</label> | ||
| <ul id="top-nav" role="list"> | ||
| <li role="listitem"><a href="javascript:void(0);">Pico CSS</a></li> | ||
| <li role="listitem"><a href="javascript:void(0);">Example</a></li> | ||
| <li role="listitem"> | ||
| <details class="dropdown hide-arrow"> | ||
| <summary>Submenu</summary> | ||
| <ul> | ||
| <li><a href="javascript:void(0);">Another Link</a></li> | ||
| <li><a href="javascript:void(0);">And Again</a></li> | ||
| </ul> | ||
| </details> | ||
| </li> | ||
| <li role="listitem"><a href="javascript:void(0);">Final In List</a></li> | ||
| </ul> | ||
| <ul></ul> <!-- put empty <ul> or <ol> element here to move the next <ul> or <ol> to the right --> | ||
| <ul> | ||
| <li> | ||
| <form role="search" action="javascript:void(0);" method="get"> | ||
| <input name="search" type="search" value="" placeholder="Find this Article"> | ||
| <input type="hidden" name="id" value="12"> | ||
| <input type="submit" value="Find"> | ||
| </form> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <hr> | ||
| <details> | ||
| <summary>Show the code:</summary> | ||
| <div> | ||
|
|
@@ -1596,7 +1630,7 @@ <h3>Modal with a Form!</h3> | |
| function changeTheme(newTheme) { | ||
| const linkElement = document.getElementById('theme-color-ss'); | ||
| if (linkElement) { | ||
| linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/[email protected].8/css/pico.' + newTheme + '.min.css'); | ||
| linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/[email protected].9/css/pico.' + newTheme + '.min.css'); | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| /*! | ||
| * Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS) | ||
| * Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS) | ||
| * Copyright 2019-2025 - Licensed under MIT | ||
| */ |