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>Minimal CSS Framework for semantic HTML</strong><br>
|
11 | Elegant styles for all native 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 | [![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
|
18 | [![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css)
|
19 | [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
|
20 | [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
|
21 | [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
22 | [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
|
23 |
|
24 | https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
|
25 |
|
26 | **Class-light and semantic**
|
27 | Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
|
28 |
|
29 | **Great styles with just one CSS file**
|
30 | No dependencies, package manager, external files, or JavaScript.
|
31 |
|
32 | **Responsive everything**
|
33 | Elegant and consistent adaptive spacings and typography on all devices.
|
34 |
|
35 | **Light or Dark mode**
|
36 | Shipped with two beautiful color themes, automatically enabled according to the user preference.
|
37 |
|
38 | ## Table of contents
|
39 |
|
40 | - [Usage](#usage)
|
41 | - [Class-less version](#class-less-version)
|
42 | - [Examples](#examples)
|
43 | - [Limitations](#limitations)
|
44 | - [Documentation](#documentation)
|
45 | - [Browser Support](#browser-support)
|
46 | - [Contributing](#contributing)
|
47 | - [Copyright and license](#copyright-and-license)
|
48 |
|
49 | ## Usage
|
50 |
|
51 | There are 4 ways to get started with pico.css:
|
52 |
|
53 | **Install manually**
|
54 |
|
55 | [Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
56 |
|
57 | ```html
|
58 | <link rel="stylesheet" href="css/pico.min.css">
|
59 | ```
|
60 |
|
61 | **Install from CDN**
|
62 |
|
63 | Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@1.*/) to link pico.css.
|
64 |
|
65 | ```html
|
66 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
|
67 | ```
|
68 |
|
69 | **Install with NPM**
|
70 |
|
71 | ```shell
|
72 | npm install @picocss/pico
|
73 | ```
|
74 |
|
75 | **Install with Composer**
|
76 |
|
77 | ```shell
|
78 | composer require picocss/pico
|
79 | ```
|
80 |
|
81 | ## Class-less version
|
82 |
|
83 | Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
|
84 |
|
85 | In this version, `header`, `main` and `footer` act as containers.
|
86 |
|
87 | Use the default `.classless` version if you need centered viewports:
|
88 |
|
89 | ```html
|
90 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css">
|
91 | ```
|
92 |
|
93 | Or use the `.fluid.classless` version if you need a fluid container:
|
94 |
|
95 | ```html
|
96 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.fluid.classless.min.css">
|
97 | ```
|
98 |
|
99 | Then just write pure HTML, and it should look great:
|
100 |
|
101 | ```html
|
102 | <!doctype html>
|
103 | <html lang="en">
|
104 | <head>
|
105 | <meta charset="utf-8">
|
106 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
107 | <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css">
|
108 | <title>Hello, world!</title>
|
109 | </head>
|
110 | <body>
|
111 | <main>
|
112 | <h1>Hello, world!</h1>
|
113 | </main>
|
114 | </body>
|
115 | </html>
|
116 | ```
|
117 |
|
118 | ## Examples
|
119 |
|
120 | Minimalist templates to discover Pico in action:
|
121 |
|
122 | [![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples)
|
123 |
|
124 | - **[Preview](https://picocss.com/examples/preview/)**
|
125 | A starter example with all elements and components used in Pico
|
126 |
|
127 | - **[Right-to-left (RTL) preview](https://picocss.com/examples/preview-rtl/)**
|
128 | A starter example in Arabic with all the elements and components used in Pico
|
129 |
|
130 | - **[Class-less](https://picocss.com/examples/classless/)**
|
131 | Just a pure semantic HTML markup, without `.classes`
|
132 |
|
133 | - **[Basic template](https://picocss.com/examples/basic-template/)**
|
134 | A basic custom template for Pico using only CSS custom properties (variables)
|
135 |
|
136 | - **[Company](https://picocss.com/examples/company/)**
|
137 | A classic company or blog layout with a sidebar
|
138 |
|
139 | - **[Google Amp](https://picocss.com/examples/google-amp/)**
|
140 | A simple layout for Google Amp, with inlined CSS
|
141 |
|
142 | - **[Sign in](https://picocss.com/examples/sign-in/)**
|
143 | A minimalist layout for Login pages
|
144 |
|
145 | - **[Pico + Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
|
146 | Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
|
147 |
|
148 | All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
|
149 |
|
150 | ## Limitations
|
151 |
|
152 | Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
|
153 |
|
154 | ## Documentation
|
155 |
|
156 | **Getting started**
|
157 |
|
158 | - [Usage](https://picocss.com/docs/)
|
159 | - [Themes](https://picocss.com/docs/themes.html)
|
160 | - [Customization](https://picocss.com/docs/customization.html)
|
161 | - [Class-less version](https://picocss.com/docs/classless.html)
|
162 | - [RTL](https://picocss.com/docs/rtl.html)
|
163 |
|
164 | **Layout**
|
165 |
|
166 | - [Containers](https://picocss.com/docs/containers.html)
|
167 | - [Grids](https://picocss.com/docs/grid.html)
|
168 | - [Horizontal scroller](https://picocss.com/docs/scroller.html)
|
169 |
|
170 | **Elements**
|
171 |
|
172 | - [Typography](https://picocss.com/docs/typography.html)
|
173 | - [Buttons](https://picocss.com/docs/buttons.html)
|
174 | - [Forms](https://picocss.com/docs/forms.html)
|
175 | - [Tables](https://picocss.com/docs/tables.html)
|
176 |
|
177 | **Components**
|
178 |
|
179 | - [Accordions](https://picocss.com/docs/accordions.html)
|
180 | - [Cards](https://picocss.com/docs/cards.html)
|
181 | - [Dropdowns](https://picocss.com/docs/dropdowns.html)
|
182 | - [Modal](https://picocss.com/docs/modal.html)
|
183 | - [Navs](https://picocss.com/docs/navs.html)
|
184 | - [Progress](https://picocss.com/docs/progress.html)
|
185 |
|
186 | **Utilities**
|
187 |
|
188 | - [Loading](https://picocss.com/docs/loading.html)
|
189 | - [Tooltips](https://picocss.com/docs/tooltips.html)
|
190 |
|
191 | ## Browser support
|
192 |
|
193 | Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
|
194 |
|
195 | ## Contributing
|
196 |
|
197 | If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
|
198 |
|
199 | ## Copyright and license
|
200 |
|
201 | Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
202 |
|
203 | **Relevant third-party tools and resources we depend on:**
|
204 |
|
205 | Website and docs:
|
206 | - [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
207 | - [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
|
208 |
|
209 | Pico Library:
|
210 | - [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
211 | - [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
212 | - [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
|