PicoCSS

https://github.com/yohn/picocss
Admin
A minimalist and lightweight CSS framework that prioritizes semantic syntax, making every HTML...
Tokens:5,084
Snippets:28
Trust Score:8.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Link PicoCSS from jsDelivr CDN in HTML

Source: https://github.com/yohn/picocss/blob/main/README.md

Shows how to include PicoCSS in an HTML document using the jsDelivr CDN, providing a quick and easy way to get started without local installation.

```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.min.css" />
```

--------------------------------

### Install Pico.css with NPM

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet demonstrates how to install the Pico.css library using the Node Package Manager (NPM). This is the standard way to include Pico.css in a JavaScript or web project.

```shell
npm i @yohns/picocss
```

--------------------------------

### Dropdown Submenu HTML Structure

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Example of a nested dropdown menu structure using `<details class="dropdown">` and unordered lists for hierarchical navigation, as seen in the 'Getting Started' section.

```HTML
<details class="dropdown">
  <summary>Getting Started</summary>
  <ul>
    <li>About
      <ul>
        <li>What’s new in v2?</li>
        <li>Mission</li>
        <li>Usage scenarios</li>
        <li>Brand</li>
        <li>Built With</li>
      </ul>
    </li>
    <li>Quick start</li>
    <li>Version picker New</li>
    <li>Color schemes</li>
    <li>Class-less version</li>
    <li>Conditional styling New</li>
    <li>RTL</li>
    <li>CSS Variables</li>
    <li>Sass</li>
    <li>Colors New</li>
  </ul>
</details>
```

--------------------------------

### HTML for PicoCSS Ghost Buttons

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This snippet demonstrates how to create ghost buttons in PicoCSS by applying the `.ghost` class. It shows examples of default, secondary, and contrast ghost buttons, which have transparent backgrounds and borders and are often used for less important actions.

```HTML
<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>
```

--------------------------------

### Example HTML Structure for Accessible Tabs

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This HTML snippet demonstrates the required structure for creating accessible tabs using PicoTabs. It includes tab buttons with ARIA attributes and corresponding tab panels, ensuring proper accessibility and keyboard navigation.

```HTML
<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>
```

--------------------------------

### HTML Example for Deprecated PicoCSS Tabs

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This HTML snippet demonstrates the deprecated tab component structure in PicoCSS, utilizing <details> and <summary> tags within a <section role="region"> element to create tab-like functionality without JavaScript. It includes examples of text content, a table, and a form within different tabs.

```HTML
<section role="region">
	<details name="lets-go" open>
		<summary>Tab 1</summary>
		<div>
			<p>Content for Tab 1</p>
			<p>Content for Tab 1</p>
		</div>
	</details>
	<details name="lets-go">
		<summary>Tab 2</summary>
		<div>
			<p>Just a random table</p>
			<table>
				<tr>
					<td>row 1 col 1</td>
					<td>row 1 col 2</td>
					<td>row 1 col 3</td>
				</tr>
				<tr>
					<td>row 2 col 1</td>
					<td>row 2 col 2</td>
					<td>row 2 col 3</td>
				</tr>
				<tr>
					<td>row 3 col 1</td>
					<td>row 3 col 2</td>
					<td>row 3 col 3</td>
				</tr>
			</table>
		</div>
	</details>
	<details name="lets-go">
		<summary>Tab 3</summary>
		<div>
			<form action="javascript:void(0);">
				<section role="form">
					<input type="text" id="name" name="name" placeholder="Name:" required>
					<label for="name">Name:</label>
				</section>
				<section role="form">
					<input type="email" id="email" name="email" placeholder="Email:" required>
					<label for="email">Email:</label>
				</section>
				<input type="submit" value="Submit">
			</form>
		</div>
	</details>
	<details name="lets-go">
		<summary>Tab 4</summary>
		<div>
			<p>Content for Tab 4</p>
		</div>
	</details>
	<details name="lets-go">
		<summary>Tab 5</summary>
		<div>
			<p>Content for Tab 5</p>
		</div>
	</details>
</section>
```

--------------------------------

### PicoCSS HTML Modal with Form Example

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This HTML snippet demonstrates how to create a modal dialog using PicoCSS that includes a form for user input (Name, Password). It features a header with a close button, input fields within `section` elements, and a footer with action buttons (Cancel, Confirm). The `onclick` events are set to `toggleModal(event)` for modal control.

```HTML
<dialog id="modal-form-example">
	<article>
		<form action="javascript:void(0);" method="POST">
			<header>
				<button aria-label="Close" rel="prev" data-target="modal-form-example" onclick="toggleModal(event)"></button>
				<h3>Modal with a Form!</h3>
			</header>
			<section role="form">
				<input autofocus type="text" name="mf-name" id="mf-name" placeholder="Name">
				<label for="mf-name">Name</label>
			</section>
			<section role="form">
				<input type="password" name="mf-pass" id="mf-pass" placeholder="Password">
				<label for="mf-pass">Password</label>
			</section>
			<footer>
				<div class="grid">
					<button role="button" class="secondary" data-target="modal-form-example" onclick="toggleModal(event)">&cross; Cancel</button>
					<div></div>
					<button data-target="modal-form-example" onclick="toggleModal(event)">&check; Confirm</button>
				</div>
			</footer>
		</form>
	</article>
</dialog>
```

