Skip to content
Graceful & Minimal CSS design system in pure semantic HTML
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
docs
scss
.gitignore
LICENSE.md
README.md
package.json

README.md

Pico.css

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

5.6 KB minified and gzipped

  • 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.

Documentation

Getting started

Layout

Elements

Components

Copyright and license

You can’t perform that action at this time.