<p>
  <a href="https://picocss.com" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
    </picture>
  </a>
</p>

# Pico.css examples

Minimalist templates to discover Pico in action:

<details open>
  <summary><strong>Pico v2 examples</strong></summary>

- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html)**  
A pure HTML example, without dependencies.

- **[Class-less preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html-classless)**  
A class-less example, without dependencies.

- **[Customized design system](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-sass-customized-design-system)**  
An example to customize Pico CSS with SASS.

- **[React class-less login](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-classless-login)**  
A minimal, class-less login page in React, with a custom primary color.

- **[React color schemes and modal](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react-color-schemes-and-modal)**  
Switch color schemes and open modals with React.

- **[Conditional Styling](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-conditional-styling)**  
A minimal example with the conditional version.
</details>

---

<details>
  <summary><strong>Pico v1 examples</strong></summary>

- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**  
  A starter example with most of the Pico components and styles.

- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**  
  A starter example in Arabic with most of the Pico components and styles.

- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**  
  A pure semantic HTML markup, without `.classes`.

- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**  
  A basic custom template for Pico using only CSS custom properties (variables).

- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**  
  A classic company or blog layout with a sidebar.

- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**  
  A simple layout for Google Amp, with inlined CSS.

- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**  
  A minimalist layout for Login pages.

- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**  
  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.

</details>