--------------------------------

### Basic HTML Template with Pico.css

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet provides a complete starter HTML document demonstrating the basic structure for using Pico.css. It includes meta tags for responsiveness and color scheme, and links to the pico.min.css stylesheet.

```HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="css/pico.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

--------------------------------

### Link PicoCSS Manually in HTML

Source: https://github.com/yohn/picocss/blob/main/README.md

Demonstrates how to link the minified PicoCSS stylesheet in the <head> section of an HTML document after manually downloading the framework.

```HTML
<link rel="stylesheet" href="css/pico.min.css" />
```

--------------------------------

### HTML Template with Pico.css Class-less Version

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet provides a complete HTML template demonstrating the usage of the class-less Pico.css version. It shows how semantic HTML elements are automatically styled, simplifying markup for quick projects.

```HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
    />
    <title>Hello, world!</title>
  </head>
  <body>
    <main>
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>
```

--------------------------------

### JavaScript for PicoCSS UI Interactions and Theme Switching

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This JavaScript code executes on DOMContentLoaded, handling various UI interactions. It initializes a `FileValidator`, manages alignment classes for a row based on button clicks, highlights code blocks using `hljs.highlightElement`, and provides a `changeTheme` function to dynamically update the PicoCSS theme via a CDN link, triggered by elements with the `change-theme` class. It also initializes `PicoTabs`.

```JavaScript
document.addEventListener("DOMContentLoaded", () => { const checkFile = document.getElementById("checkFile"); new FileValidator(checkFile); const alignButtons = document.querySelectorAll(".change-row-align"); const alignRow = document.getElementById("row-align-example"); alignButtons.forEach((button) => {
 button.addEventListener("click", () => {
 let dir = button.getAttribute('data-align');
 console.log(dir)
 if (dir == 'start') {
 alignRow.classList.remove('align-center', 'align-end');
 alignRow.classList.add('align-start');
 } else if (dir == 'center') {
 alignRow.classList.remove('align-start', 'align-end');
 alignRow.classList.add('align-center');
 } else {
 alignRow.classList.remove('align-start', 'align-center');
 alignRow.classList.add('align-end');
 }
 });
 });
 document.querySelectorAll('pre code').forEach((el) => { hljs.highlightElement(el); });
 // Function to change the theme
 function changeTheme(newTheme) {
 const linkElement = document.getElementById('theme-color-ss');
 if (linkElement) {
 linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.10/css/pico.' + newTheme + '.min.css');
 }
 }
 // Adding click event listener to all elements with the "change-theme" class
 document.querySelectorAll('.change-theme').forEach(element => {
 element.addEventListener('click', function () {
 const newTheme = this.getAttribute('data-theme');
 changeTheme(newTheme);
 });
 });
 new PicoTabs('\\[role=\"tablist\\]');
 });
```

--------------------------------

### Link Pico.css Class-less Version (Fluid)

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet demonstrates how to link the fluid class-less version of Pico.css from a CDN. This variant provides a full-width, fluid container for the main content area, ideal for different layout needs.

```HTML
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.fluid.classless.min.css"
/>
```

--------------------------------

### Responsive Grid Layout Classes

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css provides a responsive grid system with `.col-*`, `.col-*BREAKPOINT*-*`, and `.offset-*` classes for defining columns and offsets. `.row` has a max width, while `.row-fluid` is 100% width. Alignment classes like `.align-start`, `.align-center`, or `.align-end` can be added to `.row` or `.row-fluid`.

```HTML
<!-- Basic Columns -->
<div class="row">
  <div class="col-3"></div>
  <div class="col-6"></div>
  <div class="col-3"></div>
</div>

<!-- Columns with Offsets -->
<div class="row">
  <div class="col-3 offset-1"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

<!-- Responsive Columns with Breakpoints -->
<div class="row">
  <div class="col-2 col-md-4"></div>
  <div class="col-4 offset-8 col-md-6 offset-md-6"></div>
  <div class="col-5 offset-1 col-md-11"></div>
  <div class="col-2 col-md-6"></div>
  <div class="col-3 offset-9 col-md-6 offset-md-6"></div>
  <div class="col-3 col-md-12 col-lg-6"></div>
  <div class="col-3 col-md-12 col-lg-6"></div>
  <div class="col-4 col-md-6 col-lg-3"></div>
  <div class="col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10"></div>
</div>

<!-- Alignment Classes -->
<div class="row align-center">
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>

<!-- Medium Breakpoint Example -->
<div class="row">
  <div class="col-12 col-md-4"></div>
  <div class="col-12 col-md-4"></div>
  <div class="col-12 col-md-4"></div>
