mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
Closes Data-theme global setting not work Yohn/PicoCSS#52
Closes Dropdown arrow position issue - v2.2.9 Yohn/PicoCSS#53 Releases for 2.2.10
This commit is contained in:
Yohn
parent
6ba5f39f4c
commit
be6eebb1e2
5 changed files with 71 additions and 45 deletions
31
README.md
31
README.md
|
|
@ -50,21 +50,22 @@ With just the right amount of everything, Pico is great starting point for a cle
|
|||
## Table of contents
|
||||
|
||||
1. [Yohns Updated Version](#yohns-updated-version)
|
||||
2. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
|
||||
3. [What’s new in v2?](#whats-new-in-v2)
|
||||
4. [A Superpowered HTML Reset](#a-superpowered-html-reset)
|
||||
5. [Table of contents](#table-of-contents)
|
||||
6. [Quick start](#quick-start)
|
||||
2. [Extras Built on top of PicoCSS](#extras-built-on-top-of-picocss)
|
||||
3. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
|
||||
4. [What’s new in v2?](#whats-new-in-v2)
|
||||
5. [A Superpowered HTML Reset](#a-superpowered-html-reset)
|
||||
6. [Table of contents](#table-of-contents)
|
||||
7. [Quick start](#quick-start)
|
||||
1. [Install manually](#install-manually)
|
||||
2. [Usage from CDN](#usage-from-cdn)
|
||||
3. [Install with NPM](#install-with-npm)
|
||||
4. [Starter HTML template](#starter-html-template)
|
||||
7. [Class-less version](#class-less-version)
|
||||
8. [Limitations](#limitations)
|
||||
9. [Documentation](#documentation)
|
||||
10. [Browser Support](#browser-support)
|
||||
11. [Contributing](#contributing)
|
||||
12. [Copyright and license](#copyright-and-license)
|
||||
8. [Class-less version](#class-less-version)
|
||||
9. [Limitations](#limitations)
|
||||
10. [Documentation](#documentation)
|
||||
11. [Browser Support](#browser-support)
|
||||
12. [Contributing](#contributing)
|
||||
13. [Copyright and license](#copyright-and-license)
|
||||
|
||||
## Quick start
|
||||
|
||||
|
|
@ -83,7 +84,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/picocss@2.2.9/css/pico.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.min.css" />
|
||||
```
|
||||
|
||||
### Install with NPM
|
||||
|
|
@ -141,7 +142,7 @@ Use the default `.classless` version if you need centered viewports:
|
|||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.classless.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
|
|
@ -150,7 +151,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
|
|||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.fluid.classless.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.fluid.classless.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
|
|
@ -165,7 +166,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/picocss@2.2.9/css/pico.classless.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
|
||||
/>
|
||||
<title>Hello, world!</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -106,8 +106,7 @@
|
|||
And then you'll need the js located at: js/SwitchColorMode.js
|
||||
-->
|
||||
<label>
|
||||
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox"
|
||||
role="switch">
|
||||
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
|
||||
</label>
|
||||
</div>
|
||||
<!--<details class="dropdown">
|
||||
|
|
@ -187,6 +186,7 @@
|
|||
<aside>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#color-mode-toggle">Color Mode Switch</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#tabs">Tabs [role=tablist]</a></li>
|
||||
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
<main class="col-12 col-md-9 col-lg-10">
|
||||
<article>
|
||||
<header>
|
||||
<h2>Yohns PicoCSS Fork v2.2.9</h2>
|
||||
<h2>Yohns PicoCSS Fork v2.2.10</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,13 +230,32 @@
|
|||
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>
|
||||
<article id="color-mode-toggle">
|
||||
<header>
|
||||
<h2>Color Mode Switch</h2>
|
||||
<h6 class="fw-n">Classless!</h6>
|
||||
</header>
|
||||
|
||||
<div class="grid" style="justify-items: center;">
|
||||
<label>Example:</label>
|
||||
<label>
|
||||
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
|
||||
</label>
|
||||
</div>
|
||||
<small class="pt-1" style="text-align: center; display: block;">Only the first switch on the page change the color mode currently. You can tap the other side on the left side abover the navbar to see the color modes change.</small>
|
||||
<hr class="m-0">
|
||||
<p>You will need to include the <a href="js/SwitchColorMode.js">SwitchColorMode.js</a> javascript at the end of your <code><body></code> tag.</p>
|
||||
<p>For the switch itself, you really need to ensure the <code>name</code> and the <code>role</code> attributes are found, with the same values.</p>
|
||||
<pre><code class="language-html"><label>
|
||||
<input name="color-mode-toggle" role="switch" type="checkbox" value="1" aria-label="Toggle Light or Dark Mode">
|
||||
</label></code></pre>
|
||||
<p>Do not change the <code>name="color-mode-toggle"</code></p>
|
||||
<p>You can assign the default color mode for new visitors by adding <code>data-theme="dark"</code> to your <code><html></code> tag. The value can be 1 of the following: <code>dark</code>, <code>light</code>, <code>auto</code>. If auto is set, it will default to the viewers prefered color mode.</p>
|
||||
<p>Color modes are saved across page loads.</p>
|
||||
</article>
|
||||
<hr>
|
||||
<article id="tables">
|
||||
<header>
|
||||
|
|
@ -933,7 +952,7 @@
|
|||
<p>
|
||||
<code>.row</code> has a max width set to the viewport of your <code>xl</code> viewport (1300px by default)
|
||||
</p>
|
||||
<code>.row-fluid</code> max width is 100%. </>
|
||||
<code>.row-fluid</code> max width is 100%. </a>
|
||||
<div class="row-fluid">
|
||||
<div class="col-3">
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
|
||||
|
|
@ -1182,6 +1201,9 @@
|
|||
<header>
|
||||
<h2>Accordions</h2>
|
||||
</header>
|
||||
<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>
|
||||
<hr>
|
||||
<details name="example-accordion">
|
||||
<summary>Accordion 1</summary>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta
|
||||
|
|
@ -1641,7 +1663,7 @@
|
|||
function changeTheme(newTheme) {
|
||||
const linkElement = document.getElementById('theme-color-ss');
|
||||
if (linkElement) {
|
||||
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.9/css/pico.' + newTheme + '.min.css');
|
||||
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.10/css/pico.' + newTheme + '.min.css');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Minimal theme switcher using a checkbox
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
* Copyright 2019-2025 - Licensed under MIT
|
||||
* Modified by Yohn https://github.com/Yohn/PicoCSS
|
||||
*/
|
||||
|
||||
|
|
@ -20,31 +20,35 @@ const SwitchColorMode = {
|
|||
console.error("Theme switcher toggle not found");
|
||||
return;
|
||||
}
|
||||
this.scheme = this.schemeFromLocalStorage;
|
||||
this.initToggle();
|
||||
|
||||
// If first visit, use the theme from <html> attribute; otherwise, use stored preference
|
||||
this.scheme = this.schemeFromLocalStorage ?? this.schemeFromHTML;
|
||||
|
||||
// Set checkbox state based on the applied theme
|
||||
this.checkbox.checked = this.scheme === "dark";
|
||||
|
||||
// Listen for user changes
|
||||
this.checkbox.addEventListener("change", () => {
|
||||
this.scheme = this.checkbox.checked ? "dark" : "light";
|
||||
this.schemeToLocalStorage();
|
||||
});
|
||||
},
|
||||
|
||||
// Get color scheme from local storage
|
||||
get schemeFromLocalStorage() {
|
||||
return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
|
||||
return window.localStorage?.getItem(this.localStorageKey);
|
||||
},
|
||||
|
||||
// Preferred color scheme
|
||||
// Get the default theme from the <html> attribute
|
||||
get schemeFromHTML() {
|
||||
return document.documentElement.getAttribute(this.rootAttribute) ?? "auto";
|
||||
},
|
||||
|
||||
// Preferred color scheme from system
|
||||
get preferredColorScheme() {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
},
|
||||
|
||||
// Initialize the toggle switch
|
||||
initToggle() {
|
||||
// Set initial checkbox state based on the current scheme
|
||||
this.checkbox.checked = this.scheme === "dark";
|
||||
|
||||
// Listen for changes to the checkbox
|
||||
this.checkbox.addEventListener("change", () => {
|
||||
this.scheme = this.checkbox.checked ? "dark" : "light";
|
||||
});
|
||||
},
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
if (scheme === "auto") {
|
||||
|
|
@ -53,7 +57,6 @@ const SwitchColorMode = {
|
|||
this._scheme = scheme;
|
||||
}
|
||||
this.applyScheme();
|
||||
this.schemeToLocalStorage();
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
|
|
@ -63,7 +66,7 @@ const SwitchColorMode = {
|
|||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
|
||||
document.documentElement.setAttribute(this.rootAttribute, this._scheme);
|
||||
},
|
||||
|
||||
// Store scheme to local storage
|
||||
|
|
@ -73,4 +76,4 @@ const SwitchColorMode = {
|
|||
};
|
||||
|
||||
// Init
|
||||
SwitchColorMode.init();
|
||||
SwitchColorMode.init();
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@yohns/picocss",
|
||||
"version": "2.2.9",
|
||||
"version": "2.2.10",
|
||||
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
|
||||
"authors": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*!
|
||||
* Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
|
||||
* Pico CSS ✨ v2.2.10 (https://github.com/Yohn/PicoCSS)
|
||||
* Copyright 2019-2025 - Licensed under MIT
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue