Graceful & Minimal CSS design system in pure semantic HTML.
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Examples · Documentation

Pico.css

Class-light and semantic: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
Great styles with just one CSS file: No dependencies, package manager, external files or JavaScript.
Responsive everything: Elegant and consistent adaptatives spacings and typography on all devices.
Light or Dark mode: Shipped with two beautiful color themes, automatically enabled according to the user preference.

Usage

There are 3 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

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

Install from CDN

Alternatively, you can use the unpkg CDN to link pico.css.

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

Install with NPM

npm install @picocss/pico

Examples

Minimalist templates to discover Pico in action:

Preview
A starter example with all elements and components used in Pico
Class-less
Just 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
Bootstrap grid system
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico

All examples are open-sourced in picocss/examples.

Documentation

Getting started

Layout

Elements

Components

Variations

Variation	Source	Example
Default	pico.scss	Preview
Classless (Centered viewports)	pico.classless.scss	Classless
Classless (Fluid container)	pico.fluid.classless.scss	-
Slim	pico.slim.scss	-
Google Amp	pico.google-amp.scss	Google Amp
Pico + Bootstrap grid system	pico-bootstrap-grid.scss	Bootstrap grid system

Contributing

dev/ branch is open to pull requests.
Do not edit /css files directly. Those files are automatically generated. You should edit the source files in scss/.

Copyright and license

Licensed under the MIT License.

Openly inspired by: Bootstrap, CSS Bed, Normalize, Sanitize, Spectre, Wing.