Usage

Work without package manager or dependencies 🙂!

1. Download Pico:

Download pico.css

2. Link the CSS (~5KB minified and gzipped):

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

Starter template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
    <link rel="stylesheet" href="css/pico.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>

Themes

Pico is shipped with 2 consistents themes: Light & Dark.

The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme: dark.

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">.

Light theme

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

Dark theme

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

Customization

You can customize themes with Sass or you can simply edit the CSS variables.

Pick a color!

Custom theme

Sass:

// Custom colors
$primary-500: ...;
$primary-600: ...;
$primary-700: ...;

// Pico library
@import "path/pico";

CSS:

/* Light theme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary:            ...;
  --primary-hover:      ...;
  --primary-focus:      ...;
  --primary-inverse:    ...;
}


/* Dark theme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:          ...;
    --primary-hover:    ...;
    --primary-focus:    ...;
    --primary-inverse:  ...;
}


/* Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary:            ...;
  --primary-hover:      ...;
  --primary-focus:      ...;
  --primary-inverse:    ...;
}

Colors can be modified in scss/themes/.

Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in scss/_variables.scss.

Class-less version

For wild HTML purists! 😈

Pico provide a .classless version (Example).

Obviously this version do not include .container, .container-fluid, .grid, .secondary and .outline.

In this version, <header>, <main> and <footer> act as containers to define a centered or a fluid viewport.

Usage:

Use the default .classless version if you need centered viewports:

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

Or use the .fluid.classless version if you need a fluid container:

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

Containers

.container enable a centered viewport.

.container-fluid enable a 100% layout.

<body>
  <main class="container"></main>
</body>

Pico use the same breakpoints and viewports sizes as Bootstrap.

Device Extra small Small Medium Large Extra large
Breakpoint <576px ≥576px ≥768px ≥992px ≥1200px
Viewport None (auto) 540px 720px 960px 1140px

<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding.

<section> as direct child of <main> provide a responsive margin-bottom to separate your sections.

Grids

.grid enable a minimal grid system with auto-layout columns.

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

Columns intentionally collapses below large devices (992px).

Horizontal scroller

<figure> act as a container to make any content scrollable horizontally.

Useful to have responsives <table>.

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell 
<figure>
  <table>
    ...
  </table>
</figure>

Typography

All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.

Device Extra small Small Medium Large Extra large
Base size 16px 17px 18px 19px 20px

Headings:

Heading 1

32px on extra small devices, 40px on extra large devices

Heading 2

28px on extra small devices, 35px on extra large devices

Heading 3

24px on extra small devices, 30px on extra large devices

Heading 4

20px on extra small devices, 25px on extra large devices

Heading 5

18px on extra small devices, 22.5px on extra large devices

Heading 6

16px on extra small devices, 20px on extra large devices

Paragraph

16px on extra small devices, 20px on extra large devices

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>

Inside a <header> all headings are 50% bigger.

Inside a <hgroup> all margin-bottom are collapsed.

Heading 2

Subtitle for heading 2

<hgroup>
  <h2>Heading 2</h2>
  <p>Subtitle for heading 2</p>
<hgroup>

Inline text elements:

Abbr. abbr

Bold strong b

Italic i em cite

Deleted del

Inserted ins

Ctrl + S kbd

Highlighted mark

Strikethrough s

Small small

Text Sub sub

Text Sup sup

Underline u

Buttons

The essential button in pure HTML, without .classes for the default style.

<button>Button</button>
<input type="submit">

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

Link Link 
<a href="#" role="button">Link</a>
<a href="#" role="button">Link</a>

Buttons come with a .secondary neutral style.

Link 
<a href="#" role="button" class="secondary">Link</a>
<button>Button</button class="secondary">
<input type="submit" class="secondary">
<input type="reset">

Also includes the classic .outline style.

Link Link 
<a href="#" role="button" class="outline">Link</a>
<a href="#" role="button" class="outline secondary">Link</a>
<button class="outline">Button</button>
<button class="outline secondary">Button</button>

Forms

All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.

Input are width: 100%; by default. You can use .grid inside a form.

All natives form elements are fully customized and themables with CSS variables.

We'll never share your email with anyone else. 

<form>

  <!-- Grid -->
  <section class="grid">

    <div>
      <!-- Markup example 1: input is inside label -->
      <label for="firstname">
        First name
        <input type="text" id="firstname" name="firstname" placeholder="First name" required>
      </label>
    </div>

    <div>
      <label for="lastname">
        Last name
        <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
      </label>
    </div>

  </section>

  <!-- Markup example 2: input is after label -->
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="Email address" required>
  <small>We'll never share your email with anyone else.</small>

  <!-- Button -->
  <button type="submit">Submit</button>

</form>

Disabled and validation states:

<input type="text" placeholder="Valid" valid>
<input type="text" placeholder="Invalid" invalid>
<input type="text" placeholder="Disabled" disabled>
<input type="text" value="Readonly" readonly>

<fieldset> are unstyled and act as a container for radios and checkboxes providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Gender 
<!-- Select -->
<label for="country">Country</label>
<select id="country">
  <option selected>Choose...</option>
  <option>...</option>
</select>

<!-- Radios -->
<fieldset>
  <legend>Gender</legend>
  <label for="male">
    <input type="radio" id="male" name="gender" value="male" checked>
    Male
  </label>
  <label for="female">
    <input type="radio" id="female" name="gender" value="female">
    Female
  </label>
  <label for="other">
    <input type="radio" id="other" name="gender" value="other">
    Other
  </label>
</fieldset>

<!-- Checkbox -->
<fieldset>
  <label for="terms">
    <input type="checkbox" id="terms" name="terms">
    I agree to the Terms and Conditions
  </label>
</fieldset>

<!-- Switch -->
<fieldset>
  <label for="switch">
    <input type="checkbox" id="switch" name="switch" role="switch">
    Publish on my profile
  </label>
</fieldset>

Accordions

Toggle sections of content in pure HTML, without JavaScript.

Collapsible elements 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Collapsible elements 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
<details>
  <summary>Collapsible elements 1</summary>
  <p>...</p>
</details>

<details>
  <summary>Collapsible elements 2</summary>
  <ul>
    <li>...</li>
  </ul>
</details>

Cards

A flexible container with graceful spacings across devices and viewport sizes.

I'm a card! 
<article>
  I'm a card!
</article>

Tooltips

Enable tooltips everywhere in pure HTML, without JavaScript.

Tooltip on a link

Tooltip on inline element

<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>

We .classes

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes.

But off course, .classes are not a bad practice at all.

Feel free to use modifiers.

<button class="warning">Action</button>

Just try to keep your HTML clean and semantic to keep the Pico spirit.

<button class="button-red margin-large padding-medium">Action</button>