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/) |
|
|
|
|
|
|
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/).
|
