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
-
+
Tab One
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.
-
-
- Tab Two
-
+
Tab Two
-
-
- Tab Three
+ Tab Three
Tab Three Content
@@ -502,8 +494,7 @@
docs, but add the
role="navigation" attribute to the
<nav>.
Positioning
The default position puts your nav links and burger menu at the end of the line, but
- data-position="start" will put them at the start of the line.
-
+
data-position="start" will put them at the start of the line.
Breakpoints
Use the data-breakpoint="** " to change when the burger menu appears. The
different values are md, lg, xl and xxl. These are the
@@ -518,8 +509,7 @@
as the id for the label.
DO NOT put the
input[type="checkbox"] within the <label> element, it will not work
- correctly if you do that.
-
+ correctly if you do that.
Custom Hamburger Icon?
Replace the ≡ with your own icon, svg element, or image.
Collapsed List
@@ -531,7 +521,6 @@
Example Hamburger Menu
(resize width of screen if you don't see it)
-
@@ -543,9 +532,7 @@
- ≡
-
+ aria-controls="nav-example"> ≡
Home
@@ -566,7 +553,6 @@
-
Hamburger Menu Under Nav Example
@@ -578,9 +564,7 @@
- ≡
-
+ aria-controls="nav-example2"> ≡
Home
@@ -643,7 +627,8 @@
so that is why this example has the input field with the tooltip on the <label>
wrapper.
- We also want the tooltip width to not be huge when the tooltip is short.
+ We also want the tooltip width to not be huge when the tooltip is short.
+
Ghost buttons are buttons that have a transparent background and border.
- They are often used as secondary buttons to indicate a less important action.
+ Ghost buttons are buttons that have a transparent background and border. They are often used as secondary
+ buttons to indicate a less important action.
Ghost buttons are created by adding the .ghost class to a button
- .ghost will work on all <button>, [type="button"], [type="submit"], [type="reset"], and [role="button"] elements.
+ .ghost will work on all <button>, [type="button"],
+ [type="submit"], [type="reset"], and [role="button"] elements.
Ghost Button
Secondary Ghost Button
Contrast Ghost Button
-
Show the code:
@@ -681,8 +666,7 @@
For floating labels to work, you need to add the role="form" attribute to a
<section> tag, ensure you have a placeholder="example" 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..
-
+ tag, which would go after your form element..
@@ -746,21 +738,17 @@
Validation
Classless!
-
- Using form :user-valid and :user-invalid.
+ Using form :user-valid and :user-invalid.
You can disable the validation by adding the attribute novalidate to the form tag.
Classless except for the file input button previews.
Select your favorite cuisine...
Italian
@@ -770,24 +758,18 @@
French
Check JS for FileValidator class
<label> has been added.<legend> has been added. (To be used with <fieldset role="group"><legend> has been added. (To be used with <fieldset role="group">
+ <details class="dropdown"> has been added.
- Click on the Getting Started to see the sub-dropdown menu under About .
+ Click on the Getting Started to see the sub-dropdown menu under About .
+
[role=group] > .dropdown
@@ -898,83 +882,95 @@
-
- Similar to Bootstrap 5.3.3 ,
- with the responsive .col-*COL#*, .col-*BREAKPOINT*-*COL#*,
- .offset-*COL#*, .offset-*BREAKPOINT*-*COL#*.
-
+
Similar to Bootstrap
+ 5.3.3 , with the responsive .col-*COL#*, .col-*BREAKPOINT*-*COL#*,
+ .offset-*COL#*, .offset-*BREAKPOINT*-*COL#*.
.row has a max width set to the viewport of your xl viewport (1300px by default)
-
.row-fluid max width is 100%.
-
+
.row-fluid max width is 100%.
-
col-3 offset-1
+
col-3
+ offset-1
-
-
-
@@ -987,41 +983,46 @@
When defining multiple .col-*-* on the same element, the order your put the classes on the
element matter.
-
-
col-2, col-md-4
+
+ col-2, col-md-4
-
col-4, offset-8, col-md-6, offset-md-6
+
+ col-4, offset-8, col-md-6, offset-md-6
-
-
col-5, offset-1, col-md-11
+
+ col-5, offset-1, col-md-11
-
col-2, col-md-6
+
+ col-2, col-md-6
-
col-3, offset-9, col-md-6, offset-md-6
+
+ col-3, offset-9, col-md-6, offset-md-6
-
-
col-3 col-md-12 col-lg-6
+
col-3
+ col-md-12 col-lg-6
-
col-3 col-md-12 col-lg-6
+
col-3
+ col-md-12 col-lg-6
-
col-4 col-md-6 col-lg-3
+
col-4
+ col-md-6 col-lg-3
-
col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10
-
+
col-6
+ offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10
@@ -1032,14 +1033,13 @@
-
- You can add .align-start (default), .align-center or .align-end to
+
You can add .align-start (default), .align-center or .align-end to
your .row or .row-fluid element to align the containing elements to the top,
middle, or bottom.
-
@@ -1062,13 +1063,16 @@
-
col-12, col-md-4
+
col-12,
+ col-md-4
-
col-12, col-md-4
+
col-12,
+ col-md-4
-
col-12, col-md-4
+
col-12,
+ col-md-4
@@ -1079,19 +1083,16 @@
-
<form> tags can be between the <header> and <footer>, or wrap around the <header> and <footer> tags within the modal.
+
<form> tags can be between the <header> and
+ <footer>, or wrap around the <header> and <footer>
+ tags within the modal.
-
- Launch Demo Modal
-
-
-
- Launch Form Modal
+ Launch Demo Modal
+ Launch Form Modal
-
Modal Sizes
Having different modal sizes does require a class.
@@ -1119,24 +1120,16 @@
Popovers
Popovers will replace the notifications below.
-
Backdrop Close
-
Manual Close
-
- Click/Tap everywhere else to close
-
+ Click/Tap everywhere else to close
-
-
- Some Feedback Message With Close Button
- ×
+ Some Feedback Message With Close Button ×
-
@@ -1146,14 +1139,11 @@
Accordion 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam,
- tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae
- tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
- lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar
- mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
- amet, congue turpis.
-
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta
+ sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris
+ ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit
+ sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices,
+ porta turpis sit amet, congue turpis.
Accordion 2
@@ -1228,7 +1218,8 @@
DO NOT USE THE FOLLOWING
- All CSS and JavaScript have been removed for the following examples, so you will only be seeing the raw examples, without styling
+ All CSS and JavaScript have been removed for the following examples, so you will only be seeing the raw
+ examples, without styling
Show Old Tabs
The tabs below will be removed in a future version.
@@ -1246,21 +1237,15 @@
Grips
I would have liked to use the role attribute values tablist,
- tab,
- and tabpanel but the w3 specs says we cant use roles on tab, and tabpanel but the w3 specs says we cant use roles on <details><summary>
+ data-tooltip="W3 Specs for Summary"><summary> tags.
<section> in theory has a default role attribute value of
region, though not confirmed, or applied when we are using it for our CSS. So I went with
- the
- role="region" attribute to help with selecting the correct element with CSS, classless and
- no
- JavaScript!
- role="region" attribute to help with selecting the correct element with CSS, classless
+ and no JavaScript!
Example Tabs with no JavaScript:
@@ -1399,49 +1384,35 @@
Show Old Notifications
The Notifications below will be removed in a future version.
-
-
-
- Short Notificaton
-
-
+ Short Notificaton
- Big Notificaton
-
-
+ delay: 60 * 1000 })"> Big Notificaton
-
-
-
@@ -1449,19 +1420,14 @@
Confirm your action!
-
- Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
- pellentesque. Nullam finibus risus non semper euismod.
-
+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus
+ risus non semper euismod.
Cancel
-
- Confirm
-
+ Confirm
-
-
-
-
-
-
-
- This is a small modal with max-width of 400px.
-
-
-
-
-
-
-
-
- This is a medium modal with max-width of 600px.
-
-
-
-
-
-
-
-
- This is a large modal with max-width of 800px.
-
-
-
-
-
-
-
-
- This is an extra large modal with max-width of 1000px.
-
-
-
-
-
-
-
-
- This is a fullscreen modal that takes up the entire viewport.
-
-
-
-
+
+
+
+
+ This is a small modal with max-width of 400px.
+
+
+
+
+
+
+
+ This is a medium modal with max-width of 600px.
+
+
+
+
+
+
+
+ This is a large modal with max-width of 800px.
+
+
+
+
+
+
+
+ This is an extra large modal with max-width of 1000px.
+
+
+
+
+
+
+
+ This is a fullscreen modal that takes up the entire viewport.
+
+
+
-
-
-
-
\ No newline at end of file
diff --git a/package.json b/package.json
index 0dc445d1..104769e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@yohns/picocss",
- "version": "2.2.7",
+ "version": "2.2.8",
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
"authors": [
{
@@ -37,10 +37,10 @@
},
"scripts": {
"✨": "run-s build",
- "build": "run-s start lint \"build:*\" done",
- "build-dev": "run-s start lint \"build-dev:*\" done",
+ "build": "run-s start lint \"build:*\" done --silent",
+ "build-dev": "run-s start lint \"build-dev:*\" done --silent",
"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:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
"build-dev:css": "sass --no-source-map --style expanded --no-error-css scss/:css/",
@@ -72,7 +72,7 @@
"postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9",
"prettier": "^3.4.2",
- "sass": "^1.82.0"
+ "sass": "^1.83.4"
},
"engines": {
"node": ">=20"
diff --git a/scss/content/_table.scss b/scss/content/_table.scss
index 99009416..607c4dea 100644
--- a/scss/content/_table.scss
+++ b/scss/content/_table.scss
@@ -69,13 +69,13 @@
// Striped
@if enable-classes {
- #{$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(/* clean-css ignore:start */ odd of /* clean-css ignore:end */:not([hidden])) td {
- background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
- }
+ /* clean-css ignore:start */
+ #{$parent-selector} table.striped {
+ tbody tr:nth-child(odd of :not([hidden])) th,
+ tbody tr:nth-child(odd of :not([hidden])) td {
+ background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
}
}
+ /* clean-css ignore:end */
}
}
diff --git a/scss/forms/_floating.scss b/scss/forms/_floating.scss
index 9cee71aa..00b0d48d 100644
--- a/scss/forms/_floating.scss
+++ b/scss/forms/_floating.scss
@@ -23,9 +23,9 @@
> textarea + label,
> select + label {
position: absolute;
- top: 35%;
+ top: 0.55rem;
left: 0.8rem;
- transform: translateY(-50%);
+ transform: translateY(0%);
background: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
cursor: text;
@@ -38,26 +38,16 @@
> textarea:focus + label,
> select:focus + label,
> select:has(option:checked:not([disabled])) + label {
- top: -5%;
+ top: 0;
padding: calc(var(#{$css-var-prefix}spacing) * 0.15)
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);
font-size: var(#{$css-var-prefix}font-size);
line-height: 1.15;
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") {
> input:user-invalid:not(:placeholder-shown) + label,
> textarea:user-invalid:not(:placeholder-shown) + label {
diff --git a/scss/helpers/_copyright.scss b/scss/helpers/_copyright.scss
index f1316cdd..4367453f 100644
--- a/scss/helpers/_copyright.scss
+++ b/scss/helpers/_copyright.scss
@@ -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
*/