UNPKG

7.14 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>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
33There 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
43Alternatively, 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
51npm install @picocss/pico
52```
53
54## Examples
55
56Minimalist 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
81All 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
125Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
126
127Openly 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/).