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

had to update the striped table rows again cause they were failing, and update the floating labels

Browse source
This commit is contained in:
Yohn 2025-01-22 18:40:49 -05:00
parent af735a6d75
commit ba48bb50da
6 changed files with 264 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -77,7 +77,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. Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.8/css/pico.min.css" />
``` ```
### Install with NPM ### Install with NPM
@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.8/css/pico.classless.min.css"
/> />
``` ```
@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.fluid.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.8/css/pico.fluid.classless.min.css"
/> />
``` ```
@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.8/css/pico.classless.min.css"
/> />
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>

341
docs/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -24,7 +23,6 @@
<!-- Web application manifest --> <!-- Web application manifest -->
<link rel="manifest" href="manifest.json"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<!-- Pico.css --> <!-- Pico.css -->
<link rel="stylesheet" href="pico.min.css" id="theme-color-ss"> <link rel="stylesheet" href="pico.min.css" id="theme-color-ss">
<link rel="stylesheet" href="pico.colors.min.css"> <link rel="stylesheet" href="pico.colors.min.css">
@ -42,13 +40,11 @@
/*#ff9500;*/ /*#ff9500;*/
--yopico-logo-bolts: var(--pico-primary-focus); --yopico-logo-bolts: var(--pico-primary-focus);
/*#ffbf00;*/ /*#ffbf00;*/
--pico-logo-wordmark: var(--pico-color); --pico-logo-wordmark: var(--pico-color);
--pico-logo-big-sparkle: var(--pico-primary-background); --pico-logo-big-sparkle: var(--pico-primary-background);
/*#ff9500;*/ /*#ff9500;*/
--pico-logo-small-sparkles: var(--pico-primary); --pico-logo-small-sparkles: var(--pico-primary);
/*#ff9500;*/ /*#ff9500;*/
} }
.three-columns { .three-columns {
@ -62,7 +58,6 @@
} }
</style> </style>
</head> </head>
<body id="top"> <body id="top">
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
@ -80,7 +75,6 @@
<path fill="var(--yopico-logo-small-sparkles)" <path fill="var(--yopico-logo-small-sparkles)"
d="m368.54 48.9-6.56-3.9c3.4 5.73 3.91 6.65 3.91 6.75s-3.87 7.16-3.88 7.24c5.36-3.16 6.9-4.12 6.98-4.12 6.33 3.74 6.48 3.75 6.54 3.69-3.58-6.04-3.92-6.65-3.93-6.66s3.84-6.92 3.84-7.03l-6.91 4.02zm37.15.81-6.56-3.9c3.4 5.73 3.91 6.65 3.91 6.75s-3.87 7.16-3.88 7.24c5.36-3.16 6.9-4.12 6.98-4.12 6.33 3.74 6.48 3.75 6.54 3.69-3.58-6.04-3.92-6.65-3.93-6.66s3.84-6.92 3.84-7.03l-6.91 4.02z" /> d="m368.54 48.9-6.56-3.9c3.4 5.73 3.91 6.65 3.91 6.75s-3.87 7.16-3.88 7.24c5.36-3.16 6.9-4.12 6.98-4.12 6.33 3.74 6.48 3.75 6.54 3.69-3.58-6.04-3.92-6.65-3.93-6.66s3.84-6.92 3.84-7.03l-6.91 4.02zm37.15.81-6.56-3.9c3.4 5.73 3.91 6.65 3.91 6.75s-3.87 7.16-3.88 7.24c5.36-3.16 6.9-4.12 6.98-4.12 6.33 3.74 6.48 3.75 6.54 3.69-3.58-6.04-3.92-6.65-3.93-6.66s3.84-6.92 3.84-7.03l-6.91 4.02z" />
</svg> </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="pico-logo" <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="pico-logo"
viewBox="0 0 370 164"> viewBox="0 0 370 164">
<path fill="var(--pico-logo-wordmark)" <path fill="var(--pico-logo-wordmark)"
@ -112,7 +106,8 @@
And then you'll need the js located at: js/SwitchColorMode.js And then you'll need the js located at: js/SwitchColorMode.js
--> -->
<label> <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> </label>
</div> </div>
<!--<details class="dropdown"> <!--<details class="dropdown">
@ -123,7 +118,6 @@
<li><a href="#" data-theme-switcher="dark">Dark</a></li> <li><a href="#" data-theme-switcher="dark">Dark</a></li>
</ul> </ul>
</details>--> </details>-->
<details class="dropdown"> <details class="dropdown">
<summary style="background-color:var(--pico-primary-background); color: var(--pico-primary-inverse)">Color <summary style="background-color:var(--pico-primary-background); color: var(--pico-primary-inverse)">Color
Scheme</summary> Scheme</summary>
@ -190,7 +184,6 @@
data-theme="slate" href="javascript:void(0);">Slate</a></li> data-theme="slate" href="javascript:void(0);">Slate</a></li>
</ul> </ul>
</details> </details>
<aside> <aside>
<nav> <nav>
<ul> <ul>
@ -220,11 +213,10 @@
</header> </header>
<!-- /Header --> <!-- /Header -->
</div> </div>
<main class="col-12 col-md-9 col-lg-10"> <main class="col-12 col-md-9 col-lg-10">
<article> <article>
<header> <header>
<h2>Yohns PicoCSS Fork v2.2.7</h2> <h2>Yohns PicoCSS Fork v2.2.8</h2>
</header> </header>
<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a> <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 repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@ -232,8 +224,7 @@
<code>&lt;label&gt;</code> within groups, <code>.row</code> &amp; <code>.row-fluid</code> and the <code>&lt;label&gt;</code> within groups, <code>.row</code> &amp; <code>.row-fluid</code> and the
<code>.col-*</code> classes like Bootstrap, <code>.align-*</code> and more.) The demo docs here is the main <code>.col-*</code> classes like Bootstrap, <code>.align-*</code> and more.) The demo docs here is the main
enhanced that have been added to the <a href="https://picocss.com/">Pico CSS 2.0.6</a> branch, for more enhanced that have been added to the <a href="https://picocss.com/">Pico CSS 2.0.6</a> branch, for more
docs, refer to the original <a href="https://picocss.com/docs">Pico CSS docs</a>. docs, refer to the original <a href="https://picocss.com/docs">Pico CSS docs</a>. </p>
</p>
<hr> <hr>
<p><code>(OPTIONAL)</code> Some of the demos on this page do require <a <p><code>(OPTIONAL)</code> Some of the demos on this page do require <a
href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as
@ -249,13 +240,21 @@
<h6 class="fw-n">Striped rows require .striped class</h6> <h6 class="fw-n">Striped rows require .striped class</h6>
</header> </header>
<p>Styles for a <code>&lt;caption&gt;</code> element have been added for tables as well.</p> <p>Styles for a <code>&lt;caption&gt;</code> element have been added for tables as well.</p>
<p>For rows that will be hidden, make sure to add the <code>hidden</code> attribute like so: <code>&lt;tr hidden&gt;</code></p> <p>For rows that will be hidden, make sure to add the <code>hidden</code> attribute like so:
<code>&lt;tr hidden&gt;</code></p>
<p>When rows are toggled, the hidden rows have * around the first column.</p> <p>When rows are toggled, the hidden rows have * around the first column.</p>
<nav><ul><li></li></ul><ul><li><button type="button" onclick="document.querySelectorAll('.hidden-table-row').forEach(row => {row.hidden = !row.hidden;});">Toggle Hidden Rows</button></li></ul></nav> <nav>
<ul>
<li></li>
</ul>
<ul>
<li><button type="button"
onclick="document.querySelectorAll('.hidden-table-row').forEach(row => {row.hidden = !row.hidden;});">Toggle
Hidden Rows</button></li>
</ul>
</nav>
<table class="striped" id="hidden-row-example"> <table class="striped" id="hidden-row-example">
<caption> <caption> Solar System Planets </caption>
Solar System Planets
</caption>
<thead> <thead>
<tr> <tr>
<th scope="col">Planet</th> <th scope="col">Planet</th>
@ -348,8 +347,7 @@
<li> <li>
<strong>HTML Structure:</strong> <strong>HTML Structure:</strong>
<ul> <ul>
<li>Each tab button must have the following attributes: <li>Each tab button must have the following attributes: <ul>
<ul>
<li><code>role="tab"</code></li> <li><code>role="tab"</code></li>
<li><code>id="unique-tab-id"</code> - A unique ID for the tab</li> <li><code>id="unique-tab-id"</code> - A unique ID for the tab</li>
<li><code>aria-selected="true/false"</code> - Indicates if the tab is selected</li> <li><code>aria-selected="true/false"</code> - Indicates if the tab is selected</li>
@ -357,19 +355,20 @@
<li><code>tabindex="0/-1"</code> - Indicates if the tab is focusable</li> <li><code>tabindex="0/-1"</code> - Indicates if the tab is focusable</li>
</ul> </ul>
</li> </li>
<li>Each tab panel must have the following attributes: <li>Each tab panel must have the following attributes: <ul>
<ul>
<li><code>role="tabpanel"</code></li> <li><code>role="tabpanel"</code></li>
<li><code>id="panel-id"</code> - A unique ID for the panel</li> <li><code>id="panel-id"</code> - A unique ID for the panel</li>
<li><code>aria-labelledby="unique-tab-id"</code> - The ID of the associated tab</li> <li><code>aria-labelledby="unique-tab-id"</code> - The ID of the associated tab</li>
<li><code>hidden</code> - Indicates if the panel is hidden (use <code>hidden</code> attribute for non-active panels)</li> <li><code>hidden</code> - Indicates if the panel is hidden (use <code>hidden</code> attribute for
non-active panels)</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<strong>JavaScript:</strong> <strong>JavaScript:</strong>
<p>The JavaScript file <code>PicoTabs.js</code> is required for the tabs to function correctly. Ensure you include it in your HTML file:</p> <p>The JavaScript file <code>PicoTabs.js</code> is required for the tabs to function correctly. Ensure you
include it in your HTML file:</p>
<pre><code class="language-html">&lt;script src="js/PicoTabs.js"&gt;&lt;/script&gt;</code></pre> <pre><code class="language-html">&lt;script src="js/PicoTabs.js"&gt;&lt;/script&gt;</code></pre>
<p>Initialize the tabs by adding the following code:</p> <p>Initialize the tabs by adding the following code:</p>
<pre><code class="language-javascript">document.addEventListener("DOMContentLoaded", () => { <pre><code class="language-javascript">document.addEventListener("DOMContentLoaded", () => {
@ -390,9 +389,7 @@
<h3>Tab Example:</h3> <h3>Tab Example:</h3>
<div role="tablist"> <div role="tablist">
<!-- Tab One --> <!-- Tab One -->
<button id="tabone" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1"> <button id="tabone" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1"> Tab One </button>
Tab One
</button>
<div id="panel1" role="tabpanel" aria-labelledby="tabone" tabindex="0"> <div id="panel1" role="tabpanel" aria-labelledby="tabone" tabindex="0">
<h3>Tab One Content</h3> <h3>Tab One Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
@ -406,11 +403,8 @@
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p> deserunt mollit anim id est laborum.</p>
</div> </div>
<!-- Tab Two --> <!-- Tab Two -->
<button id="tabtwo" role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1"> <button id="tabtwo" role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1"> Tab Two </button>
Tab Two
</button>
<div id="panel2" role="tabpanel" aria-labelledby="tabtwo" hidden> <div id="panel2" role="tabpanel" aria-labelledby="tabtwo" hidden>
<div> <div>
<form action="javascript:void(0);"> <form action="javascript:void(0);">
@ -427,10 +421,8 @@
</form> </form>
</div> </div>
</div> </div>
<!-- Tab Three --> <!-- Tab Three -->
<button id="tabthree" role="tab" aria-selected="false" aria-controls="panel3" tabindex="-1"> <button id="tabthree" role="tab" aria-selected="false" aria-controls="panel3" tabindex="-1"> Tab Three
Tab Three
</button> </button>
<div id="panel3" role="tabpanel" aria-labelledby="tabthree" hidden> <div id="panel3" role="tabpanel" aria-labelledby="tabthree" hidden>
<h2>Tab Three Content</h2> <h2>Tab Three Content</h2>
@ -502,8 +494,7 @@
docs, but add the <code>role="navigation"</code> attribute to the <code>&lt;nav&gt;</code>.</p> docs, but add the <code>role="navigation"</code> attribute to the <code>&lt;nav&gt;</code>.</p>
<h5>Positioning</h5> <h5>Positioning</h5>
<p>The default position puts your nav links and burger menu at the end of the line, but <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. <code>data-position="start"</code> will put them at the start of the line. </p>
</p>
<h5>Breakpoints</h5> <h5>Breakpoints</h5>
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The <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 different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the
@ -518,8 +509,7 @@
as the id for the label.</p> as the id for the label.</p>
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the
<code>input[type="checkbox"]</code> within the <code>&lt;label&gt;</code> element, it will not work <code>input[type="checkbox"]</code> within the <code>&lt;label&gt;</code> element, it will not work
correctly if you do that. correctly if you do that. </blockquote>
</blockquote>
<h6>Custom Hamburger Icon?</h6> <h6>Custom Hamburger Icon?</h6>
<p>Replace the <code>&amp;#x2261;</code> with your own icon, svg element, or image.</p> <p>Replace the <code>&amp;#x2261;</code> with your own icon, svg element, or image.</p>
<h5>Collapsed List</h5> <h5>Collapsed List</h5>
@ -531,7 +521,6 @@
<h3>Example Hamburger Menu</h3> <h3>Example Hamburger Menu</h3>
<h6>(resize width of screen if you don't see it)</h6> <h6>(resize width of screen if you don't see it)</h6>
</hgroup> </hgroup>
<!-- Start Responsive Nav 1 --> <!-- Start Responsive Nav 1 -->
<nav role="navigation" data-position="start" data-breakpoint="lg"> <nav role="navigation" data-position="start" data-breakpoint="lg">
<ul> <ul>
@ -543,9 +532,7 @@
<input type="checkbox" id="menu-btn" /> <input type="checkbox" id="menu-btn" />
<!-- role="button" --> <!-- 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) * 1.3);" aria-label="Menu"
aria-controls="nav-example"> aria-controls="nav-example"> &equiv; </label>
&equiv;
</label>
<ol id="nav-example" role="list"> <ol id="nav-example" role="list">
<li role="listitem"><a href="#">Home</a></li> <li role="listitem"><a href="#">Home</a></li>
<li role="listitem"> <li role="listitem">
@ -566,7 +553,6 @@
</ol> </ol>
</nav> </nav>
<!-- End Responsive Nav 1 --> <!-- End Responsive Nav 1 -->
<h3>Hamburger Menu Under Nav Example</h3> <h3>Hamburger Menu Under Nav Example</h3>
<!-- Start Responsive Nav 2 --> <!-- Start Responsive Nav 2 -->
<nav role="navigation" data-position="end" data-breakpoint="lg"> <nav role="navigation" data-position="end" data-breakpoint="lg">
@ -578,9 +564,7 @@
</ul> </ul>
<input type="checkbox" id="menu-btn2"> <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) * 1.3);" aria-label="Menu"
aria-controls="nav-example2"> aria-controls="nav-example2"> &equiv; </label>
&equiv;
</label>
<ol id="nav-example2" role="list"> <ol id="nav-example2" role="list">
<li role="listitem"><a href="#">Home</a></li> <li role="listitem"><a href="#">Home</a></li>
<li role="listitem"> <li role="listitem">
@ -643,7 +627,8 @@
so that is why this example has the input field with the tooltip on the <code so that is why this example has the input field with the tooltip on the <code
data-tooltip="I do not think there is a way to set the width on the tool tip and have it auto break? Lets see..">&lt;label&gt;</code> data-tooltip="I do not think there is a way to set the width on the tool tip and have it auto break? Lets see..">&lt;label&gt;</code>
wrapper.</p> wrapper.</p>
<p>We also want the <span data-tooltip="short">tooltip width</span> to not be huge when the tooltip is short.</p> <p>We also want the <span data-tooltip="short">tooltip width</span> to not be huge when the tooltip is short.
</p>
</article> </article>
<!-- /Tooltip --> <!-- /Tooltip -->
<hr> <hr>
@ -651,16 +636,16 @@
<header> <header>
<h2>Ghost Buttons</h2> <h2>Ghost Buttons</h2>
</header> </header>
<p>Ghost buttons are buttons that have a transparent background and border. <p>Ghost buttons are buttons that have a transparent background and border. They are often used as secondary
They are often used as secondary buttons to indicate a less important action.</p> buttons to indicate a less important action.</p>
<p>Ghost buttons are created by adding the <code>.ghost</code> class to a button</p> <p>Ghost buttons are created by adding the <code>.ghost</code> class to a button</p>
<p><code>.ghost</code> will work on all <code>&lt;button&gt;</code>, <code>[type="button"]</code>, <code>[type="submit"]</code>, <code>[type="reset"]</code>, and <code>[role="button"]</code> elements.</p> <p><code>.ghost</code> will work on all <code>&lt;button&gt;</code>, <code>[type="button"]</code>,
<code>[type="submit"]</code>, <code>[type="reset"]</code>, and <code>[role="button"]</code> elements.</p>
<div class="grid"> <div class="grid">
<button type="button" class="ghost">Ghost Button</button> <button type="button" class="ghost">Ghost Button</button>
<button type="button" class="ghost secondary">Secondary Ghost Button</button> <button type="button" class="ghost secondary">Secondary Ghost Button</button>
<button type="button" class="ghost contrast">Contrast Ghost Button</button> <button type="button" class="ghost contrast">Contrast Ghost Button</button>
</div> </div>
<hr> <hr>
<details> <details>
<summary>Show the code:</summary> <summary>Show the code:</summary>
@ -681,8 +666,7 @@
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a
<code>&lt;section&gt;</code> tag, ensure you have a <code>placeholder="example"</code> attribute on your <code>&lt;section&gt;</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 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>. tag, which would go after your form element.</textarea></code>. </p>
</p>
<hr> <hr>
<div> <div>
<form action="javascript:void(0);" novalidate> <form action="javascript:void(0);" novalidate>
@ -690,11 +674,15 @@
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name"> <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> <label for="fl-name-ele" id="fl-name">Name</label>
</section> </section>
<!--
<small>Your first and last name</small>-->
<section role="form"> <section role="form">
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" <input type="email" id="fl-email-ele" placeholder="Email" aria-required="true"
aria-labelledby="fl-email"> aria-labelledby="fl-email">
<label for="fl-email-ele" id="fl-email">Email</label> <label for="fl-email-ele" id="fl-email">Email</label>
</section> </section>
<!--
<small>Use a valid email address.</small>-->
<section role="form"> <section role="form">
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic"> <select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
<option selected disabled value="">Topic</option> <option selected disabled value="">Topic</option>
@ -704,11 +692,15 @@
</select> </select>
<label for="fl-topic-ele" id="fl-topic">Topic</label> <label for="fl-topic-ele" id="fl-topic">Topic</label>
</section> </section>
<!--
<small>Please select the best topic for your inquiry.</small>-->
<section role="form"> <section role="form">
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" <textarea id="fl-message-ele" placeholder="Message" aria-required="true"
aria-labelledby="fl-message"></textarea> aria-labelledby="fl-message"></textarea>
<label for="fl-message-ele" id="fl-message">Message</label> <label for="fl-message-ele" id="fl-message">Message</label>
</section> </section>
<!--
<small>Be as descriptive as possible</small>-->
</form> </form>
<hr> <hr>
<details> <details>
@ -746,21 +738,17 @@
<h2>Validation</h2> <h2>Validation</h2>
<h6 class="fw-n">Classless!</h6> <h6 class="fw-n">Classless!</h6>
</header> </header>
<p> <p> Using form :user-valid and :user-invalid.</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>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>Classless except for the file input button previews.</p>
</p> </p>
<input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}" <input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}"
required> required>
<small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small> <small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small>
<input placeholder="Url" type="url" name="test" required> <input placeholder="Url" type="url" name="test" required>
<small data-valid="this is good!" data-invalid="Must be a url."></small> <small data-valid="this is good!" data-invalid="Must be a url."></small>
<input placeholder="Email" type="email" name="test" required> <input placeholder="Email" type="email" name="test" required>
<small data-valid="this is good!" data-invalid="Must be a valid email."></small> <small data-valid="this is good!" data-invalid="Must be a valid email."></small>
<select name="favorite-cuisine" required> <select name="favorite-cuisine" required>
<option selected disabled value="">Select your favorite cuisine...</option> <option selected disabled value="">Select your favorite cuisine...</option>
<option>Italian</option> <option>Italian</option>
@ -770,24 +758,18 @@
<option>French</option> <option>French</option>
</select> </select>
<small data-valid="this is good!" data-invalid="Error.."></small> <small data-valid="this is good!" data-invalid="Error.."></small>
<input type="date" name="date" required> <input type="date" name="date" required>
<small data-valid="this is good!" data-invalid="Error.."></small> <small data-valid="this is good!" data-invalid="Error.."></small>
<input type="datetime-local" name="datetime-local" required> <input type="datetime-local" name="datetime-local" required>
<small data-valid="this is good!" data-invalid="Error.."></small> <small data-valid="this is good!" data-invalid="Error.."></small>
<input type="month" name="month" min="2018-03" max="2024-12" placeholder="2024-12" step="1" <input type="month" name="month" min="2018-03" max="2024-12" placeholder="2024-12" step="1"
pattern="[0-9]{4}-[0-9]{2}" required> pattern="[0-9]{4}-[0-9]{2}" required>
<small data-valid="this is good!" data-invalid="Format: YYYY-MM"></small> <small data-valid="this is good!" data-invalid="Format: YYYY-MM"></small>
<input type="time" name="time" required> <input type="time" name="time" required>
<small data-valid="this is good!" data-invalid="Error.."></small> <small data-valid="this is good!" data-invalid="Error.."></small>
<header>Check JS for FileValidator class</header> <header>Check JS for FileValidator class</header>
<input type="file" data-max-size="1048576" accept=".jpg,.svg,.png,.gif,.webp" id="checkFile" multiple /> <input type="file" data-max-size="1048576" accept=".jpg,.svg,.png,.gif,.webp" id="checkFile" multiple />
<small data-invalid="Only .jpg,.svg,.png,.gif,.webp image types allowed" data-valid="Good!"></small> <small data-invalid="Only .jpg,.svg,.png,.gif,.webp image types allowed" data-valid="Good!"></small>
<textarea minlength="5" placeholder="its always valid?" required></textarea> <textarea minlength="5" placeholder="its always valid?" required></textarea>
<small data-valid="this is good!" data-invalid="Min of 5 characters!"></small> <small data-valid="this is good!" data-invalid="Min of 5 characters!"></small>
<br> <br>
@ -807,11 +789,13 @@
</header> </header>
<ol> <ol>
<li><code>&lt;label&gt;</code> has been added.</li> <li><code>&lt;label&gt;</code> has been added.</li>
<li><code>&lt;legend&gt;</code> has been added. (To be used with <code>&lt;fieldset role="group"&gt;</code></li> <li><code>&lt;legend&gt;</code> has been added. (To be used with <code>&lt;fieldset role="group"&gt;</code>
</li>
<li><code>&lt;details class="dropdown"&gt;</code> has been added.</li> <li><code>&lt;details class="dropdown"&gt;</code> has been added.</li>
</ol> </ol>
<h4 id="dropdown-submenu">Dropdown Submenu Example</h4> <h4 id="dropdown-submenu">Dropdown Submenu Example</h4>
<p>Click on the <strong>Getting Started</strong> to see the sub-dropdown menu under <strong>About</strong>.</p> <p>Click on the <strong>Getting Started</strong> to see the sub-dropdown menu under <strong>About</strong>.
</p>
<hr> <hr>
<div> <div>
<h3>[role=group] > .dropdown</h3> <h3>[role=group] > .dropdown</h3>
@ -898,83 +882,95 @@
<header> <header>
<h2>Rows</h2> <h2>Rows</h2>
</header> </header>
<p> <p> Similar to <a href="https://getbootstrap.com/docs/5.3/layout/columns/" target="_blank">Bootstrap
Similar to <a href="https://getbootstrap.com/docs/5.3/layout/columns/" target="_blank">Bootstrap 5.3.3</a>, 5.3.3</a>, with the responsive <code>.col-*COL#*</code>, <code>.col-*BREAKPOINT*-*COL#*</code>,
with the responsive <code>.col-*COL#*</code>, <code>.col-*BREAKPOINT*-*COL#*</code>, <code>.offset-*COL#*</code>, <code>.offset-*BREAKPOINT*-*COL#*</code>. </p>
<code>.offset-*COL#*</code>, <code>.offset-*BREAKPOINT*-*COL#*</code>.
</p>
<p> <p>
<code>.row</code> has a max width set to the viewport of your <code>xl</code> viewport (1300px by default) <code>.row</code> has a max width set to the viewport of your <code>xl</code> viewport (1300px by default)
</p> </p>
<code>.row-fluid</code> max width is 100%. <code>.row-fluid</code> max width is 100%. </>
</>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
<div class="col-6"> <div class="col-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-3 offset-1"> <div class="col-3 offset-1">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 offset-1</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
offset-1</article>
</div> </div>
<div class="col-2"> <div class="col-2">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2
</article>
</div> </div>
<div class="col-2"> <div class="col-2">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-2"> <div class="col-2">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2
</article>
</div> </div>
<div class="col-8"> <div class="col-8">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-8</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-8
</article>
</div> </div>
<div class="col-2"> <div class="col-2">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2
</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-5"> <div class="col-5">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-5</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-5
</article>
</div> </div>
<div class="col-7"> <div class="col-7">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-7</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-7
</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-9"> <div class="col-9">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-9</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-9
</article>
</div> </div>
<div class="col-3"> <div class="col-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
</article>
</div> </div>
</div> </div>
</article> </article>
@ -987,41 +983,46 @@
</header> </header>
<p>When defining multiple <code>.col-*-*</code> on the same element, the order your put the classes on the <p>When defining multiple <code>.col-*-*</code> on the same element, the order your put the classes on the
element matter.</p> element matter.</p>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-2 col-md-4"> <div class="col-2 col-md-4">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2, col-md-4</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">
col-2, col-md-4</article>
</div> </div>
<div class="col-4 offset-8 col-md-6 offset-md-6"> <div class="col-4 offset-8 col-md-6 offset-md-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-4, offset-8, col-md-6, offset-md-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">
col-4, offset-8, col-md-6, offset-md-6</article>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-5 offset-1 col-md-11"> <div class="col-5 offset-1 col-md-11">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-5, offset-1, col-md-11</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">
col-5, offset-1, col-md-11</article>
</div> </div>
<div class="col-2 col-md-6"> <div class="col-2 col-md-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2, col-md-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">
col-2, col-md-6</article>
</div> </div>
<div class="col-3 offset-9 col-md-6 offset-md-6"> <div class="col-3 offset-9 col-md-6 offset-md-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3, offset-9, col-md-6, offset-md-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">
col-3, offset-9, col-md-6, offset-md-6</article>
</div> </div>
</div> </div>
<div class="row-fluid align-center"> <div class="row-fluid align-center">
<div class="col-3 col-md-12 col-lg-6"> <div class="col-3 col-md-12 col-lg-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 col-md-12 col-lg-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
col-md-12 col-lg-6</article>
</div> </div>
<div class="col-3 col-md-12 col-lg-6"> <div class="col-3 col-md-12 col-lg-6">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 col-md-12 col-lg-6</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
col-md-12 col-lg-6</article>
</div> </div>
<div class="col-4 col-md-6 col-lg-3"> <div class="col-4 col-md-6 col-lg-3">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-4 col-md-6 col-lg-3</article> <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-4
col-md-6 col-lg-3</article>
</div> </div>
<div class="col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10"> <div class="col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10">
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10 <article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6
</article> offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10 </article>
</div> </div>
</div> </div>
</article> </article>
@ -1032,14 +1033,13 @@
<header> <header>
<h2>Alignment</h2> <h2>Alignment</h2>
</header> </header>
<p> <p> You can add <code>.align-start</code> (default), <code>.align-center</code> or <code>.align-end</code> to
You can add <code>.align-start</code> (default), <code>.align-center</code> or <code>.align-end</code> to
your <code>.row</code> or <code>.row-fluid</code> element to align the containing elements to the top, your <code>.row</code> or <code>.row-fluid</code> element to align the containing elements to the top,
middle, or bottom.</p> middle, or bottom.</p>
<div class="row-fluid align-center" id="row-align-example"> <div class="row-fluid align-center" id="row-align-example">
<div class="col-4"> <div class="col-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4</article> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4
</article>
</div> </div>
<div class="col-4"> <div class="col-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);"> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">
@ -1049,7 +1049,8 @@
</article> </article>
</div> </div>
<div class="col-4"> <div class="col-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4</article> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4
</article>
</div> </div>
</div> </div>
</article> </article>
@ -1062,13 +1063,16 @@
</header> </header>
<div class="row-fluid"> <div class="row-fluid">
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12,
col-md-4</article>
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12,
col-md-4</article>
</div> </div>
<div class="col-12 col-md-4"> <div class="col-12 col-md-4">
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article> <article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12,
col-md-4</article>
</div> </div>
</div> </div>
</article> </article>
@ -1079,19 +1083,16 @@
<header> <header>
<h2>Modal</h2> <h2>Modal</h2>
</header> </header>
<p><code>&lt;form&gt;</code> tags can be between the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code>, or wrap around the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> tags within the modal.</p> <p><code>&lt;form&gt;</code> tags can be between the <code>&lt;header&gt;</code> and
<code>&lt;footer&gt;</code>, or wrap around the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code>
tags within the modal.</p>
<hr> <hr>
<div class="grid"> <div class="grid">
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)"> <button class="contrast" data-target="modal-example" onclick="toggleModal(event)"> Launch Demo Modal
Launch Demo Modal
</button>
<button data-target="modal-form-example" onclick="toggleModal(event)">
Launch Form Modal
</button> </button>
<button data-target="modal-form-example" onclick="toggleModal(event)"> Launch Form Modal </button>
</div> </div>
<hr> <hr>
<header> <header>
<h2>Modal Sizes</h2> <h2>Modal Sizes</h2>
<h6 class="fw-n">Having different modal sizes does require a class.</h6> <h6 class="fw-n">Having different modal sizes does require a class.</h6>
@ -1119,24 +1120,16 @@
<h2>Popovers</h2> <h2>Popovers</h2>
<h6 class="fw-n">Popovers will replace the notifications below.</h6> <h6 class="fw-n">Popovers will replace the notifications below.</h6>
</header> </header>
<button class="action" popovertarget="popover-example1">Backdrop Close</button> <button class="action" popovertarget="popover-example1">Backdrop Close</button>
<button popovertarget="popover-example2" popovertargetaction="show">Manual Close</button> <button popovertarget="popover-example2" popovertargetaction="show">Manual Close</button>
<article id="popover-example1" popover> <article id="popover-example1" popover>
<header> <header>
<h2>Popover</h2> <h2>Popover</h2>
</header> </header> Click/Tap everywhere else to close <footer>Footer</footer>
Click/Tap everywhere else to close
<footer>Footer</footer>
</article> </article>
<article id="popover-example2" popover="manual"> Some Feedback Message With Close Button <button
<article id="popover-example2" popover="manual"> popovertarget="popover-example2" popovertargetaction="hide">&times;</button>
Some Feedback Message With Close Button
<button popovertarget="popover-example2" popovertargetaction="hide">&times;</button>
</article> </article>
</article> </article>
<hr> <hr>
<!-- Accordions --> <!-- Accordions -->
@ -1146,14 +1139,11 @@
</header> </header>
<details name="example-accordion"> <details name="example-accordion">
<summary>Accordion 1</summary> <summary>Accordion 1</summary>
<p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris
tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit
tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices,
lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar porta turpis sit amet, congue turpis. </p>
mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
amet, congue turpis.
</p>
</details> </details>
<details name="example-accordion" open> <details name="example-accordion" open>
<summary>Accordion 2</summary> <summary>Accordion 2</summary>
@ -1228,7 +1218,8 @@
<!-- // Timeline --> <!-- // Timeline -->
<hr> <hr>
<h2>DO NOT USE THE FOLLOWING</h2> <h2>DO NOT USE THE FOLLOWING</h2>
<h3>All CSS and JavaScript have been removed for the following examples, so you will only be seeing the raw examples, without styling</h3> <h3>All CSS and JavaScript have been removed for the following examples, so you will only be seeing the raw
examples, without styling</h3>
<details> <details>
<summary>Show Old Tabs</summary> <summary>Show Old Tabs</summary>
<h2>The tabs below will be removed in a future version.</h2> <h2>The tabs below will be removed in a future version.</h2>
@ -1246,21 +1237,15 @@
<h3 class="mt-0">Grips</h3> <h3 class="mt-0">Grips</h3>
<ol> <ol>
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>,
<code>tab</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <a
and <code>tabpanel</code> but the w3 specs says we cant use roles on <a
href="https://www.w3.org/TR/html-aria/#el-details" target="_blank" href="https://www.w3.org/TR/html-aria/#el-details" target="_blank"
data-tooltip="W3 Specs for Details"><code>&lt;details&gt;</code></a> and <a data-tooltip="W3 Specs for Details"><code>&lt;details&gt;</code></a> and <a
href="https://www.w3.org/TR/html-aria/#el-summary" target="_blank" href="https://www.w3.org/TR/html-aria/#el-summary" target="_blank"
data-tooltip="W3 Specs for Summary"><code>&lt;summary&gt;</code></a> tags. data-tooltip="W3 Specs for Summary"><code>&lt;summary&gt;</code></a> tags. </li>
</li>
<li><code>&lt;section&gt;</code> in theory has a default <code>role</code> attribute value of <li><code>&lt;section&gt;</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 <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with
the the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless
<code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and and no JavaScript! </li>
no
JavaScript!
</li>
</ol> </ol>
<hr> <hr>
<h2>Example Tabs with no JavaScript:</h2> <h2>Example Tabs with no JavaScript:</h2>
@ -1399,49 +1384,35 @@
<details> <details>
<summary>Show Old Notifications</summary> <summary>Show Old Notifications</summary>
<h2>The Notifications below will be removed in a future version.</h2> <h2>The Notifications below will be removed in a future version.</h2>
<!-- notifications --> <!-- notifications -->
<article id="notifications"> <article id="notifications">
<header> <header>
<h2>Notificaton</h2> <h2>Notificaton</h2>
<h3>DEPRECATED</h3> <h3>DEPRECATED</h3>
</header> </header>
<button onclick="showNotification('Accessible short notice.')"> Short Notificaton </button>
<button onclick="showNotification('Accessible short notice.')">
Short Notificaton
</button>
<button onclick="showNotification({ html: ` <button onclick="showNotification({ html: `
<section> <section>
<h2>Many news!</h2> <h2>Many news!</h2>
<p>This is fantastic!</p> <p>This is fantastic!</p>
<button class='contrast' onclick='closeNotification()'>OK</button> <button class='contrast' onclick='closeNotification()'>OK</button>
</section>`, </section>`,
delay: 60 * 1000 })"> delay: 60 * 1000 })"> Big Notificaton </button>
Big Notificaton
</button>
<!-- accessible dialog based notification element --> <!-- accessible dialog based notification element -->
<dialog role="alert" data-backdrop="false"></dialog> <dialog role="alert" data-backdrop="false"></dialog>
</article> </article>
<!-- /notifications --> <!-- /notifications -->
</details> </details>
</main> </main>
</div> </div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="container"> <footer class="container">
<small> <small> Built with <a href="https://github.com/Yohn/PicoCSS">PicoCSS</a> • <a
Built with <a href="https://github.com/Yohn/PicoCSS">PicoCSS</a> • href="https://github.com/Yohn/PicoCSS"> Source code </a>
<a href="https://github.com/Yohn/PicoCSS">
Source code
</a>
</small> </small>
</footer> </footer>
<!-- ./ Footer --> <!-- ./ Footer -->
<!-- Modal example --> <!-- Modal example -->
<dialog id="modal-example"> <dialog id="modal-example">
<article> <article>
@ -1449,19 +1420,14 @@
<button aria-label="Close" rel="prev" data-target="modal-example" onclick="toggleModal(event)"></button> <button aria-label="Close" rel="prev" data-target="modal-example" onclick="toggleModal(event)"></button>
<h3>Confirm your action!</h3> <h3>Confirm your action!</h3>
</header> </header>
<p> <p> Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus
Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus risus non semper euismod. </p>
pellentesque. Nullam finibus risus non semper euismod.
</p>
<footer> <footer>
<button role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</button> <button role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</button>
<button autofocus data-target="modal-example" onclick="toggleModal(event)"> <button autofocus data-target="modal-example" onclick="toggleModal(event)"> Confirm </button>
Confirm
</button>
</footer> </footer>
</article> </article>
</dialog> </dialog>
<dialog id="modal-form-example"> <dialog id="modal-form-example">
<article> <article>
<form action="javascript:void(0);" method="POST"> <form action="javascript:void(0);" method="POST">
@ -1517,8 +1483,6 @@
</article> </article>
</dialog> </dialog>
<!-- ./ Modal example --> <!-- ./ Modal example -->
<!-- Small Modal --> <!-- Small Modal -->
<dialog id="small-modal" class="modal-sm"> <dialog id="small-modal" class="modal-sm">
<article> <article>
@ -1533,7 +1497,6 @@
</footer> </footer>
</article> </article>
</dialog> </dialog>
<!-- Medium Modal --> <!-- Medium Modal -->
<dialog id="medium-modal" class="modal-md"> <dialog id="medium-modal" class="modal-md">
<article> <article>
@ -1548,7 +1511,6 @@
</footer> </footer>
</article> </article>
</dialog> </dialog>
<!-- Large Modal --> <!-- Large Modal -->
<dialog id="large-modal" class="modal-lg"> <dialog id="large-modal" class="modal-lg">
<article> <article>
@ -1563,7 +1525,6 @@
</footer> </footer>
</article> </article>
</dialog> </dialog>
<!-- Extra Large Modal --> <!-- Extra Large Modal -->
<dialog id="xlarge-modal" class="modal-xlg"> <dialog id="xlarge-modal" class="modal-xlg">
<article> <article>
@ -1578,13 +1539,12 @@
</footer> </footer>
</article> </article>
</dialog> </dialog>
<!-- Fullscreen Modal --> <!-- Fullscreen Modal -->
<dialog id="fullscreen-modal" class="modal-fs"> <dialog id="fullscreen-modal" class="modal-fs">
<article> <article>
<header> <header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="fullscreen-modal"></a> <a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close"
Fullscreen Modal data-target="fullscreen-modal"></a> Fullscreen Modal
</header> </header>
<p>This is a fullscreen modal that takes up the entire viewport.</p> <p>This is a fullscreen modal that takes up the entire viewport.</p>
<footer> <footer>
@ -1593,21 +1553,17 @@
</footer> </footer>
</article> </article>
</dialog> </dialog>
<!-- input switch to change light and dark mode --> <!-- input switch to change light and dark mode -->
<script src="js/SwitchColorMode.js"></script> <script src="js/SwitchColorMode.js"></script>
<!-- Modal --> <!-- Modal -->
<script src="js/Modal.js"></script> <script src="js/Modal.js"></script>
<!-- For the file uploader preview --> <!-- For the file uploader preview -->
<script src="js/FileValidator.js"></script> <script src="js/FileValidator.js"></script>
<!-- For the Tabs - [role=tablist] component. --> <!-- For the Tabs - [role=tablist] component. -->
<script src="js/PicoTabs.js"></script> <script src="js/PicoTabs.js"></script>
<!-- alert notifications to be removed -- <!-- alert notifications to be removed --
REMOVED Use the popover REMOVED Use the popover
<script src="js/Notifications.js"></script>--> <script src="js/Notifications.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
@ -1640,7 +1596,7 @@
function changeTheme(newTheme) { function changeTheme(newTheme) {
const linkElement = document.getElementById('theme-color-ss'); const linkElement = document.getElementById('theme-color-ss');
if (linkElement) { if (linkElement) {
linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.7/css/pico.' + newTheme + '.min.css'); linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.8/css/pico.' + newTheme + '.min.css');
} }
} }
@ -1656,5 +1612,4 @@
}); });
</script> </script>
</body> </body>
</html> </html>

10
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@yohns/picocss", "name": "@yohns/picocss",
"version": "2.2.7", "version": "2.2.8",
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.", "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
"authors": [ "authors": [
{ {
@ -37,10 +37,10 @@
}, },
"scripts": { "scripts": {
"✨": "run-s build", "✨": "run-s build",
"build": "run-s start lint \"build:*\" done", "build": "run-s start lint \"build:*\" done --silent",
"build-dev": "run-s start lint \"build-dev:*\" done", "build-dev": "run-s start lint \"build-dev:*\" done --silent",
"dev": "nodemon -q --watch scss/ --ext scss --exec \"run-s build-dev\"", "dev": "nodemon -q --watch scss/ --ext scss --exec \"run-s build-dev\"",
"lint": "run-s \"lint:*\"", "lint": "run-s \"lint:*\" --silent",
"lint:prettier": "prettier --write --log-level error \"scss/**/*.scss\"", "lint:prettier": "prettier --write --log-level error \"scss/**/*.scss\"",
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace", "lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
"build-dev:css": "sass --no-source-map --style expanded --no-error-css scss/:css/", "build-dev:css": "sass --no-source-map --style expanded --no-error-css scss/:css/",
@ -72,7 +72,7 @@
"postcss-cli": "^11.0.0", "postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"prettier": "^3.4.2", "prettier": "^3.4.2",
"sass": "^1.82.0" "sass": "^1.83.4"
}, },
"engines": { "engines": {
"node": ">=20" "node": ">=20"

10
scss/content/_table.scss
View file

@ -69,13 +69,13 @@
// Striped // Striped
@if enable-classes { @if enable-classes {
#{$parent-selector} table { /* clean-css ignore:start */
&.striped { #{$parent-selector} table.striped {
tbody tr:nth-child(/* clean-css ignore:start */ odd of /* clean-css ignore:end */:not([hidden])) th, tbody tr:nth-child(odd of :not([hidden])) th,
tbody tr:nth-child(/* clean-css ignore:start */ odd of /* clean-css ignore:end */:not([hidden])) td { tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color); background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
} }
} }
} /* clean-css ignore:end */
} }
} }

18
scss/forms/_floating.scss
View file

@ -23,9 +23,9 @@
> textarea + label, > textarea + label,
> select + label { > select + label {
position: absolute; position: absolute;
top: 35%; top: 0.55rem;
left: 0.8rem; left: 0.8rem;
transform: translateY(-50%); transform: translateY(0%);
background: var(#{$css-var-prefix}form-element-background-color); background: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color); color: var(#{$css-var-prefix}form-element-placeholder-color);
cursor: text; cursor: text;
@ -38,26 +38,16 @@
> textarea:focus + label, > textarea:focus + label,
> select:focus + label, > select:focus + label,
> select:has(option:checked:not([disabled])) + label { > select:has(option:checked:not([disabled])) + label {
top: -5%; top: 0;
padding: calc(var(#{$css-var-prefix}spacing) * 0.15) padding: calc(var(#{$css-var-prefix}spacing) * 0.15)
calc(var(#{$css-var-prefix}spacing) * 0.5); calc(var(#{$css-var-prefix}spacing) * 0.5);
transform: translateY(-55%) scale(0.8); transform: translateY(-50%) scale(0.8);
color: var(#{$css-var-prefix}form-element-active-border-color); color: var(#{$css-var-prefix}form-element-active-border-color);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
line-height: 1.15; line-height: 1.15;
transition: all $transition-fast; transition: all $transition-fast;
} }
> textarea + label {
top: 1rem;
transform: translateY(0);
}
> textarea:not(:placeholder-shown) + label,
> textarea:focus + label {
top: 0;
transform: translateY(-50%) scale(0.8);
}
@if map.get($modules, "forms/validation") { @if map.get($modules, "forms/validation") {
> input:user-invalid:not(:placeholder-shown) + label, > input:user-invalid:not(:placeholder-shown) + label,
> textarea:user-invalid:not(:placeholder-shown) + label { > textarea:user-invalid:not(:placeholder-shown) + label {

2
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*! /*!
* Pico CSS ✨ v2.2.7 (https://github.com/Yohn/PicoCSS) * Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2025 - Licensed under MIT * Copyright 2019-2025 - Licensed under MIT
*/ */