Pico CSS

https://picocss.com/docs
Admin
Pico CSS is a minimalist CSS framework that provides a clean, class-less design for web projects. It...
Tokens:38,606
Snippets:503
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Pico.css with Composer

Source: https://picocss.com/docs

Install Pico.css using Composer for PHP projects.

```bash
composer require picocss/pico
```

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

### Install Pico.css with NPM

Source: https://picocss.com/docs

Install Pico.css using NPM for project integration. Then, import it into your SCSS files.

```bash
npm install @picocss/pico
```

```scss
@use "pico";
```

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

### Install Pico.css with Yarn

Source: https://picocss.com/docs

Install Pico.css using Yarn for project integration. Then, import it into your SCSS files.

```bash
yarn add @picocss/pico
```

```scss
@use "pico";
```

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

### Basic Accordion Example

Source: https://picocss.com/docs/accordion

Use `<details>` and `<summary>` tags for accordions. Adding `name="example"` to multiple `<details>` elements ensures only one can be open at a time.

```html
<details name="example" open>
  <summary>Accordion 1</summary>
  <p>...</p>
</details>

<hr />

<details name="example">
  <summary>Accordion 2</summary>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</details>
```

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

### Example with Pico Styles

Source: https://picocss.com/docs/conditional

This form will be styled by Pico CSS because it is wrapped in a .pico container.

```html
<form class="pico">
  <input type="text" name="text" placeholder="Text" aria-label="Text" />
</form>
```

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

### Example without Pico Styles

Source: https://picocss.com/docs/conditional

This form will not be styled by Pico CSS as it lacks the .pico container.

```html
<form>
  <input type="text" name="text" placeholder="Text" aria-label="Text" />
</form>
```

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

### Link Pico.css via CDN

Source: https://picocss.com/docs

Use this CDN link in your HTML's <head> for a quick setup without local files.

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

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

### Starter HTML Template with Fuchsia Theme

Source: https://picocss.com/docs/version-picker/fuchsia

A basic HTML template demonstrating how to include the Fuchsia theme CSS. This serves as a starting point for projects using this theme.

```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.fuchsia.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Basic HTML Structure with Pico CSS

Source: https://picocss.com/docs/mission

This example demonstrates a simple HTML structure using semantic elements that Pico CSS styles by default. It includes a main content area, a form with input fields, and a footer.

```html
<main>
  <h1>Join the pursuit of HTML simplicity</h1>
  <p>Let’s avoid meaningless div and classes and make it beautiful!</p>
  <form>
    <input type="email" placeholder="Your email" />
    <input type="submit">Let’s start!</input>
  </form>
</main>

<footer>
  This page should be fast enough to please Google's algorithm.
</footer>
```

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

### Custom Class-less Configuration with SASS

Source: https://picocss.com/docs/classless

Example of recompiling Pico.css with SASS to customize the root container selector for the class-less version. This is useful for frameworks like React, Gatsby, or Next.js.

```scss
/* Custom Class-less version for React */
@use "pico" with (
  
  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root",
  
  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true,

  // Enable .classes
  $enable-classes: false
)
```

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

### Basic Textarea Example

Source: https://picocss.com/docs/forms/textarea

A standard textarea with a name, placeholder, and ARIA label for accessibility.

```html
<textarea
  name="bio"
  placeholder="Write a professional short bio..."
  aria-label="Professional short bio"
>
</textarea>
```

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

### Nav with Dropdown Component

Source: https://picocss.com/docs/nav

Integrate dropdowns within the Nav component. The example shows a 'Account' dropdown with nested list items.

```html
<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="secondary">Services</a></li>
    <li>
      <details class="dropdown">
        <summary>
          Account
        </summary>
        <ul dir="rtl">
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>
```

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

### Form Group with Focus Styling

Source: https://picocss.com/docs/group

This example demonstrates a form group with multiple inputs and a submit button. It includes `:focus` styling for the group, which depends on the `:has()` CSS selector for enhanced user experience.

```html
<form>
  <fieldset role="group">
    <input name="email" type="email" placeholder="Email" autocomplete="email" />
    <input name="password" type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </fieldset>
</form>
```

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

### Styled Button Group

Source: https://picocss.com/docs/group

This example shows a button group with varied styling applied to the buttons, including a 'secondary' and 'contrast' class for distinct visual appearances.

```html
<div role="group">
  <button>Button</button>
  <button class="secondary">Button</button>
  <button class="contrast">Button</button>
