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" >
2021-07-25 16:48:01 +07:00
< strong > Minimal CSS Framework for semantic HTML< / strong > < br >
2021-10-24 11:26:26 +07:00
Elegant styles for all native 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
2021-07-02 23:04:17 +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
2021-07-24 15:50:48 +07:00
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
2021-07-24 14:33:49 +07:00
2021-07-02 23:04:17 +07:00
**Class-light and semantic**
2021-12-19 11:13:41 +07:00
Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
2020-10-27 11:22:03 +07:00
2021-07-02 23:04:17 +07:00
**Great styles with just one CSS file**
2021-07-10 10:47:57 +07:00
No dependencies, package manager, external files, or JavaScript.
2020-09-25 09:48:13 +07:00
2021-07-02 23:04:17 +07:00
**Responsive everything**
2021-12-22 12:46:42 +01:00
Elegant and consistent adaptive spacings and typography on all devices.
2020-09-25 09:48:13 +07:00
2021-07-02 23:04:17 +07:00
**Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
2020-09-25 09:48:13 +07:00
2021-07-02 23:04:17 +07:00
## Table of contents
- [Usage ](#usage )
- [Class-less version ](#class-less-version )
- [Examples ](#examples )
2022-01-01 15:36:42 +07:00
- [Limitations ](#limitations )
2021-07-02 23:04:17 +07:00
- [Documentation ](#documentation )
- [Contributing ](#contributing )
- [Copyright and license ](#copyright-and-license )
2019-12-09 15:14:26 +07:00
## Usage
2019-12-11 15:07:21 +07:00
There are 3 ways to get started with pico.css:
2021-07-02 23:04:17 +07:00
**Install manually**
2021-07-17 15:19:19 +07:00
[Download Pico ](https://github.com/picocss/pico/archive/refs/heads/master.zip ) 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
2021-07-02 23:04:17 +07:00
**Install from CDN**
2021-07-18 10:35:59 +07:00
Alternatively, you can use [unpkg CDN ](https://unpkg.com/@picocss/pico@latest/ ) to link pico.css.
2019-12-11 15:07:21 +07:00
```html
< link rel = "stylesheet" href = "https://unpkg.com/ @picocss/pico@latest/css/pico .min.css" >
```
2021-07-02 23:04:17 +07:00
**Install with NPM**
2019-12-11 15:07:21 +07:00
```shell
npm install @picocss/pico
```
2021-07-02 23:04:17 +07:00
## Class-less version
2021-12-22 12:51:47 +01:00
Pico provides a `.classless` version ([example ](https://picocss.com/examples/classless )).
2021-07-03 00:22:17 +07:00
2021-12-22 12:51:47 +01:00
In this version, `header` , `main` and `footer` act as containers.
2021-07-02 23:04:17 +07:00
2021-07-10 10:58:06 +07:00
Use the default `.classless` version if you need centered viewports:
2021-07-02 23:04:17 +07:00
```html
< link rel = "stylesheet" href = "https://unpkg.com/ @picocss/pico@latest/css/pico .classless.min.css" >
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
< link rel = "stylesheet" href = "https://unpkg.com/ @picocss/pico@latest/css/pico .fluid.classless.min.css" >
```
Then just write pure HTML, and it should look great:
```html
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "https://unpkg.com/ @picocss/pico@latest/css/pico .classless.min.css" >
< title > Hello, world!< / title >
< / head >
< body >
< main >
< h1 > Hello, world!< / h1 >
< / main >
< / body >
< / html >
```
2019-12-09 15:14:26 +07:00
## Examples
2020-10-01 13:33:05 +07:00
Minimalist templates to discover Pico in action:
2021-07-25 00:01:30 +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
2022-01-01 15:36:42 +07:00
## Limitations
Pico can be used without custom CSS for quick or small projects. However, it’ `.classes` , this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
2019-12-09 15:14:26 +07:00
## Documentation
**Getting started**
2021-12-19 10:26:43 +07:00
- [Usage ](https://picocss.com/docs/ )
- [Themes ](https://picocss.com/docs/themes.html )
- [Customization ](https://picocss.com/docs/customization.html )
- [Class-less version ](https://picocss.com/docs/classless.html )
- [RTL ](https://picocss.com/docs/rtl.html )
2019-12-09 15:14:26 +07:00
**Layout**
2021-12-19 10:26:43 +07:00
- [Containers ](https://picocss.com/docs/containers.html )
- [Grids ](https://picocss.com/docs/grid.html )
- [Horizontal scroller ](https://picocss.com/docs/scroller.html )
2019-12-09 15:14:26 +07:00
**Elements**
2021-12-19 10:26:43 +07:00
- [Typography ](https://picocss.com/docs/typography.html )
- [Buttons ](https://picocss.com/docs/buttons.html )
- [Forms ](https://picocss.com/docs/forms.html )
- [Tables ](https://picocss.com/docs/tables.html )
2021-07-02 23:04:17 +07:00
2019-12-09 15:14:26 +07:00
**Components**
2021-12-19 10:26:43 +07:00
- [Accordions ](https://picocss.com/docs/accordions.html )
- [Cards ](https://picocss.com/docs/cards.html )
- [Modal ](https://picocss.com/docs/modal.html )
- [Navs ](https://picocss.com/docs/navs.html )
- [Progress ](https://picocss.com/docs/progress.html )
2019-12-09 15:14:26 +07:00
2021-07-17 15:19:19 +07:00
**Utilities**
2021-12-19 10:26:43 +07:00
- [Loading ](https://picocss.com/docs/loading.html )
- [Tooltips ](https://picocss.com/docs/tooltips.html )
2020-10-27 11:22:03 +07:00
2020-10-27 11:28:08 +07:00
## Contributing
2021-07-10 10:58:06 +07:00
- [`dev` ](https://github.com/picocss/pico/tree/dev ) branch is open to pull requests.
2021-12-19 10:26:43 +07:00
- Do not edit [`/css` ](https://github.com/picocss/pico/tree/master/css ) files directly. Edit the source files in [`/scss` ](https://github.com/picocss/pico/tree/master/scss ), then recompile the [`/css` ](https://github.com/picocss/pico/tree/master/css ) files with `npm run build` .
- Do not edit [`/docs/*.html` ](https://github.com/picocss/pico/tree/master/docs ) files directly. Edit the source files in [`/docs/src` ](https://github.com/picocss/pico/tree/master/docs/src ), then recompile the docs files with `npm run build` .
2020-10-27 11:28:08 +07:00
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
2021-10-24 11:26:26 +07:00
**Relevant third-party tools and resources we depend on:**
2021-07-24 12:24:33 +07:00
Website and docs:
2021-10-24 15:52:28 +07:00
- [TypeIt ](https://typeitjs.com/ ): JavaScript animated typing utility (Licensed [GPL-3.0 ](https://github.com/alexmacarthur/typeit/blob/master/LICENSE ))
2021-07-24 12:24:33 +07:00
- [Font Awesome ](https://fontawesome.com/ ): Icons (Licensed [CC BY 4.0 ](https://fontawesome.com/license/free ))
Pico Library:
- [Feather ](https://feathericons.com/ ) Icons (Licensed [MIT ](https://github.com/feathericons/feather/blob/master/LICENSE ))
- [Normalize.css ](https://necolas.github.io/normalize.css/ ): CSS reset (Licensed [MIT ](https://github.com/necolas/normalize.css/blob/master/LICENSE.md ))
2021-12-22 12:46:42 +01:00
- [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 ))
