### Install Pico.css with Composer

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

Install Pico.css using Composer for PHP projects.

```shell
composer require picocss/pico
```

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

### Install Pico.css with Yarn

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

Install Pico.css using Yarn for project integration.

```shell
yarn add @picocss/pico
```

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

### Install Pico.css with NPM

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

Install Pico.css using NPM for project integration.

```shell
npm install @picocss/pico
```

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

### File Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A file input field with custom styling for the file selector button.

```html
<label>
  Upload Document
  <input type="file" name="document" accept=".pdf,.doc,.docx">
</label>
```

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

### Month Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A month input field for selecting a month and year.

```html
<label>
  Month
  <input type="month" name="month">
</label>
```

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

### Fluid Classless Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Configure a fluid, classless Pico.css setup, disabling utility classes and viewport scaling.

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

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

### Radio Button Styling Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A basic example demonstrating radio button styling within a form. Ensure radio buttons in a group share the same 'name' attribute.

```html
<form>
  <fieldset>
    <legend>Gender</legend>
    <label>
      <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female"> Female
    </label>
  </fieldset>
</form>
```

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

### Autoprefixing CSS Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Demonstrates how autoprefixer adds vendor prefixes to CSS properties for broader browser compatibility.

```css
/* Before */
user-select: none;

/* After (with autoprefixer) */
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
```

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

### URL Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

An input field for URLs, with HTML5 validation for correct URL format.

```html
<label>
  Website
  <input type="url" name="website" placeholder="https://example.com">
</label>
```

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

### Basic Textarea Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A multi-line text input area with adjustable height and styling for border, padding, and focus.

```html
<label>
  Message
  <textarea name="message" placeholder="Enter your message..." rows="5"></textarea>
</label>
```

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

### HTML for Tooltip

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

This example shows how to implement tooltips using the `data-tooltip` attribute on elements like buttons and links. The tooltip content is defined directly in the attribute.

```html
<button data-tooltip="Save changes">Save</button>

<a href="/help" data-tooltip="Get help">?</a>
```

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

### Lazy Load Theme Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Dynamically loads the appropriate theme (light or dark) based on user's system preference.

```javascript
const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `/css/pico.${theme}.min.css`;
document.head.appendChild(link);
```

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

### Week Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A week input field for selecting a specific week of the year.

```html
<label>
  Week
  <input type="week" name="week">
</label>
```

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

### Password Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A password input field that masks character input for security.

```html
<label>
  Password
  <input type="password" name="password" autocomplete="current-password">
</label>
```

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

### Text Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A standard text input field for user entry. Styled with border, padding, and focus ring.

```html
<label>
  Username
  <input type="text" name="username" placeholder="Enter username">
</label>
```

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

### Color Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A color picker input that utilizes the native browser color selection UI.

```html
<label>
  Brand Color
  <input type="color" name="color" value="#0172ad">
</label>
```

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

### Time Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A time input field that uses the native browser time selection UI.

```html
<label>
  Meeting Time
  <input type="time" name="time">
</label>
```

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

### Scoped CSS Integration Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Demonstrates how to use Pico.css with a parent selector for scoped styling. Elements inside the '.pico' div are styled, while those outside are not.

```html
<div class="pico">
  <!-- Only Pico CSS applies here -->
  <button>Styled by Pico</button>
</div>

<button>Not styled (outside .pico)</button>
```

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

### Custom Breakpoints Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Example of how to customize specific breakpoints by deep-merging with the default settings. Only the specified breakpoint is modified.

```scss
@use "pico" with (
  $breakpoints: (
    sm: (
      breakpoint: 640px,
      viewport: 600px,
      root-font-size: 110%,
    ),
  ),
);
```

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

### Number Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A number input field with min, max, and step attributes, featuring increment/decrement buttons.

```html
<label>
  Quantity
  <input type="number" name="qty" min="1" max="100" value="1">
</label>
```

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

### Card Component

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Example of a card component using the `<article>` element. Pico.css provides a subtle border, shadow, padding, and spacing, suitable for card layouts.

```html
<article>
  <h2>Card title</h2>
  <p>Card content</p>
  <footer>
    <button>Action</button>
  </footer>
</article>
```

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

### DateTime-Local Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A datetime-local input field for selecting both date and time without timezone information.

```html
<label>
  Event DateTime
  <input type="datetime-local" name="event_dt">
</label>
```

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

### Date Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A date input field that uses the native browser date picker interface.

```html
<label>
  Birth Date
  <input type="date" name="birth_date">
</label>
```

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

### Search Input

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

A search input example styled with Pico.css, including a search icon on the left and validation icons when `aria-invalid` is set.

