UNPKG

6.94 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 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
22https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
23
24**Class-light and semantic**
25We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
26
27**Great styles with just one CSS file**
28No dependencies, package manager, external files, or JavaScript.
29
30**Responsive everything**
31Elegant and consistent adaptative spacings and typography on all devices.
32
33**Light or Dark mode**
34Shipped with two beautiful color themes, automatically enabled according to the user preference.
35
36## Table of contents
37
38- [Usage](#usage)
39- [Class-less version](#class-less-version)
40- [Examples](#examples)
41- [Documentation](#documentation)
42- [Contributing](#contributing)
43- [Copyright and license](#copyright-and-license)
44
45## Usage
46
47There are 3 ways to get started with pico.css:
48
49**Install manually**
50
51[Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website.
52
53```html
54<link rel="stylesheet" href="css/pico.min.css">
55```
56
57**Install from CDN**
58
59Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
60
61```html
62<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
63```
64
65**Install with NPM**
66
67```shell
68npm install @picocss/pico
69```
70
71## Class-less version
72
73Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
74
75In this version, `header`, `main` and `footer` act as container.
76
77Use the default `.classless` version if you need centered viewports:
78
79```html
80<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
81```
82
83Or use the `.fluid.classless` version if you need a fluid container:
84
85```html
86<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
87```
88
89Then just write pure HTML, and it should look great:
90
91```html
92<!doctype html>
93<html lang="en">
94 <head>
95 <meta charset="utf-8">
96 <meta name="viewport" content="width=device-width, initial-scale=1">
97 <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
98 <title>Hello, world!</title>
99 </head>
100 <body>
101 <main>
102 <h1>Hello, world!</h1>
103 </main>
104 </body>
105</html>
106```
107
108## Examples
109
110Minimalist templates to discover Pico in action:
111
112[![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples)
113
114- **[Preview](https://picocss.com/examples/preview/)**
115 A starter example with all elements and components used in Pico
116
117- **[Class-less](https://picocss.com/examples/classless/)**
118 Just a pure semantic HTML markup, without `.classes`
119
120- **[Basic template](https://picocss.com/examples/basic-template/)**
121 A basic custom template for Pico using only CSS custom properties (variables)
122
123- **[Company](https://picocss.com/examples/company/)**
124 A classic company or blog layout with a sidebar
125
126- **[Google Amp](https://picocss.com/examples/google-amp/)**
127 A simple layout for Google Amp, with inlined CSS
128
129- **[Sign in](https://picocss.com/examples/sign-in/)**
130 A minimalist layout for Login pages
131
132- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
133 Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
134
135All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
136
137## Documentation
138
139**Getting started**
140- [Usage](https://picocss.com/docs/#start)
141- [Themes](https://picocss.com/docs/#themes)
142- [Customization](https://picocss.com/docs/#customization)
143- [Class-less version](https://picocss.com/docs/#classless)
144
145**Layout**
146- [Containers](https://picocss.com/docs/#containers)
147- [Grids](https://picocss.com/docs/#grids)
148- [Horizontal scroller](https://picocss.com/docs/#scroller)
149
150**Elements**
151- [Typography](https://picocss.com/docs/#typography)
152- [Buttons](https://picocss.com/docs/#buttons)
153- [Forms](https://picocss.com/docs/#forms)
154- [Tables](https://picocss.com/docs/#tables)
155
156**Components**
157- [Accordions](https://picocss.com/docs/#accordions)
158- [Cards](https://picocss.com/docs/#cards)
159- [Navs](https://picocss.com/docs/#navs)
160- [Progress](https://picocss.com/docs/#progress)
161
162**Utilities**
163- [Loading](https://picocss.com/docs/#loading)
164- [Tooltips](https://picocss.com/docs/#tooltips)
165
166## Contributing
167
168- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
169- 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).
170
171## Copyright and license
172
173Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
174
175**Relevant third party tools and resources we depend on:**
176
177Website and docs:
178- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL 2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
179- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
180- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
181
182Pico Library:
183- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
184- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
185- [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))