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 | [![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)
|
18 | [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
|
19 | [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
|
20 | [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
21 |
|
22 |
|
23 | - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
24 |
|
25 | - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
|
26 |
|
27 | - **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
|
28 |
|
29 | - **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
|
30 |
|
31 | ## Usage
|
32 |
|
33 | There are 3 ways to get started with pico.css:
|
34 |
|
35 | ### Install manually
|
36 | [Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.
|
37 |
|
38 | ```html
|
39 | <link rel="stylesheet" href="css/pico.min.css">
|
40 | ```
|
41 |
|
42 | ### Install from CDN
|
43 | Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
|
44 |
|
45 | ```html
|
46 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
47 | ```
|
48 |
|
49 | ### Install with NPM
|
50 | ```shell
|
51 | npm install @picocss/pico
|
52 | ```
|
53 |
|
54 | ## Examples
|
55 |
|
56 | Minimalist templates to discover Pico in action:
|
57 |
|
58 | [![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
|
59 |
|
60 | - **[Preview](https://picocss.com/examples/preview/)**
|
61 | A starter example with all elements and components used in Pico
|
62 |
|
63 | - **[Class-less](https://picocss.com/examples/classless/)**
|
64 | Just a pure semantic HTML markup, without `.classes`
|
65 |
|
66 | - **[Basic template](https://picocss.com/examples/basic-template/)**
|
67 | A basic custom template for Pico using only CSS custom properties (variables)
|
68 |
|
69 | - **[Company](https://picocss.com/examples/company/)**
|
70 | A classic company or blog layout with a sidebar
|
71 |
|
72 | - **[Google Amp](https://picocss.com/examples/google-amp/)**
|
73 | A simple layout for Google Amp, with inlined CSS
|
74 |
|
75 | - **[Sign in](https://picocss.com/examples/sign-in/)**
|
76 | A minimalist layout for Login pages
|
77 |
|
78 | - **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
|
79 | Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
|
80 |
|
81 | All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
|
82 |
|
83 | ## Documentation
|
84 |
|
85 | **Getting started**
|
86 | - [Usage](https://picocss.com/docs/#start)
|
87 | - [Themes](https://picocss.com/docs/#themes)
|
88 | - [Customization](https://picocss.com/docs/#customization)
|
89 | - [Class-less version](https://picocss.com/docs/#classless)
|
90 |
|
91 | **Layout**
|
92 | - [Containers](https://picocss.com/docs/#containers)
|
93 | - [Grids](https://picocss.com/docs/#grids)
|
94 | - [Horizontal scroller](https://picocss.com/docs/#scroller)
|
95 |
|
96 | **Elements**
|
97 | - [Typography](https://picocss.com/docs/#typography)
|
98 | - [Buttons](https://picocss.com/docs/#buttons)
|
99 | - [Forms](https://picocss.com/docs/#forms)
|
100 |
|
101 | **Components**
|
102 | - [Accordions](https://picocss.com/docs/#accordions)
|
103 | - [Cards](https://picocss.com/docs/#cards)
|
104 | - [Navs](https://picocss.com/docs/#navs)
|
105 | - [Tooltips](https://picocss.com/docs/#tooltips)
|
106 |
|
107 | ## Variations
|
108 |
|
109 | | Variation | Minified CSS | Source | Example |
|
110 | |:-----|:-----|:-----|:-----|
|
111 | | Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
|
112 | | Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss) | [Classless](https://picocss.com/examples/classless/) |
|
113 | | Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
|
114 | | Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
|
115 | | Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
|
116 | | Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
|
117 |
|
118 | ## Contributing
|
119 |
|
120 | - [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
121 | - Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
|
122 |
|
123 | ## Copyright and license
|
124 |
|
125 | Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
126 |
|
127 | Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/).
|