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.
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 | Minified CSS | 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.