</div>
```

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

### Customize Pico.css with CSS Variables

Source: https://picocss.com/docs/css-variables

Define CSS variables within the :root selector for global changes or on specific selectors for local overrides. This example customizes border-radius, spacing, and font properties.

```css
<style>
  :root {
    --pico-border-radius: 2rem;
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-form-element-spacing-vertical: 1rem;
    --pico-form-element-spacing-horizontal: 1.25rem;
  }
  h1 {
    --pico-font-family: Pacifico, cursive;
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }
  button {
    --pico-font-weight: 700;
  }
</style>

<h1>Music fest mania</h1>
<p>
  Get ready to dance and sing your heart out at 
  our Music Fest Mania. Join the crowd, jam to
  your favorite band, and discover new artists.
</p>
<button>Let's rock out!</button>
```

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

### Starter HTML Template with Pico.css

Source: https://picocss.com/docs

A basic HTML template demonstrating how to include Pico.css and structure content.

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

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

### Starter HTML Template with Indigo CSS

Source: https://picocss.com/docs/version-picker/indigo

A basic HTML template demonstrating the integration of Pico CSS with the Indigo theme.

```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.indigo.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Grey Theme

Source: https://picocss.com/docs/version-picker/grey

A basic HTML template demonstrating the integration of the grey Pico CSS theme.

```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.grey.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Cyan CSS

Source: https://picocss.com/docs/version-picker/cyan

A basic HTML structure demonstrating the integration of the Cyan Pico CSS theme.

```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.cyan.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Disabled Input Example

Source: https://picocss.com/docs/forms/input

Disabled input fields are visually distinct and non-interactive. Use the `disabled` attribute.

```html
<input
  type="text"
  name="text"
  placeholder="Disabled"
  aria-label="Disabled input"
  disabled
>
```

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

### Starter HTML Template with Pico Conditional CSS

Source: https://picocss.com/docs/conditional

A basic HTML template demonstrating how to set up Pico's conditional CSS, including styled and unstyled sections.

```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.conditional.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main>
      <section>
        <p>Unstyled hello world!</p>
      </section>
      <section class="pico">
        <p>Styled hello world!</p>
      </section>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Sand Theme

Source: https://picocss.com/docs/version-picker/sand

A basic HTML template demonstrating the integration of the sand theme CSS file.

```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.sand.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>

```

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

### Read-only Input Example

Source: https://picocss.com/docs/forms/input

Read-only input fields display a value that cannot be changed by the user. Use the `readonly` attribute.

```html
<input
  type="text"
  name="text"
  value="Read-only"
  aria-label="Read-only input"
  readonly
>
```

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

### Starter HTML Template with Zinc Theme

Source: https://picocss.com/docs/version-picker/zinc

A basic HTML template demonstrating how to set up a page with the Zinc theme applied.

```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.zinc.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Purple Theme

Source: https://picocss.com/docs/version-picker/purple

A basic HTML template demonstrating the integration of the purple theme variant of Pico CSS.

```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.purple.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Range Input with Default Value

Source: https://picocss.com/docs/forms/range

A range input slider pre-set to a specific value. Useful for sliders that should start at a particular setting.

```html
<label>
  Contrast
  <input type="range" value="40" />
</label>
```

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

### Starter HTML Template with Slate Theme

Source: https://picocss.com/docs/version-picker/slate

A basic HTML template demonstrating how to include the slate theme of Pico CSS and set up a container for content.

```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.slate.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Pink Pico CSS

Source: https://picocss.com/docs/version-picker/pink

A basic HTML template demonstrating the inclusion of the pink Pico CSS theme for a project.

```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.pink.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### CDN Usage for Slate Theme

Source: https://picocss.com/docs/version-picker/slate

Use this CDN link to quickly integrate the slate theme of Pico CSS into your project without local installation.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.slate.min.css"
>
```

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

### Starter HTML Template with Violet Theme

Source: https://picocss.com/docs/version-picker/violet

A basic HTML template demonstrating the inclusion of the violet theme CSS.

```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.violet.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Orange Theme

Source: https://picocss.com/docs/version-picker/orange

A basic HTML template demonstrating the integration of the orange theme CSS file.

```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.orange.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Lime Theme

Source: https://picocss.com/docs/version-picker/lime

A basic HTML template demonstrating the integration of the Lime theme via a local CSS file.

