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 [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest) [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico) [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md) - **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](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `` of your website. ```html ``` ### Install from CDN Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. ```html ``` ### Install with NPM ```shell npm install @picocss/pico ``` ## Examples

- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes` - [**Company**](https://picocss.com/examples/company/): A classic company or blog layout with a sidebar. - [**Google Amp**](https://picocss.com/examples/google-amp/): A simple layout for Google Amp, with inlined CSS. - [**Sign in**](https://picocss.com/examples/sign-in/): A minimalist layout for Login pages. ## Documentation **Getting started** - [Usage](https://picocss.com/docs/#start) - [Themes](https://picocss.com/docs/#themes) - [Customization](https://picocss.com/docs/#customization) - [Class-less version](https://picocss.com/docs/#classless) **Layout** - [Containers](https://picocss.com/docs/#containers) - [Grids](https://picocss.com/docs/#grids) - [Horizontal scroller](https://picocss.com/docs/#scroller) **Elements** - [Typography](https://picocss.com/docs/#typography) - [Buttons](https://picocss.com/docs/#buttons) - [Forms](https://picocss.com/docs/#forms) **Components** - [Accordions](https://picocss.com/docs/#accordions) - [Cards](https://picocss.com/docs/#cards) - [Navs](https://picocss.com/docs/#navs) - [Tooltips](https://picocss.com/docs/#tooltips) ## Copyright and license - Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md) - Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) - Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free)) Openly inspired by: - [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)) - [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)) - [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)) - [CSS Bed](https://github.com/ubershmekel/cssbed) - [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) - [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))