| 1 | <p align="center">
|
| 2 | <a href="https://picocss.com/">
|
| 3 | <img src="https://picocss.com/img/logo.svg" width="64" height="64">
|
| 4 | </a>
|
| 5 | </p>
|
| 6 |
|
| 7 | <h3 align="center">Pico.css</h3>
|
| 8 |
|
| 9 | <p align="center">
|
| 10 | <strong>Graceful & Minimal CSS design system in pure semantic HTML.</strong><br>
|
| 11 | Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
| 12 | <a href="https://picocss.com/#examples">Examples</a> ·
|
| 13 | <a href="https://picocss.com/docs/">Documentation</a>
|
| 14 | </p>
|
| 15 |
|
| 16 | # Pico.css
|
| 17 |
|
| 18 | `5.6 KB` minified and gzipped
|
| 19 |
|
| 20 | - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
| 21 | - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
|
| 22 | - **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
|
| 23 | - **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
|
| 24 |
|
| 25 | ## Usage
|
| 26 |
|
| 27 | There are 3 ways to get started with pico.css:
|
| 28 |
|
| 29 | ### Install manually
|
| 30 | [Download Pico](https://github.com/picocss/pico/archive/v1.0.5.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
| 31 |
|
| 32 | ```html
|
| 33 | <link rel="stylesheet" href="css/pico.min.css">
|
| 34 | ```
|
| 35 |
|
| 36 | ### Install from CDN
|
| 37 | Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
|
| 38 |
|
| 39 | ```html
|
| 40 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
| 41 | ```
|
| 42 |
|
| 43 | ### Install with NPM
|
| 44 | ```shell
|
| 45 | npm install @picocss/pico
|
| 46 | ```
|
| 47 |
|
| 48 | ## Examples
|
| 49 |
|
| 50 | <a href="https://picocss.com/#examples">
|
| 51 | <img src="https://picocss.com/img/examples.jpg">
|
| 52 | </a>
|
| 53 |
|
| 54 | - [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes`
|
| 55 | - [**Company**](https://picocss.com/examples/company/): A classic company or blog layout with a sidebar.
|
| 56 | - [**Google Amp**](https://picocss.com/examples/google-amp/): A simple layout for Google Amp, with inlined CSS.
|
| 57 | - [**Sign in**](https://picocss.com/examples/sign-in/): A minimalist layout for Login pages.
|
| 58 |
|
| 59 | ## Documentation
|
| 60 |
|
| 61 | **Getting started**
|
| 62 | - [Usage](https://picocss.com/docs/#start)
|
| 63 | - [Themes](https://picocss.com/docs/#themes)
|
| 64 | - [Customization](https://picocss.com/docs/#customization)
|
| 65 | - [Class-less version](https://picocss.com/docs/#classless)
|
| 66 |
|
| 67 | **Layout**
|
| 68 | - [Containers](https://picocss.com/docs/#containers)
|
| 69 | - [Grids](https://picocss.com/docs/#grids)
|
| 70 | - [Horizontal scroller](https://picocss.com/docs/#scroller)
|
| 71 |
|
| 72 | **Elements**
|
| 73 | - [Typography](https://picocss.com/docs/#typography)
|
| 74 | - [Buttons](https://picocss.com/docs/#buttons)
|
| 75 | - [Forms](https://picocss.com/docs/#forms)
|
| 76 |
|
| 77 | **Components**
|
| 78 | - [Accordions](https://picocss.com/docs/#accordions)
|
| 79 | - [Cards](https://picocss.com/docs/#cards)
|
| 80 | - [Navs](https://picocss.com/docs/#navs)
|
| 81 | - [Tooltips](https://picocss.com/docs/#tooltips)
|
| 82 |
|
| 83 | ## Copyright and license
|
| 84 |
|
| 85 | - Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
| 86 | - 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))
|
| 87 | - Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
| 88 | - Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))
|