2020-08-08 11:11:38 +07:00
< p align = "center" >
< a href = "https://picocss.com/" >
< img src = "https://picocss.com/img/logo.svg" width = "64" height = "64" >
< / a >
< / p >
2019-12-09 15:14:26 +07:00
2020-08-08 11:11:38 +07:00
< h3 align = "center" > Pico.css< / h3 >
2019-12-09 15:14:26 +07:00
2020-08-08 11:11:38 +07:00
< p align = "center" >
< strong > Graceful & Minimal CSS design system in pure semantic HTML.< / strong > < br >
2020-08-08 11:33:55 +07:00
Elegant styles for all natives HTML elements without < code > .classes< / code > and dark mode automatically enabled.< br > < br >
2020-08-08 11:11:38 +07:00
< a href = "https://picocss.com/ #examples " > Examples</ a > ·
< a href = "https://picocss.com/docs/" > Documentation< / a >
< / p >
2019-12-09 15:14:26 +07:00
2020-08-08 11:11:38 +07:00
# Pico.css
2020-09-12 11:59:21 +07:00
[](https://unpkg.com/@picocss/pico@latest/css/pico .min.css)
[](https://github.com/picocss/pico/releases/latest)
[](https://www.npmjs.com/package/@picocss/pico )
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
2019-12-09 15:14:26 +07:00
2020-10-27 11:22:03 +07:00
2019-12-09 15:14:26 +07:00
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
2020-09-25 09:48:13 +07:00
2019-12-09 15:14:26 +07:00
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
2020-09-25 09:48:13 +07:00
2019-12-09 15:14:26 +07:00
- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
2020-09-25 09:48:13 +07:00
2019-12-09 15:14:26 +07:00
- **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
## Usage
2019-12-11 15:07:21 +07:00
There are 3 ways to get started with pico.css:
### Install manually
2020-09-12 11:59:21 +07:00
[Download Pico ](https://github.com/picocss/pico/releases/latest ) and link `/css/pico.min.css` in the `<head>` of your website.
2019-12-09 15:14:26 +07:00
2019-12-11 09:13:13 +07:00
```html
< link rel = "stylesheet" href = "css/pico.min.css" >
```
2019-12-09 15:14:26 +07:00
2019-12-11 15:07:21 +07:00
### Install from CDN
Alternatively, you can use the [unpkg CDN ](https://unpkg.com/@picocss/pico@latest/ ) to link pico.css.
```html
< link rel = "stylesheet" href = "https://unpkg.com/ @picocss/pico@latest/css/pico .min.css" >
```
### Install with NPM
```shell
npm install @picocss/pico
```
2019-12-09 15:14:26 +07:00
## Examples
2020-10-01 13:33:05 +07:00
Minimalist templates to discover Pico in action:
2020-10-27 11:22:03 +07:00
[](https://picocss.com/#examples )
2020-09-25 09:48:13 +07:00
2020-10-01 13:33:05 +07:00
- **[Preview ](https://picocss.com/examples/preview/ )**
A starter example with all elements and components used in Pico
2020-09-25 09:48:13 +07:00
- **[Class-less ](https://picocss.com/examples/classless/ )**
Just a pure semantic HTML markup, without `.classes`
2020-10-01 13:33:05 +07:00
- **[Basic template ](https://picocss.com/examples/basic-template/ )**
A basic custom template for Pico using only CSS custom properties (variables)
2020-09-25 09:48:13 +07:00
- **[Company ](https://picocss.com/examples/company/ )**
A classic company or blog layout with a sidebar
- **[Google Amp ](https://picocss.com/examples/google-amp/ )**
A simple layout for Google Amp, with inlined CSS
- **[Sign in ](https://picocss.com/examples/sign-in/ )**
A minimalist layout for Login pages
- **[Bootstrap grid system ](https://picocss.com/examples/bootstrap-grid/ )**
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
2020-08-08 11:03:00 +07:00
2020-09-25 09:48:13 +07:00
All examples are open-sourced in [picocss/examples ](https://github.com/picocss/examples ).
2019-12-09 15:14:26 +07:00
## Documentation
**Getting started**
- [Usage ](https://picocss.com/docs/#start )
- [Themes ](https://picocss.com/docs/#themes )
- [Customization ](https://picocss.com/docs/#customization )
- [Class-less version ](https://picocss.com/docs/#classless )
**Layout**
- [Containers ](https://picocss.com/docs/#containers )
- [Grids ](https://picocss.com/docs/#grids )
- [Horizontal scroller ](https://picocss.com/docs/#scroller )
**Elements**
- [Typography ](https://picocss.com/docs/#typography )
- [Buttons ](https://picocss.com/docs/#buttons )
- [Forms ](https://picocss.com/docs/#forms )
**Components**
- [Accordions ](https://picocss.com/docs/#accordions )
- [Cards ](https://picocss.com/docs/#cards )
- [Navs ](https://picocss.com/docs/#navs )
- [Tooltips ](https://picocss.com/docs/#tooltips )
2020-10-27 11:22:03 +07:00
## Variations
| Variation | Minified CSS | Source | Example |
|:-----|:-----|:-----|:-----|
| Default | [](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/ ) |
| Classless< br > (Centered viewports) | [](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/ ) |
| Classless< br > (Fluid container) | [](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 ) | - |
| Slim | [](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 ) | - |
| Google Amp | [](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/ ) |
| Pico + Bootstrap grid system | [](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/ ) |
2020-10-27 11:28:08 +07:00
## Contributing
- [dev/ ](https://github.com/picocss/pico/tree/dev ) branch is open to pull requests.
- 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 ).
2019-12-09 15:14:26 +07:00
## Copyright and license
2019-12-10 17:55:03 +07:00
2020-10-01 13:33:05 +07:00
Licensed under the [MIT License ](https://github.com/picocss/pico/blob/master/LICENSE.md ).
2020-09-12 11:59:21 +07:00
2020-10-01 13:33:05 +07:00
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/ ).