</div>
```

--------------------------------

### Link Pico.css Class-less Version (Centered)

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet shows how to link the class-less version of Pico.css from a CDN to achieve a centered viewport. This version automatically styles semantic HTML elements without requiring additional classes.

```HTML
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
/>
```

--------------------------------

### Initialize PicoTabs on DOM Load

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This JavaScript code initializes the PicoTabs functionality once the DOM content is fully loaded. It targets elements with `role="tablist"` to enable tab behavior.

```JavaScript
document.addEventListener("DOMContentLoaded", () => {
	new PicoTabs('[role="tablist"]');
});
```

--------------------------------

### Import Pico.css into SCSS

Source: https://github.com/yohn/picocss/blob/main/README.md

This snippet shows how to import the Pico.css library into an SCSS file using the @use at-rule. This allows developers to leverage Pico.css's styles within their Sass projects.

```SCSS
@use "pico";
```

--------------------------------

### Implement HTML for Pico CSS Color Mode Switch

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This HTML snippet provides the necessary structure for a classless color mode toggle switch. It requires the `SwitchColorMode.js` script and relies on specific `name` and `role` attributes for functionality. The `data-theme` attribute on the `<html>` tag can set the default mode.

```HTML
<label>
	<input name="color-mode-toggle" role="switch" type="checkbox" value="1" aria-label="Toggle Light or Dark Mode">
</label>
```

--------------------------------

### HTML for PicoCSS Hamburger Menu

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This snippet provides the HTML structure for a responsive hamburger menu using PicoCSS, including custom icon replacement and list roles for accessibility. It demonstrates how to create a collapsible navigation with a checkbox and label for toggling.

```HTML
<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>
```

--------------------------------

### Classless HTML Structure for Forms and Dropdowns

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css leverages semantic HTML elements like `<label>`, `<legend>`, `<fieldset role="group">`, and `<details class="dropdown">` to achieve a classless design for common UI components.

```HTML
<label>Label Text</label>
<fieldset role="group">
  <legend>Legend Text</legend>
  <!-- form elements -->
</fieldset>
<details class="dropdown">
  <!-- dropdown content -->
</details>
```

--------------------------------

### Include PicoTabs.js Script

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This snippet shows how to include the PicoTabs.js JavaScript file in your HTML document, which is essential for the tab functionality.

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

--------------------------------

### Modal Sizing Classes

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css offers various classes to control modal dimensions, applied directly to the `<dialog>` tag for small, medium, large, extra-large, and fullscreen sizes.

```HTML
<!-- Example Modal Dialog with Size Class -->
<dialog class="modal-sm">
  <!-- Modal content -->
</dialog>

<!-- Available Modal Size Classes -->
.modal-sm
.modal-md
.modal-lg
.modal-xlg
.modal-fs
```

--------------------------------

### Define Pico CSS Custom Variables and Three-Column Layout

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This CSS snippet defines custom properties for Pico CSS branding elements, allowing for easy color customization of the logo. It also includes a utility class `.three-columns` to create a responsive, three-column flexbox layout with specific width constraints.

```CSS
:root { --yopico-logo-wordmark: var(--pico-color); --yopico-logo-big-sparkle: var(--pico-primary-background); /*#ff9500;*/ --yopico-logo-small-sparkles: var(--pico-primary); /*#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 { flex-wrap: wrap; flex-direction: row !important; min-width: 60vw !important; } .three-columns li { flex: 33%; }
```

--------------------------------

### HTML for PicoCSS Floating Labels

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This snippet illustrates how to implement floating labels in PicoCSS for input, select, and textarea elements. It requires a `role="form"` on a section, a `placeholder` attribute on the input/textarea, and a matching value in the associated label tag.

```HTML
<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>
```

--------------------------------

### HTML for Hamburger Menu Toggle Icon

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

This HTML snippet provides the structure for a checkbox and label that act as the toggle icon for the hamburger menu. The checkbox and label IDs must match for correct functionality.

```HTML
<input type="checkbox" id="YOUR-ID" />   <label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
```

--------------------------------

### Timeline Custom CSS Variables

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css allows customization of the timeline component's appearance using CSS custom properties for line color, dot background, dot border, and arrow color.

```CSS
--pico-timeline-line-color: var(--pico-primary-background);
--pico-timeline-dot-background-color: var(--pico-primary-inverse);
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
```

--------------------------------

### Form Grouping HTML Selectors

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css uses specific HTML element combinations and the `role="group"` attribute for structuring form inputs, enabling logical grouping of related fields.

```HTML
form > [role=group]
form > [role=group] > select
form > [role=group] > label + input + select
```

--------------------------------

### Form Validation Attributes

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

Pico.css supports `:user-valid` and `:user-invalid` pseudo-classes for styling form elements based on their validation state. Form validation can be disabled by adding the `novalidate` attribute to the `<form>` tag.

```HTML
<form novalidate>
  <!-- form elements -->
</form>
```

--------------------------------

### Accordion Hide Arrow Class

Source: https://github.com/yohn/picocss/blob/main/docs/index.html

The `hide-arrow` class can be applied to a `<details>` tag within an accordion or dropdown to remove the default arrow icon from its `<summary>` element.

```HTML
<details class="hide-arrow">
  <summary>Accordion Title</summary>
  <!-- Accordion content -->
</details>
```
Tokens:
Raw