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

Class-less
Just a pure semantic HTML markup, without .classes
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
Form elements
Semantic HTML form markup, without any .classes or JavaScript
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

Copyright and license

Licensed under the MIT License
Library icons by Feather (MIT)
Website icons by Font Awesome (CC BY 4.0)

Openly inspired by: