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 to make the building process of websites easier (:user-valid "validation", using <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.

(OPTIONAL) Some of the demos on this page do require Vanilla JavaScript Files 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.

Use the default <nav> component in Pico CSS 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.

Breakpoints

Use the data-breakpoint="**" to change when the burger menu appears. The different values are md, lg, xl and xxl. These are the same breakpoints the .row uses.

Hamburger Icon

Before the list of elements you want to be within the burger menu, add the following:

Change YOUR-ID to whatever id you want to use, but ensure the id for the checkbox, is the same 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.

Custom Hamburger Icon?

Replace the ≡ with your own icon, svg element, or image.

Collapsed List

Add role="list" attribute to the <ul> or <ol> element for the hamburger menu, and then add role="listitem" attribute to each <li> element.

Hamburger Menu Under Nav Example

Information

• I wanted this to work without javascript
• I wanted to use the <details> and <summary> tags.

Grips

1. I would have liked to use the role attribute values tablist, tab, and tabpanel but the w3 specs says we cant use roles on <details> and <summary> tags.
2. <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!

Example Tabs with no JavaScript:

For multi-line tooltips, you can now add 
 where the line break should go within your tooltip area.

I also wanted to remove the dotted line on input fileds when they are contained within the tooltip element, so that is why this example has the input field with the tooltip on the <label> wrapper.

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..

I wanted to add the label tah to have an input group kind of thing going on.

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)

When defining multiple .col-*-* on the same element, the order your put the classes on the element matter.

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.