```html
<input type="search" name="q" placeholder="Search...">
```

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

### CSS Minification Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Shows the effect of CSS minification, which removes whitespace and comments to reduce file size.

```css
/* Before */
button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--pico-primary-border);
  border-radius: var(--pico-border-radius);
}

/* After */
button{padding:.375rem .75rem;border:1px solid var(--pico-primary-border);border-radius:var(--pico-border-radius)}
```

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

### Telephone Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A telephone input field that triggers a numeric keyboard on mobile devices.

```html
<label>
  Phone
  <input type="tel" name="phone" pattern="[0-9\-\+\s\(\)]+" title="Valid phone number">
</label>
```

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

### Loading State Indicator

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Examples of a loading state indicator using `[aria-busy="true"]`. Pico.css provides a spinner animation overlay, disabled cursor, and opacity adjustment.

```html
<button aria-busy="true" disabled>Loading...</button>

<div aria-busy="true">
  <!-- Content hidden, spinner shown -->
</div>
```

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

### Single Select Dropdown Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A dropdown select element for choosing a single option from a list, with default placeholder text.

```html
<label>
  Country
  <select name="country">
    <option selected>Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
  </select>
</label>
```

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

### Visual Regression Test with Cypress

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Write visual regression tests using Cypress to ensure custom themes render correctly. This example checks if buttons have the expected background color after applying a custom theme.

```javascript
// With Cypress or Playwright
describe('Pico Custom Theme', () => {
  it('renders buttons with custom color', () => {
    cy.get('button').should('have.css', 'background-color', 'rgb(0, 102, 204)');
  });
});
```

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

### Responsive Embedded Media

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Shows examples of responsive images, videos, and iframes. Images scale to 100% width, while videos and canvases maintain aspect ratio.

```html
<img src="image.jpg" alt="Description">
<video controls><source src="video.mp4"></video>
<iframe src="page.html"></iframe>
```

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

### Range Slider Input

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Example of a range slider input with track and thumb styling, color-coded fill, and accessible focus states provided by Pico.css.

```html
<label>
  Volume
  <input type="range" name="volume" min="0" max="100" value="50">
</label>
```

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

### Color Picker Input

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Example of a color picker input with a default value. Pico.css applies custom border and focus styles to the native browser color picker.

```html
<label>
  Pick a color
  <input type="color" value="#0172ad">
</label>
```

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

### Custom Brand Colors with SCSS

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

Customize the primary theme color using SCSS variables or CSS custom properties. This example demonstrates setting a 'pink' theme.

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

