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.

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>

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

Accessible friendly, with left and right arrow, home and end button triggers to switch between tabs.

Make sure to Download PicoTabs.js

Ensure you have

To set up the tabs, follow these steps:

1. HTML Structure:
   • 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
     • aria-controls="panel-id" - The ID of the associated tab panel
     • tabindex="0/-1" - Indicates if the tab is focusable
   • 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)
2. JavaScript:

   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", () => {
   	new PicoTabs('[role="tablist"]');
   });

3. Keyboard Navigation:

   The following keypresses work for the tabs:

   • ArrowLeft - Move to the previous tab
   • ArrowRight - Move to the next tab
   • Home - Move to the first tab
   • End - Move to the last tab

Tab Example:

<div role="tablist">
	<!-- Tab One -->
	<button id="tabone" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1">
		Tab One
	</button>
	<div id="panel1" role="tabpanel" aria-labelledby="tabone" tabindex="0">
		<h1>Tab One Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	</div>

	<!-- Tab Two -->
	<button id="tabtwo" role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1">
		Tab Two
	</button>
	<div id="panel2" role="tabpanel" aria-labelledby="tabtwo" hidden>
		<h1>Tab Two Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	</div>

	<!-- Tab Three -->
	<button id="tabthree" role="tab" aria-selected="false" aria-controls="panel3" tabindex="-1">
		Tab Three
	</button>
	<div id="panel3" role="tabpanel" aria-labelledby="tabthree" hidden>
		<h1>Tab Three Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
	</div>
</div>

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

<nav role="navigation" data-position="end" data-breakpoint="lg">
	<ul>
		<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
	</ul>
	<ul>
		<li><strong>Like Us on GitHub!</strong></li>
	</ul>
	<input type="checkbox" id="menu-btn2">
	<label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu"
		aria-controls="nav-example2">
		&equiv;
	</label>
	<ol id="nav-example2" role="list">
		<li role="listitem"><a href="#">Home</a></li>
		<li role="listitem"><a href="#">About</a></li>
		<li role="listitem"><a href="#">Services</a></li>
		<li role="listitem"><a href="#">Login</a></li>
		<li role="listitem"><a href="#">Sign Up</a></li>
	</ol>
</nav>

Tooltips are now dark background be default for light and dark theme.

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.

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

<button type="button" class="ghost">Ghost Button</button>
<button type="button" class="ghost secondary">Secondary Ghost Button</button>
<button type="button" class="ghost contrast">Contrast Ghost Button</button>

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

<section role="form">
	<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true"
		aria-labelledby="fl-email">
	<label for="fl-email-ele" id="fl-email">Email</label>
</section>
<section role="form">
	<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
		<option selected disabled value="">Topic</option>
		<option>General</option>
		<option>Support</option>
		<option>Feedback</option>
	</select>
	<label for="fl-topic-ele" id="fl-topic">Topic</label>
</section>
<section role="form">
	<textarea id="fl-message-ele" placeholder="Message" aria-required="true"
		aria-labelledby="fl-message"></textarea>
	<label for="fl-message-ele" id="fl-message">Message</label>
</section>

1. <label> has been added.
2. <legend> has been added. (To be used with <fieldset role="group">
3. <details class="dropdown"> has been added.

Dropdown Submenu Example

Click on the Getting Started to see the sub-dropdown menu under About.

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.

<form> tags can be between the <header> and <footer>, or wrap around the <header> and <footer> tags within the modal.

The main thing will be to add one of the following classes to the <dialog> tag:

• .modal-sm
• .modal-md
• .modal-lg
• .modal-xlg
• .modal-fs