UNPKG

7.8 kBMarkdownView Raw
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
24https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
25
26**Class-light and semantic**
27Pico 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**
30No dependencies, package manager, external files, or JavaScript.
31
32**Responsive everything**
33Elegant and consistent adaptive spacings and typography on all devices.
34
35**Light or Dark mode**
36Shipped 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
51There 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
63Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
64
65```html
66<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
67```
68
69**Install with NPM**
70
71```shell
72npm install @picocss/pico
73```
74
75**Install with Composer**
76
77```shell
78composer require picocss/pico
79```
80
81## Class-less version
82
83Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
84
85In this version, `header`, `main` and `footer` act as containers.
86
87Use the default `.classless` version if you need centered viewports:
88
89```html
90<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
91```
92
93Or use the `.fluid.classless` version if you need a fluid container:
94
95```html
96<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
97```
98
99Then 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@latest/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
120Minimalist 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- **[Class-less](https://picocss.com/examples/classless/)**
128 Just a pure semantic HTML markup, without `.classes`
129
130- **[Basic template](https://picocss.com/examples/basic-template/)**
131 A basic custom template for Pico using only CSS custom properties (variables)
132
133- **[Company](https://picocss.com/examples/company/)**
134 A classic company or blog layout with a sidebar
135
136- **[Google Amp](https://picocss.com/examples/google-amp/)**
137 A simple layout for Google Amp, with inlined CSS
138
139- **[Sign in](https://picocss.com/examples/sign-in/)**
140 A minimalist layout for Login pages
141
142- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
143 Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
144
145All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
146
147## Limitations
148
149Pico 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.
150
151## Documentation
152
153**Getting started**
154- [Usage](https://picocss.com/docs/)
155- [Themes](https://picocss.com/docs/themes.html)
156- [Customization](https://picocss.com/docs/customization.html)
157- [Class-less version](https://picocss.com/docs/classless.html)
158- [RTL](https://picocss.com/docs/rtl.html)
159
160**Layout**
161- [Containers](https://picocss.com/docs/containers.html)
162- [Grids](https://picocss.com/docs/grid.html)
163- [Horizontal scroller](https://picocss.com/docs/scroller.html)
164
165**Elements**
166- [Typography](https://picocss.com/docs/typography.html)
167- [Buttons](https://picocss.com/docs/buttons.html)
168- [Forms](https://picocss.com/docs/forms.html)
169- [Tables](https://picocss.com/docs/tables.html)
170
171**Components**
172- [Accordions](https://picocss.com/docs/accordions.html)
173- [Cards](https://picocss.com/docs/cards.html)
174- [Dropdowns](https://picocss.com/docs/dropdowns.html)
175- [Modal](https://picocss.com/docs/modal.html)
176- [Navs](https://picocss.com/docs/navs.html)
177- [Progress](https://picocss.com/docs/progress.html)
178
179**Utilities**
180- [Loading](https://picocss.com/docs/loading.html)
181- [Tooltips](https://picocss.com/docs/tooltips.html)
182
183## Browser Support
184
185Pico 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.
186
187## Contributing
188
189If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
190
191## Copyright and license
192
193Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
194
195**Relevant third-party tools and resources we depend on:**
196
197Website and docs:
198- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
199- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
200
201Pico Library:
202- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
203- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
204- [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))