picocss/examples

Minimalist templates to discover Pico in action

Pico.css examples

Minimalist templates to discover Pico in action:

Pico v2 examples

• Preview
  A pure HTML example, without dependencies.

• Class-less preview
  A class-less example, without dependencies.

• Customized design system
  An example to customize Pico CSS with SASS.

• React class-less login
  A minimal, class-less login page in React, with a custom primary color.

• React color schemes and modal
  Switch color schemes and open modals with React.

• Conditional Styling
  A minimal example with the conditional version.

---

Pico v1 examples

• Preview
  A starter example with most of the Pico components and styles.

• Right-to-left (RTL) preview
  A starter example in Arabic with most of the Pico components and styles.

• Classless
  A pure semantic HTML markup, without .classes.

• Basic template
  A basic custom template for Pico using only CSS custom properties (variables).

• Company
  A classic company or blog layout with a sidebar.

• Google Amp
  A simple layout for Google Amp, with inlined CSS.

• Sign in
  A minimalist layout for Login pages.

• Pico + Bootstrap grid system
  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.