From ba48bb50dadda222e8e9f143e4682b3df362876c Mon Sep 17 00:00:00 2001 From: Yohn Date: Wed, 22 Jan 2025 18:40:49 -0500 Subject: [PATCH] had to update the striped table rows again cause they were failing, and update the floating labels --- README.md | 8 +- docs/index.html | 533 ++++++++++++++++------------------- package.json | 10 +- scss/content/_table.scss | 12 +- scss/forms/_floating.scss | 18 +- scss/helpers/_copyright.scss | 2 +- 6 files changed, 264 insertions(+), 319 deletions(-) diff --git a/README.md b/README.md index a9f0a9b4..c7ad7c04 100644 --- a/README.md +++ b/README.md @@ -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. ```html - + ``` ### Install with NPM @@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports: ```html ``` @@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container: ```html ``` @@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great: Hello, world! diff --git a/docs/index.html b/docs/index.html index c34d7aae..b796db5d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,6 +1,5 @@ - @@ -24,7 +23,6 @@ - @@ -42,13 +40,11 @@ /*#ff9500;*/ --yopico-logo-bolts: var(--pico-primary-focus); /*#ffbf00;*/ - --pico-logo-wordmark: var(--pico-color); --pico-logo-big-sparkle: var(--pico-primary-background); /*#ff9500;*/ --pico-logo-small-sparkles: var(--pico-primary); /*#ff9500;*/ - } .three-columns { @@ -62,7 +58,6 @@ } -
@@ -70,35 +65,34 @@
- - - - - - - - + + + + + + +

A Pico CSS + example with addition to the standard Pico CSS library.

Demo page from picocss.com model docs

@@ -112,7 +106,8 @@ And then you'll need the js located at: js/SwitchColorMode.js -->
-
Color Scheme @@ -190,7 +184,6 @@ data-theme="slate" href="javascript:void(0);">Slate
-
-
-

Yohns PicoCSS Fork v2.2.7

+

Yohns PicoCSS Fork v2.2.8

I've merged some open pull requests from the original Pico repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted @@ -232,8 +224,7 @@ <label> within groups, .row & .row-fluid and the .col-* classes like Bootstrap, .align-* and more.) The demo docs here is the main enhanced that have been added to the Pico CSS 2.0.6 branch, for more - docs, refer to the original Pico CSS docs. -

+ docs, refer to the original Pico CSS docs.

(OPTIONAL) Some of the demos on this page do require Vanilla JavaScript Files to work the same as @@ -249,13 +240,21 @@

Striped rows require .striped class

Styles for a <caption> element have been added for tables as well.

-

For rows that will be hidden, make sure to add the hidden attribute like so: <tr hidden>

+

For rows that will be hidden, make sure to add the hidden attribute like so: + <tr hidden>

When rows are toggled, the hidden rows have * around the first column.

- + - + @@ -348,8 +347,7 @@
  • HTML Structure:
      -
    • Each tab button must have the following attributes: -
        +
      • Each tab button must have the following attributes:
        • role="tab"
        • id="unique-tab-id" - A unique ID for the tab
        • aria-selected="true/false" - Indicates if the tab is selected
          • @@ -357,19 +355,20 @@
        • tabindex="0/-1" - Indicates if the tab is focusable
        • -
      • Each tab panel must have the following attributes: -
          +
        • Each tab panel must have the following attributes:
          • role="tabpanel"
          • id="panel-id" - A unique ID for the panel
          • aria-labelledby="unique-tab-id" - The ID of the associated tab
            • -
          • hidden - Indicates if the panel is hidden (use hidden attribute for non-active panels)
            • +
          • hidden - Indicates if the panel is hidden (use hidden attribute for + non-active panels)
      • JavaScript: -

        The JavaScript file PicoTabs.js is required for the tabs to function correctly. Ensure you include it in your HTML file:

        +

        The JavaScript file PicoTabs.js is required for the tabs to function correctly. Ensure you + include it in your HTML file:

        <script src="js/PicoTabs.js"></script>

        Initialize the tabs by adding the following code:

        document.addEventListener("DOMContentLoaded", () => {
@@ -390,9 +389,7 @@
 					
        Tab Example:
        
 					
        
 						
-						
+						
 						
        
 							
        Tab One Content
        
 							
        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
 								deserunt mollit anim id est laborum.
        
 						
        
-
 						
-						
+						
 						
-
 						
-
      + aria-controls="nav-example2"> ≡
    • - Solar System Planets - Solar System Planets
    Planet