```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.lime.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Amber Theme

Source: https://picocss.com/docs/version-picker/amber

A basic HTML template demonstrating the inclusion of the amber theme CSS.

```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.amber.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Blue Theme

Source: https://picocss.com/docs/version-picker/blue

A basic HTML template demonstrating the inclusion of the blue theme CSS.

```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.blue.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Override Primary Colors for Light and Dark Schemes

Source: https://picocss.com/docs/css-variables

Detailed example to override the primary color variables for both light and dark color schemes. This includes text selection, primary color, background, underline, hover, focus, and inverse states.

```css
/* Orange color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
  --pico-text-selection-color: rgba(244, 93, 44, 0.25);
  --pico-primary: #bd3c13;
  --pico-primary-background: #d24317;
  --pico-primary-underline: rgba(189, 60, 19, 0.5);
  --pico-primary-hover: #942d0d;
  --pico-primary-hover-background: #bd3c13;
  --pico-primary-focus: rgba(244, 93, 44, 0.5);
  --pico-primary-inverse: #fff;
}

/* Orange color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
    --pico-primary: #f56b3d;
    --pico-primary-background: #d24317;
    --pico-primary-underline: rgba(245, 107, 61, 0.5);
    --pico-primary-hover: #f8a283;
    --pico-primary-hover-background: #e74b1a;
    --pico-primary-focus: rgba(245, 107, 61, 0.375);
    --pico-primary-inverse: #fff;
  }
}
/* Orange color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
  --pico-primary: #f56b3d;
  --pico-primary-background: #d24317;
  --pico-primary-underline: rgba(245, 107, 61, 0.5);
  --pico-primary-hover: #f8a283;
  --pico-primary-hover-background: #e74b1a;
  --pico-primary-focus: rgba(245, 107, 61, 0.375);
  --pico-primary-inverse: #fff;
}
```

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

### Starter HTML Template with Green Theme

Source: https://picocss.com/docs/version-picker/green

A basic HTML5 template demonstrating the integration of the green theme Pico CSS. Ensure the link tag is placed within the head.

```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.green.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Red Theme

Source: https://picocss.com/docs/version-picker/red

A basic HTML structure including the red theme stylesheet for a new project.

```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.red.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Yellow Theme

Source: https://picocss.com/docs/version-picker/yellow

A basic HTML5 template demonstrating the integration of the yellow Pico CSS theme.

```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.yellow.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Pumpkin Theme

Source: https://picocss.com/docs/version-picker/pumpkin

A basic HTML template demonstrating the inclusion of the Pumpkin theme CSS and a simple container.

```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.pumpkin.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Implement a Custom Pico.css Theme

Source: https://picocss.com/docs/sass

Create a custom theme by excluding the default Pico theme and importing your own custom theme file. This allows for full brand identity reflection.

```scss
// Pico without default theme
@use "pico" with (
  $modules: (
    "themes/default": false
  )
);

// Your custom theme
@use "path/custom-theme";   
```

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

### Link to Fluid Class-less CSS

Source: https://picocss.com/docs/classless

Shows how to link the fluid class-less version of Pico.css for a fluid container layout.

```html
<link rel="stylesheet" href="css/pico.fluid.classless.min.css">
```

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

### Basic Grid Layout

Source: https://picocss.com/docs/grid

Use the .grid class to create a responsive grid container with auto-layout columns. Columns collapse on small devices (<768px).

```html
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

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

### Jade theme starter HTML template

Source: https://picocss.com/docs/version-picker/jade

A complete HTML5 boilerplate configured with the Jade theme.

```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.jade.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Link Pico.css Manually

Source: https://picocss.com/docs

Include this in your HTML's <head> to link the local pico.min.css file.

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

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

### Apply Light Theme to Article

Source: https://picocss.com/docs/color-schemes

Demonstrates how to explicitly set an article to use the light color scheme by applying the `data-theme="light"` attribute.

```html
<article data-theme="light">
  ...
</article>
```

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

### Basic HTML Structure with Landmarks

Source: https://picocss.com/docs/landmarks-section

Use `<header>`, `<main>`, and `<footer>` as direct children of `<body>` for responsive vertical padding.

```html
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
```

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

### Use Yellow CSS from CDN

Source: https://picocss.com/docs/version-picker/yellow

Link the yellow theme of Pico CSS directly from a CDN in your HTML's `<head>`.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.yellow.min.css"
>
```

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

### Link to Class-less CSS

Source: https://picocss.com/docs/classless

Demonstrates how to link the default class-less version of Pico.css in your HTML for centered viewports.

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

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

### Use Pink Pico CSS from CDN

Source: https://picocss.com/docs/version-picker/pink

Link the pink theme CSS from a Content Delivery Network for quick integration and caching benefits.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.pink.min.css"
>
```

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

### Include Blue Theme CSS Locally

Source: https://picocss.com/docs/version-picker/blue

Link to the blue theme CSS file in your project's HTML head.

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

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

### Use Indigo Theme with Sass

Source: https://picocss.com/docs/version-picker/indigo

Import Pico CSS with the Indigo theme color using Sass.

```sass
@use "pico" with (
  $theme-color: "indigo"
);
```

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

### Basic Dropdown and Select

Source: https://picocss.com/docs/dropdown

Demonstrates the basic structure for a dropdown menu and a standard HTML select element. Dropdowns use `<details>`, `<summary>`, and `<ul>` for their structure.

```html
<!-- Dropdown -->
<details class="dropdown">
  <summary>Dropdown</summary>
  <ul>
    <li><a href="#">Solid</a></li>
    <li><a href="#">Liquid</a></li>
    <li><a href="#">Gas</a></li>
    <li><a href="#">Plasma</a></li>
  </ul>
</details>

<!-- Select -->
<select name="select" aria-label="Select" required>
  <option selected disabled value="">Select</option>
  <option>Solid</option>
  <option>Liquid</option>
  <option>Gas</option>
  <option>Plasma</option>false
</select>
```

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

### Use Green Theme from CDN

Source: https://picocss.com/docs/version-picker/green

Link the green theme variant of Pico CSS directly from a CDN. This is a quick way to include the styles without local hosting.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.green.min.css"
>
```

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

### Use Orange Theme from CDN

Source: https://picocss.com/docs/version-picker/orange

Link the orange theme variant of Pico CSS from a CDN for quick integration into your project.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.orange.min.css"
>
```

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

### Use Violet Theme with CDN

Source: https://picocss.com/docs/version-picker/violet

Link to the violet theme CSS file from a CDN for quick integration.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.violet.min.css"
>
```

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

### HTML Structure Comparison

Source: https://picocss.com/docs/classless

Illustrates the difference in HTML structure between Pico.css with utility classes and its class-less version. The class-less version omits the 'container' class on the main element.

```html
<!-- With pico.min.css -->
<body>
  <main class="container">
    <h1>Hello, world!</h1>
  </main>
</body>
```

```html
<!-- With pico.classless.min.css -->
<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>
```

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

### Use Zinc Theme from CDN

Source: https://picocss.com/docs/version-picker/zinc

Link the Zinc theme CSS file directly from a CDN for quick integration.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.zinc.min.css"
>
```

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

### Usage from CDN with Indigo CSS

Source: https://picocss.com/docs/version-picker/indigo

Link to the Indigo theme variant of Pico CSS directly from a CDN.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.indigo.min.css"
>
```

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

### Configure Purple Theme with Sass

Source: https://picocss.com/docs/version-picker/purple

Import Pico CSS with Sass and set the theme-color variable to 'purple' to apply the purple theme.

```scss
@use "pico" with (
  $theme-color: "purple"
);
```

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

### Usage from CDN

Source: https://picocss.com/docs/version-picker/sand

Use this CDN link to include the sand theme of Pico CSS in your project.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.sand.min.css">

```

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

### Basic Link Styles

Source: https://picocss.com/docs/link

Use these classes to apply distinct styles to your links. `.secondary` and `.contrast` provide alternative visual treatments.

```html
<a href="#">Primary</a>
<a href="#" class="secondary">Secondary</a>
<a href="#" class="contrast">Contrast</a>
```

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

### Pico Lightweight Version Configuration

Source: https://picocss.com/docs/sass

Create a lightweight version of Pico.css by disabling specific modules and features. This reduces the CSS weight by approximately 50%.

```scss
// Pico lightweight version
@use "pico" with (
  $enable-semantic-container: true,
  $enable-classes: false,
  $modules: (
    "content/code": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-range": false,
    "forms/input-search": false,
    "components/accordion": false,
    "components/card": false,
    "components/dropdown": false,
    "components/loading": false,
    "components/modal": false,
    "components/nav": false,
    "components/progress": false,
    "components/tooltip": false,
    "utilities/accessibility": false,
    "utilities/reduce-motion": false
  )
);
```

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

### Usage from CDN with Cyan CSS

Source: https://picocss.com/docs/version-picker/cyan

Link to the Cyan theme variant of Pico CSS directly from a CDN.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.cyan.min.css"
>
```

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

### Link to Grey CSS File

Source: https://picocss.com/docs/version-picker/grey

Include this link in your HTML to apply the grey theme locally.

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

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

### Include Fuchsia Theme via CDN

Source: https://picocss.com/docs/version-picker/fuchsia

Use the Fuchsia theme by linking to the Pico CSS CDN. This is a quick way to integrate the theme without local file management.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fuchsia.min.css"
>
```

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

### Import All Colors as SASS Variables

Source: https://picocss.com/docs/colors

Import all Pico.css color variables into your SASS files using `@use "colors" as *;`.

```scss
@use "colors" as *;
```

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

### Link to Indigo CSS

Source: https://picocss.com/docs/version-picker/indigo

Include this link in your HTML to use the Indigo theme variant of Pico CSS.

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

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

### Link to Violet CSS File

Source: https://picocss.com/docs/version-picker/violet

Include this link in your HTML head to apply the violet theme locally.

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

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

### Link Pico.css Color Utilities Stylesheet via CDN

Source: https://picocss.com/docs/colors

Include this stylesheet in the <head> of your HTML using a CDN link to enable Pico.css color utility classes. This is a jsDelivr CDN link.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
>
```

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

### Link Pico.css Color Utilities Stylesheet

Source: https://picocss.com/docs/colors

Include this stylesheet in the <head> of your HTML to enable Pico.css color utility classes. This is a local file path.

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

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

### Use Amber Theme via CDN

Source: https://picocss.com/docs/version-picker/amber

Link to the amber theme CSS file directly from a CDN for quick integration.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.amber.min.css"
>
```

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

### Include Fuchsia Theme Locally

Source: https://picocss.com/docs/version-picker/fuchsia

Link to the Fuchsia theme CSS file in your HTML for local usage. Ensure the path to the CSS file is correct.

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

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

### Configure Pink Theme with Sass

Source: https://picocss.com/docs/version-picker/pink

Use Sass to configure and include the pink theme, allowing for customization within your Sass build process.

```scss
@use "pico" with (
  $theme-color: "pink"
);
```

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

### CDN Link for Fluid Viewport

Source: https://picocss.com/docs/classless

Provides the CDN link for the fluid class-less version of Pico.css, enabling a fluid container layout.

```html
<!-- Fluid viewport -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css">

```

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

### Apply Dark Theme to Article

Source: https://picocss.com/docs/color-schemes

Demonstrates how to explicitly set an article to use the dark color scheme by applying the `data-theme="dark"` attribute.

```html
<article data-theme="dark">
  ...
</article>
```

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

### Include Jade theme via local CSS

Source: https://picocss.com/docs/version-picker/jade

Link the minified Jade theme CSS file in your HTML head.

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

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

### Link Pink Pico CSS Locally

Source: https://picocss.com/docs/version-picker/pink

Include the pink theme CSS file directly in your HTML head for local development or deployment.

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

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

### Nav with Button Integration

Source: https://picocss.com/docs/nav

You can use `<button>` inside `<li>` within the nav. Button sizes automatically match link size and margin.

```html
<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><button class="secondary">Products</button></li>
  </ul>
</nav>
```

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

### Applying modal-is-opening utility class

Source: https://picocss.com/docs/modal

The `.modal-is-opening` class is used in conjunction with `.modal-is-open` to add an opening animation to the modal.

```html
<!doctype html>
<html class="modal-is-open modal-is-opening">
  ...
</html>
```

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

### Link Yellow CSS File Locally

Source: https://picocss.com/docs/version-picker/yellow

Include this tag in the `<head>` of your HTML to use the local yellow version of Pico CSS.

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

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

### Basic Form Structure with Labels and Inputs

Source: https://picocss.com/docs/forms

A standard form layout with fieldset, labels, and input fields for first name and email. Inputs are set to width: 100% by default.

```html
<form>
  <fieldset>
    <label>
      First name
      <input
        name="first_name"
        placeholder="First name"
        autocomplete="given-name"
      />
    </label>
    <label>
      Email
      <input
        type="email"
        name="email"
        placeholder="Email"
        autocomplete="email"
      />
    </label>
  </fieldset>

  <input
    type="submit"
    value="Subscribe"
  />
</form>
```

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

### Apply Pink Background Class

Source: https://picocss.com/docs/colors

Use the `pico-background-pink-600` class to apply a pink background color to an article element.

```html
<article class="pico-background-pink-600">
  Pink card
</article>
```

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

### CDN Link for Centered Viewport

Source: https://picocss.com/docs/classless

Provides the CDN link for the class-less version of Pico.css, suitable for centered viewports.

```html
<!-- Centered viewport -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">

```

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

### Nav with Contrast Link Variants

Source: https://picocss.com/docs/nav

Use `.contrast` class for link variants in the nav. This applies a distinct style to the navigation links.

```html
<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="contrast">About</a></li>
    <li><a href="#" class="contrast">Services</a></li>
    <li><a href="#" class="contrast">Products</a></li>
  </ul>
</nav>
```

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

### CDN Usage for Grey Theme

Source: https://picocss.com/docs/version-picker/grey

Use this CDN link to quickly integrate the grey theme into your project.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.grey.min.css"
>
```

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

### Link to Purple CSS via CDN

Source: https://picocss.com/docs/version-picker/purple

Use this CDN link to include the purple theme variant of Pico CSS in your project.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css"
>
```

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

### Apply Loading Indicator to Article

Source: https://picocss.com/docs/loading

Use `aria-busy="true"` on an `<article>` tag to indicate that the content within is loading.

```html
<article aria-busy="true"></article>
```

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

### Import Pico CSS with Sass CLI Load Path

Source: https://picocss.com/docs/sass

When using the Sass Command-Line Interface, define the load path to avoid relative URLs. This ensures Pico can be found in the node_modules directory.

```bash
sass --load-path=node_modules/@picocss/pico/scss/
```

```scss
@use "pico";
```

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

### Pico Classless Version Configuration

Source: https://picocss.com/docs/sass

Configure Pico.css to generate a classless version by setting `$enable-semantic-container` to true and `$enable-classes` to false.

```scss
// Pico classless version
@use "pico" with (
  $enable-semantic-container: true,
  $enable-classes: false
);
```

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

### Configure Blue Theme with Sass

Source: https://picocss.com/docs/version-picker/blue

Set the theme color to blue when using Pico CSS with Sass.

```scss
@use "pico" with (
  $theme-color: "blue"
);
```

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

### Configure Orange Theme with Sass

Source: https://picocss.com/docs/version-picker/orange

Use Sass to configure and include the orange theme by setting the $theme-color variable.

```scss
@use "pico" with (
  $theme-color: "orange"
);
```

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

### Apply Pink Color Class

Source: https://picocss.com/docs/colors

Use the `pico-color-pink-500` class to apply a pink color to a heading element.

```html
<h2 class="pico-color-pink-500">Pink title</h2>
```

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

### Configure Jade theme with Sass

Source: https://picocss.com/docs/version-picker/jade

Set the theme-color variable to jade when importing Pico via Sass.

```scss
@use "pico" with (
  $theme-color: "jade"
);
```

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

### Custom Class-less Container Selectors

Source: https://picocss.com/docs/classless

Shows the resulting CSS for containers when Pico.css is recompiled with a custom SASS configuration, using '#root' as the semantic root element.

```css
/* Containers */
#root > header,
#root > main,
#root > footer {
  ...
}
```

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

### Link Red Theme CSS via CDN

Source: https://picocss.com/docs/version-picker/red

Use the Pico CSS red theme from a Content Delivery Network.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.red.min.css"
>
```

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

### Include Jade theme via CDN

Source: https://picocss.com/docs/version-picker/jade

Use the jsDelivr CDN to load the Jade theme variant directly.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.jade.min.css"
>
```

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

### Dropdown as a Button

Source: https://picocss.com/docs/dropdown

Use `role="button"` on the summary to make the dropdown function as a button. This is the base implementation.

```html
<details class="dropdown">
  <summary role="button">
    Dropdown as a button
  </summary>
  <ul>
    ...
  </ul>
</details>
```

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

### Import Cyan theme with Sass

Source: https://picocss.com/docs/version-picker/cyan

Use this Sass import to apply the Cyan theme by setting the $theme-color variable.

```sass
@use "pico" with (
  $theme-color: "cyan"
);
```
Tokens:
Raw