// Or at runtime:
:root { --pico-primary: #your-color; }
```

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

### Starter HTML Template with Pico.css

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

A basic HTML template demonstrating the integration 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.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>
```

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

### Starter HTML Template with Pico.css Classless

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

A basic HTML template using the class-less version of Pico.css for pure semantic HTML styling.

```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/@picocss/pico@2/css/pico.classless.min.css"
    >
    <title>Hello, world!</title>
  </head>
  <body>
    <main>
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>
```

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

### Minimal Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Create a minimal Pico.css build by disabling classes, transitions, and specific modules. This is useful for highly customized projects.

```scss
@use "pico" with (
  $enable-classes: false,
  $enable-transitions: false,
  $enable-important: false,
  $modules: (
    "layout/grid": false,
    "components/dropdown": false,
    "components/modal": false,
    "components/tooltip": false
  )
);
```

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

### Run Complete Build Pipeline

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Executes the full build process including linting, SCSS compilation, theme generation, autoprefixing, and minification. Use this for a complete production build.

```bash
npm run build
```

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

### Textarea with Validation Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A textarea with a maximum character limit and an aria-invalid attribute for validation state.

```html
<label>
  Comments (Max 500 characters)
  <textarea 
    name="comments" 
    maxlength="500"
    aria-invalid="false"
  ></textarea>
</label>
```

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

### Traditional Framework Style with Classes

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

Use this approach when you need to apply specific classes for styling. Include `pico.min.css` or use custom SCSS with `$enable-classes: true`.

```html
<main class="container">
  <div class="grid">
    <article>Card 1</article>
    <article>Card 2</article>
  </div>
</main>
```

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

### Hidden Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

A hidden input field used for submitting meta-data that is not visible to the user.

```html
<input type="hidden" name="csrf_token" value="abc123">
```

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

### Build Single Theme with Custom Color and Typography

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Create a custom SCSS file to build Pico.css with a specific theme color and disable responsive typography.

```scss
@use "pico" with (
  $theme-color: "pink",
  $enable-responsive-typography: false
);
```

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

### Enable Dark Mode with System Preference

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Link Pico.min.css to automatically enable dark mode based on the user's system preference (prefers-color-scheme).

```html
<link rel="stylesheet" href="pico.min.css">
<!-- Automatically switches based on prefers-color-scheme -->
```

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

### Import Pico.css in Astro

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Import Pico.css directly within the frontmatter of an Astro component for global styling.

```astro
---
import '@picocss/pico';
---

<html>
  <head>
    <title>My Astro Site</title>
  </head>
  <body>
    <main class="container">
      <h1>Astro + Pico</h1>
    </main>
  </body>
</html>
```

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

### Hidden Label Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

Demonstrates a hidden label associated with an input field, ensuring accessibility for screen readers.

```html
<label for="search">Search</label>
<input id="search" type="search" placeholder="Search..." style="display:none;">
```

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

### Import Pico.css in SCSS

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

Import Pico.css into your SCSS file using the @use directive.

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

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

### Link Pico.css from CDN

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

Use this CDN link to include Pico.css in your project.

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

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

### Run All Linting Tasks

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Executes all defined linting tasks, including formatting with Prettier and sorting CSS properties.

```bash
npm run lint
```

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

### Import Pico.css in Next.js

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Import Pico.css in your Next.js application's `_app.jsx` file for global styling.

```jsx
// pages/_app.jsx
import '@picocss/pico';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

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

### Package.json Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Defines project metadata, entry points, and browser support for the Pico.css npm package.

```json
{
  "name": "@picocss/pico",
  "version": "2.1.1",
  "main": "css/pico.min.css",
  "browserslist": ["defaults"]
}
```

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

### Minimal Markup (Classless)

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

This method uses semantic HTML elements without classes for styling. Use `pico.classless.min.css` or `pico.fluid.classless.min.css`.

```html
<main>
  <article>Card 1</article>
  <article>Card 2</article>
</main>
```

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

### Email Input Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

An email input field with built-in HTML5 validation. Displays an invalid state via [aria-invalid].

```html
<label>
  Email Address
  <input type="email" name="email" required>
</label>
```

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

### Link Pico.css Manually

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

Include this line in the <head> of your HTML to use Pico.css.

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

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

### Classless Version Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Enable the classless version of Pico.css, disabling utility classes. Also enables semantic containers.

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

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

### Custom Form Element Spacing

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

Example of overriding the default vertical and horizontal spacing for form elements using CSS variables.

```css
:root {
  --pico-form-element-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: 0.75rem;
}
```

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

### Multi-Theme Support with Conditional CSS

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Apply different themes (e.g., Azure, Blue) by including specific conditional CSS files and using Pico's theme classes. Custom overrides can be applied via inline styles or separate CSS.

```html
<link rel="stylesheet" href="pico.conditional.azure.min.css">
<link rel="stylesheet" href="custom-overrides.css">

<!-- Azure theme -->
<div class="pico pico-azure">
  <button>Azure button</button>
</div>

<!-- Blue theme (with custom overrides) -->
<div class="pico pico-blue" style="--pico-primary: #1d59d0;">
  <button>Blue button</button>
</div>
```

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

### Configure Browserslist for Wider Support

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Configure browserslist for wider browser support, including older versions and less common browsers. This requires rebuilding with autoprefixer.

```json
{
  "browserslist": ["> 0.5%, last 2 versions, not dead"]
}
```

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

### Minimal Pico.css Build with SCSS Modules

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Reduce the CSS bundle size by selectively enabling only the necessary Pico.css modules in your SCSS configuration.

```scss
@use "pico" with (
  $modules: (
    // Keep only what you need
    "layout/document": true,
    "layout/landmarks": true,
    "layout/container": true,
    "content/typography": true,
    "content/link": true,
    "content/button": true,
    "forms/basics": true,
    
    // Disable everything else
    "layout/grid": false,
    "components/accordion": false,
    "components/dropdown": false,
    "components/modal": false,
    "components/tooltip": false,
    "components/loading": false,
    "components/nav": false,
    "components/progress": false,
    "components/card": false,
    "components/group": false,
    "forms/checkbox-radio-switch": false,
    "forms/input-range": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-search": false,
  )
);
```

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

### CSS Variable Inheritance Example

Source: https://github.com/picocss/pico/blob/main/_autodocs/CSS-Variables-Reference.md

Demonstrates how CSS variables cascade. A global override sets a default, while a specific class can override it for elements within that class.

```css
/* Global override */
:root {
  --pico-primary: blue;
}

/* Section-specific override */
.special-section {
  --pico-primary: red;
}

/* All pico components in .special-section will use red as primary */
```

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

### Pico.css File Organization

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Overview of the Pico.css project directory structure, detailing the location of compiled CSS, source SCSS files, scripts, and configuration.

```text
pico/
├── css/                          # Compiled, ready-to-use CSS
│   ├── pico.min.css             # Default (azure, standard)
│   ├── pico.blue.min.css        # Blue theme, standard
│   ├── pico.classless.min.css   # Default (azure, classless)
│   ├── pico.classless.blue.min.css
│   ├── pico.fluid.classless.*.min.css
│   ├── pico.conditional.*.min.css
│   └── ... (114 total files)
│
├── scss/                         # Source SCSS
│   ├── _index.scss              # Main entry point (forwards all modules)
│   ├── _settings.scss           # Configuration variables
│   ├── pico.scss                # Distribution entry (default)
│   ├── pico.classless.scss      # Classless distribution
│   ├── pico.fluid.classless.scss
│   ├── pico.conditional.scss
│   ├── colors/                  # Color definitions
│   ├── components/              # Component SCSS files
│   ├── content/                 # Content element SCSS
│   ├── forms/                   # Form element SCSS
│   ├── layout/                  # Layout SCSS
│   ├── helpers/                 # Helper functions
│   ├── utilities/               # Utility SCSS
│   └── themes/                  # Theme definitions
│
├── scripts/
│   └── build-themes.js          # Theme generation script
│
├── package.json                 # NPM configuration and scripts
└── .pico/                       # Temporary build artifacts (gitignored)
```

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

### Build Themes Script Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

JavaScript configuration for the `build-themes` script, defining theme colors and stylesheet versions to be generated.

```javascript
const themeColors = [
  "amber", "blue", "cyan", "fuchsia", "green", "grey", 
  "indigo", "jade", "lime", "orange", "pink", "pumpkin", 
  "purple", "red", "sand", "slate", "violet", "yellow", "zinc"
];

const versions = [
  { name: "pico", ... },
  { name: "pico.classless", ... },
  { name: "pico.fluid.classless", ... },
  { name: "pico.conditional", ... },
  { name: "pico.classless.conditional", ... },
  { name: "pico.fluid.classless.conditional", ... }
];
```

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

### Pico.css NPM Scripts

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

This snippet lists the available NPM scripts for building, developing, and maintaining Pico.css. These scripts automate tasks like SCSS compilation, theme generation, and code linting.

```text
npm run build
npm run dev
npm run build:css
npm run build:themes
npm run lint
npm run build:autoprefix
npm run build:minify
```

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

### Migrate from Bootstrap to Pico

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Convert HTML structure and classes from Bootstrap to Pico. Pico often requires fewer or no utility classes for basic elements like buttons and layout containers.

```html
<!-- Before (Bootstrap) -->
<button class="btn btn-primary">Button</button>
<div class="container">
  <div class="row">
    <div class="col-md-6">Column</div>
  </div>
</div>

<!-- After (Pico) -->
<button>Button</button>
<main class="container">
  <div class="grid">
    <article>Column</article>
  </div>
</main>
```

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

### Pico.css File Structure

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

This snippet outlines the directory structure of the Pico.css project, detailing the organization of SCSS source files, compiled CSS, build scripts, and configuration.

```text
pico/
├── scss/                     # SCSS source code
│   ├── _index.scss          # Main entry point
│   ├── _settings.scss       # Configuration variables
│   ├── colors/              # Color definitions (19 families)
│   ├── components/          # Interactive components (9 modules)
│   ├── content/             # Content elements (8 modules)
│   ├── forms/               # Form elements (7 modules)
│   ├── layout/              # Layout components (6 modules)
│   ├── helpers/             # SCSS functions
│   ├── utilities/           # Utility classes (2 modules)
│   └── themes/              # Theme definitions
│
├── css/                      # Compiled CSS (ready to use)
│   ├── pico.min.css         # Default theme
│   ├── pico.blue.min.css    # Blue theme
│   └── ... (114 files total)
│
├── scripts/
│   └── build-themes.js      # Generates CSS for all theme/variant combinations
│
└── package.json             # NPM configuration
```

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

### Generated CSS Variables for Primary Theme Color

Source: https://github.com/picocss/pico/blob/main/_autodocs/Theme-Colors.md

Example of CSS variables generated when the primary theme color is set to 'blue'. These variables control the styling of primary elements.

```css
--pico-primary: #2060df (blue-550)
--pico-primary-background: #e0e1fa (blue-100)
--pico-primary-border: #e0e1fa (blue-100)
--pico-primary-underline: #3c71f7 (blue-500)
--pico-primary-hover: #1d59d0 (blue-600)
--pico-primary-hover-background: #c0d2fa (blue-150)
--pico-primary-hover-border: #c0d2fa (blue-150)
--pico-primary-hover-underline: #1d59d0 (blue-600)
--pico-primary-focus: #748bf8 (blue-400)
--pico-primary-inverse: #fff (white or dark gray in dark mode)
```

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

### Select Pico CSS Theme Color via SCSS

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

Choose from 19 pre-designed color themes by setting the $theme-color variable during Pico CSS SCSS import.

```scss
@use "pico" with (
  $theme-color: "green"  // or: blue, red, pink, etc.
);
```

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

### Set CSS Variable Prefix

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Defines the prefix for all generated CSS custom properties. This ensures Pico CSS can coexist with other CSS frameworks by avoiding naming conflicts. The prefix must start with '--'.

```scss
$css-var-prefix: "--pico-" !default;
```

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

### Including Pico.css Themes via CDN

Source: https://github.com/picocss/pico/blob/main/_autodocs/Theme-Colors.md

Link to different Pico.css theme variations directly from a CDN. Multiple themes like 'blue', 'green', and 'red' are available.

```html
<!-- Default (Azure theme) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

<!-- Blue theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css">

<!-- Green theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.green.min.css">

<!-- All 19 themes are available: pico.red.css, pico.pink.css, pico.cyan.css, etc. -->
```

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

### Standard Pico.css SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

SCSS configuration for the standard Pico.css stylesheet, enabling classes, responsive typography, and a viewport constraint. Use this for traditional class-based layouts.

```scss
@use "../scss" with (
  $theme-color: "azure"
);
```

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

### Integrate Pico with Bootstrap

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Use Pico.css alongside Bootstrap by including both stylesheets and scoping Pico styles within a specific container to prevent conflicts.

```html
<!-- Pico styles wrapped, won't conflict with Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/css/bootstrap.min.css">
<link rel="stylesheet" href="pico.conditional.min.css">

<div class="container">
  <!-- Bootstrap buttons -->
  <button class="btn btn-primary">Bootstrap</button>
</div>

<div class="pico">
  <!-- Pico buttons -->
  <button>Pico</button>
</div>
```

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

### Link Pico.css Fluid Classless Version

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

Use this CDN link for the fluid class-less version of Pico.css, providing fluid containers.

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

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

### HTML for Accessibility Utilities

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

This code demonstrates accessibility utilities, including a 'skip to main content' link that is visible on focus and a button that shows an accessible focus outline.

```html
<!-- Skip to main content link (visible on focus) -->
<a href="#main" class="skip-to-main">Skip to main</a>

<!-- Accessible focus outline -->
<button>Button (focus shows outline)</button>
```

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

### Custom SCSS with Pico in Next.js

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Integrate custom SCSS with Pico.css in Next.js by creating a SCSS file and importing it into `_app.jsx`.

```scss
// styles/pico.scss
@use '@picocss/pico' with (
  $theme-color: 'green'
);

// Import in _app.jsx
import './styles/pico.scss';
```

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

### Link Pico.css Classless Version

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

Use this CDN link for the class-less version of Pico.css, providing centered viewports.

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

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

### Fluid Classless SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Configures Pico.css for fluid, classless layouts with a specific theme and semantic containers enabled. Viewport constraints are disabled for full-width designs.

```scss
@use "../scss" with (
  $theme-color: "azure",
  $enable-semantic-container: true,
  $enable-viewport: false,
  $enable-classes: false
);
```

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

### Classless Pico.css SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

SCSS configuration for the classless variant of Pico.css, disabling explicit classes and enabling semantic containers. Ideal for minimal HTML markup relying on semantic elements.

```scss
@use "../scss" with (
  $theme-color: "azure",
  $enable-semantic-container: true,
  $enable-classes: false
);
```

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

### Format SCSS with Prettier

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Formats the SCSS files according to Prettier's code style rules.

```bash
npm run lint:prettier
```

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

### Date and Time Picker Inputs

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Demonstrates native browser date, time, month, and week picker inputs styled by Pico.css. These inputs utilize custom styling for their respective picker interfaces.

```html
<label>
  Date
  <input type="date" name="date">
</label>

<label>
  Time
  <input type="time" name="time">
</label>

<label>
  Month
  <input type="month" name="month">
</label>
```

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

### Custom Breakpoints Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Define custom breakpoints for responsive design in Pico.css. This allows for fine-grained control over responsive behavior.

```scss
@use "pico" with (
  $breakpoints: (
    sm: (
      breakpoint: 640px,
      viewport: 600px,
      root-font-size: 110%
    ),
    lg: (
      breakpoint: 1200px,
      viewport: 1100px,
      root-font-size: 120%
    )
  )
);
```

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

### Basic Form Structure with Fieldset

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Illustrates a basic form layout using `<fieldset>` and `<legend>`, including text and email input fields with labels. Supports consistent styling, focus states, and validation attributes.

```html
<form>
  <fieldset>
    <legend>Form Section</legend>
    <label>
      Name
      <input type="text" name="name" placeholder="Enter name">
    </label>
    <label for="email">Email</label>
    <input id="email" type="email" name="email">
  </fieldset>
</form>
```

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

### Configure Browserslist for Modern Browsers

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Define modern browser support using a 'defaults' query in browserslist. This configuration targets widely used, up-to-date browsers.

```json
{
  "browserslist": ["defaults"]
}
```

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

### Apply Autoprefixer

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Adds vendor prefixes to CSS rules for cross-browser compatibility, based on the `browserslist` configuration. It targets all non-minified CSS files in the `css/` directory.

```bash
postcss --config css --replace css/*.css !css/*.min.css
```

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

### Button Variants and Link as Button

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Demonstrates different color variants for buttons and how to style an anchor tag to look like a button. Supports disabled states and hover effects.

```html
<button>Primary button</button>
<button class="secondary">Secondary button</button>
<button class="contrast">Contrast button</button>
<input type="submit" value="Submit">
<a href="#" role="button">Link as button</a>
```

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

### Create a Minimal Pico Theme by Disabling Modules

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Reduce the size of the Pico CSS by disabling non-essential modules in the SCSS configuration. This is useful for projects that only need a subset of Pico's features.

```scss
// minimal-theme.scss
@use "pico" with (
  // Disable unnecessary modules
  $modules: (
    // Only keep essentials
    "layout/document": true,
    "layout/landmarks": true,
    "layout/container": true,
    "content/typography": true,
    "content/link": true,
    "content/button": true,
    "forms/basics": true,
    "forms/checkbox-radio-switch": true,
    
    // Disable
    "components/dropdown": false,
    "components/tooltip": false,
    "components/modal": false,
    "forms/input-range": false,
    "forms/input-color": false,
  ),
);
```

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

### Default Module Toggles

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Initializes the $modules variable with all Pico.css modules set to true, enabling all styles by default. This map can be modified to disable specific modules.

```scss
$modules: () !default;
$modules: map.merge(
  (
    "themes/default": true,
    "layout/document": true,
    "layout/landmarks": true,
    "layout/container": true,
    "layout/section": true,
    "layout/grid": true,
    "layout/overflow-auto": true,
    "content/link": true,
    "content/typography": true,
    "content/embedded": true,
    "content/button": true,
    "content/table": true,
    "content/code": true,
    "content/figure": true,
    "content/misc": true,
    "forms/basics": true,
    "forms/checkbox-radio-switch": true,
    "forms/input-color": true,
    "forms/input-date": true,
    "forms/input-file": true,
    "forms/input-range": true,
    "forms/input-search": true,
    "components/accordion": true,
    "components/card": true,
    "components/dropdown": true,
    "components/group": true,
    "components/loading": true,
    "components/modal": true,
    "components/nav": true,
    "components/progress": true,
    "components/tooltip": true,
    "utilities/accessibility": true,
    "utilities/reduce-motion": true
  ),
  $modules
);
```

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

### Default Breakpoints Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Defines the default breakpoints used for responsive design in Pico.css. These can be extended or overridden.

```scss
$breakpoints: () !default;
$breakpoints: map.deep-merge(
  (
    sm: (
      breakpoint: 576px,
      viewport: 510px,
      root-font-size: 106.25%,
    ),
    md: (
      breakpoint: 768px,
      viewport: 700px,
      root-font-size: 112.5%,
    ),
    lg: (
      breakpoint: 1024px,
      viewport: 950px,
      root-font-size: 118.75%,
    ),
    xl: (
      breakpoint: 1280px,
      viewport: 1200px,
      root-font-size: 125%,
    ),
    xxl: (
      breakpoint: 1536px,
      viewport: 1450px,
      root-font-size: 131.25%,
    )
  ),
  $breakpoints
);
```

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

### Compiling Custom SCSS Theme

Source: https://github.com/picocss/pico/blob/main/_autodocs/Theme-Colors.md

Compile a custom SCSS file that overrides Pico.css theme variables into a CSS file using the Sass compiler.

```bash
sass custom-theme.scss custom-theme.css
```

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

### Enable Viewport Constraints

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Controls whether semantic containers have a max-width constraint and are centered. Enabling this (true) applies constraints; disabling it (false) results in a fluid, full-width layout.

```scss
$enable-viewport: true !default;
```

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

### Enable Source Maps for Debugging

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Command to enable source maps during development builds for easier debugging of compiled CSS.

```bash
sass --style expanded scss/:css/ # Adds source maps for debugging
```

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

### Code Block and Inline Code

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Illustrates styling for code blocks using `<pre><code>` and inline code snippets using `<kbd>`. Features a distinctive background and monospace font.

```html
<pre><code>function example() {
  return "code";
}</code></pre>

<p>Use <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy.</p>
```

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

### Import Pico.css in Svelte

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Import Pico.css globally within a Svelte component's script tag or in a global style block.

```svelte
<script>
  import '@picocss/pico';
</script>

<main class="container">
  <h1>Svelte + Pico</h1>
</main>

<style global>
  @import '@picocss/pico';
</style>
```

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

### Grid Component

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Implement a CSS Grid-based layout system using the .grid class. Child elements like <article> will automatically arrange into columns.

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

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

### Spacing and Sizing Variables

Source: https://github.com/picocss/pico/blob/main/_autodocs/CSS-Variables-Reference.md

Defines core spacing and sizing variables for Pico CSS, including base spacing, line height, border radius, border width, and outline width.

```css
--pico-spacing: /* 1rem (16px) default, scales at breakpoints if responsive-spacings enabled */
--pico-line-height: /* 1.5 */
--pico-border-radius: /* 0.25rem (4px) */
--pico-border-width: /* 1px */
--pico-outline-width: /* 3px */
```

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

### Build with Disabled Modules

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Customize the build by disabling specific modules like tooltips, dropdowns, and input ranges.

```scss
@use "pico" with (
  $theme-color: "blue",
  $modules: (
    "components/tooltip": false,
    "components/dropdown": false,
    "forms/input-range": false,
  )
);
```

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

### HTML for Progress Bar

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

This snippet illustrates a progress bar component using the native `<progress>` element. It includes an associated `<label>` and `<output>` for accessibility and displaying the percentage.

```html
<progress id="download" value="25" max="100"></progress>

<label for="download">Downloading: <output>25</output>%</label>
```

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

### Dropdown Menu Component

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Shows a dropdown menu component implemented with `<details class="dropdown">`. It supports keyboard navigation, focus management, and backdrop closing.

```html
<details class="dropdown">
  <summary>Menu</summary>
  <ul>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
  </ul>
</details>
```

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

### Enable Utility Classes

Source: https://github.com/picocss/pico/blob/main/_autodocs/SCSS-Configuration.md

Controls the generation of utility and component classes. Enabling this (true) provides classes like .container and .secondary. Disabling it (false) produces a classless version, reducing CSS output.

```scss
$enable-classes: true !default;
```

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

### Runtime Theme Switching with CSS Variables

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Switch between light and dark themes, and customize primary colors using CSS variables directly in HTML. This avoids recompilation.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="pico.min.css">
  <style>
    :root {
      color-scheme: light;
      --pico-primary: #0066cc;
      --pico-primary-background: #e6f2ff;
      --pico-primary-hover: #0052a3;
    }
    
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;
        --pico-primary: #66b3ff;
        --pico-primary-background: #1a3d66;
        --pico-primary-hover: #99ccff;
      }
    }
  </style>
</head>
<body>
  <button>Button with custom primary color</button>
</body>
</html>
```

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

### Development Watch Mode

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Monitors the SCSS directory for changes and automatically rebuilds the project. Ideal for active development to see changes instantly.

```bash
npm run dev
```

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

### Use SCSS with Pico in React

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Customize Pico.css using SCSS variables when importing it in a React application. This allows for theming.

```jsx
// In your main SCSS
@use '@picocss/pico' with (
  $theme-color: 'blue'
);
```

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

### Import Pico.css in React

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Import the Pico.css stylesheet directly into your React application's main entry point or App component.

```jsx
import '@picocss/pico';

function App() {
  return (
    <main className="container">
      <h1>Hello from Pico</h1>
    </main>
  );
}
```

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

### Pico CSS Custom Properties Configuration

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

Configure Pico CSS styling at runtime by defining CSS custom properties in the :root scope for primary color, spacing, and border radius.

```css
:root {
  --pico-primary: #0172ad;
  --pico-spacing: 1rem;
  --pico-border-radius: 0.25rem;
}
```

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

### Compile SCSS to Minified CSS

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Use the SASS compiler to create a compressed CSS file from your custom SCSS.

```bash
sass custom.scss custom.min.css --style compressed
```

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

### Fluid Classless Conditional SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Configures Pico.css for scoped, fluid, and classless layouts. Styles are applied semantically within the specified parent container, with classes and viewport constraints disabled.

```scss
@use "../scss" with (
  $theme-color: "azure",
  $enable-semantic-container: true,
  $enable-viewport: false,
  $enable-classes: false,
  $parent-selector: ".pico"
);
```

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

### Conditional SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Configures Pico.css for scoped integration using a parent selector. Styles will only apply within the specified parent container.

```scss
@use "../scss" with (
  $theme-color: "azure",
  $parent-selector: ".pico"
);
```

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

### HTML for Navigation Bar

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

This HTML demonstrates a basic navigation bar structure using nested unordered lists. It supports a logo on the left and navigation items on the right, with features for responsiveness and active link highlighting.

```html
<nav>
  <ul>
    <li><a href="/">Logo</a></li>
  </ul>
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

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

### File Upload Input

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Shows a file upload input styled by Pico.css, featuring custom button styling for the file selector and display of the selected file name.

```html
<label>
  Upload file
  <input type="file" name="file">
</label>
```

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

### Input with Prefix and Suffix

Source: https://github.com/picocss/pico/blob/main/_autodocs/Form-Elements.md

Combines a currency symbol or unit with an input field using flex layout for visual grouping.

```html
<div role="group">
  <span>$</span>
  <input type="number" placeholder="0.00">
  <span>.00</span>
</div>
```

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

### Container Component

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Use the .container class for a centered, max-width constrained viewport or .container-fluid for full width with padding. Applied to main content areas.

```html
<main class="container">
  <h1>Centered content</h1>
</main>
```

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

### Migrate from Tailwind CSS to Pico

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Transition from Tailwind CSS to Pico by removing utility classes. Pico applies styles directly to elements, often negating the need for classes like `px-4`, `bg-blue-500`, etc.

```html
<!-- Before (Tailwind) -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Button
</button>

<!-- After (Pico) -->
<!-- No classes needed! -->
<button>Button</button>
```

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

### Custom SCSS Configuration for Pico

Source: https://github.com/picocss/pico/blob/main/_autodocs/Customization-Guide.md

Define custom SCSS variables to configure Pico's theming, layout, features, and disable specific modules. Compile using Sass.

```scss
@use "@picocss/pico" with (
  // Theming
  $theme-color: "blue",
  
  // Layout
  $enable-semantic-container: true,
  $enable-viewport: true,
  $enable-responsive-typography: true,
  $enable-responsive-spacings: false,
  
  // Features
  $enable-classes: true,
  $enable-transitions: true,
  $enable-important: true,
  
  // Customization
  $css-var-prefix: "--my-app-",
  $semantic-root-element: "body",
  
  // Disabling modules
  $modules: (
    "components/tooltip": false,
    "components/modal": false,
  ),
);
```

```bash
sass pico-custom.scss custom.css
```

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

### Basic Table Structure

Source: https://github.com/picocss/pico/blob/main/_autodocs/Components.md

Provides a standard HTML table structure with a header and body. Supports optional row striping and responsive overflow handling.

```html
<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </tbody>
</table>
```

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

### Classless Conditional SCSS Configuration

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Configures Pico.css for scoped, classless layouts. Styles are applied semantically only within the specified parent container, with classes disabled.

```scss
@use "../scss" with (
  $theme-color: "azure",
  $enable-semantic-container: true,
  $enable-classes: false,
  $parent-selector: ".pico"
);
```

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

### Basic Pico CSS HTML Structure

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

Include Pico CSS using a CDN link in the head of your HTML document. This provides basic styling for semantic HTML elements.

```html
<!DOCTYPE html>
<html>
<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/@picocss/pico@2/css/pico.min.css">
  <title>Hello Pico</title>
</head>
<body>
  <main class="container">
    <h1>Hello, world!</h1>
    <button>Click me</button>
  </main>
</body>
</html>
```

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

### Generate Theme Variants

Source: https://github.com/picocss/pico/blob/main/_autodocs/Build-System.md

Executes a Node.js script to generate all 114 CSS theme variants based on predefined color themes and stylesheet configurations.

```bash
node scripts/build-themes
```