2024-02-11 12:08:13 +07:00
< p >
< a href = "https://picocss.com" target = "_blank" >
< picture >
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg" >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" >
< img alt = "Pico CSS" src = "https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width = "auto" height = "60" >
< / picture >
< / a >
< / p >
2019-12-09 15:14:26 +07:00
2024-02-11 13:23:54 +07:00
[](https://github.com/picocss/pico/releases/latest)
[](https://www.npmjs.com/package/@picocss/pico )
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
[](https://twitter.com/picocss)
2024-02-11 11:45:39 +07:00
## Minimal CSS Framework for Semantic HTML
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
Write HTML, Add Pico CSS, and Voilà!
2019-12-09 15:14:26 +07:00
2024-02-11 12:36:32 +07:00
## What’ s new in v2?
Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
[Read more ](https://picocss.com/docs/v2 )
2024-02-11 11:45:39 +07:00
## A Superpowered HTML Reset
2024-02-25 02:28:26 -08:00
2024-02-11 11:45:39 +07:00
With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
2020-10-27 11:22:03 +07:00
2024-02-11 11:45:39 +07:00
- Class-light and Semantic
- Great Styles with Just CSS
- Responsive Everything
- Light or Dark Mode
- Easy Customization
- Optimized Performance
2020-09-25 09:48:13 +07:00
2024-02-11 11:45:39 +07:00
## Table of contents
2021-07-02 23:04:17 +07:00
2024-01-28 20:14:56 +07:00
- [Quick start ](#quick-start )
2021-07-02 23:04:17 +07:00
- [Class-less version ](#class-less-version )
2022-01-01 15:36:42 +07:00
- [Limitations ](#limitations )
2021-07-02 23:04:17 +07:00
- [Documentation ](#documentation )
2022-03-13 11:44:44 +07:00
- [Browser Support ](#browser-support )
2021-07-02 23:04:17 +07:00
- [Contributing ](#contributing )
- [Copyright and license ](#copyright-and-license )
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
## Quick start
2019-12-09 15:14:26 +07:00
2022-01-26 11:21:35 +01:00
There are 4 ways to get started with pico.css:
2019-12-11 15:07:21 +07:00
2024-02-11 11:45:39 +07:00
### Install manually
2021-07-02 23:04:17 +07:00
2024-02-11 11:45:39 +07:00
[Download Pico ](https://github.com/picocss/pico/archive/refs/heads/main.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
2023-04-10 11:59:32 +07:00
< link rel = "stylesheet" href = "css/pico.min.css" / >
2019-12-11 09:13:13 +07:00
```
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
### Usage from CDN
2021-07-02 23:04:17 +07:00
2023-04-11 20:16:14 +07:00
Alternatively, you can use [jsDelivr CDN ](https://www.jsdelivr.com/package/npm/@picocss/pico ) to link pico.css.
2019-12-11 15:07:21 +07:00
```html
2024-02-11 12:36:32 +07:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ @picocss/pico@2/css/pico .min.css" />
2019-12-11 15:07:21 +07:00
```
2024-02-11 11:45:39 +07:00
### Install with NPM
2021-07-02 23:04:17 +07:00
2019-12-11 15:07:21 +07:00
```shell
2024-02-11 11:45:39 +07:00
npm install @picocss/pico
2023-04-10 11:59:32 +07:00
```
2024-02-11 11:45:39 +07:00
Or
2023-04-10 11:59:32 +07:00
```shell
2024-02-11 11:45:39 +07:00
yarn add @picocss/pico
2019-12-11 15:07:21 +07:00
```
2024-02-11 11:45:39 +07:00
Then, import Pico into your SCSS file with [@use ](https://sass-lang.com/documentation/at-rules/use ):
```SCSS
@use "pico";
```
### Install with Composer
2022-01-26 11:21:35 +01:00
```shell
composer require picocss/pico
```
2024-02-11 11:45:39 +07:00
### Starter HTML template
2021-07-02 23:04:17 +07:00
2024-02-11 11:45:39 +07:00
```HTML
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "color-scheme" content = "light dark" / >
< link rel = "stylesheet" href = "css/pico.min.css" >
< title > Hello world!< / title >
< / head >
< body >
< main class = "container" >
< h1 > Hello world!< / h1 >
< / main >
< / body >
< / html >
```
## Class-less version
2021-07-03 00:22:17 +07:00
2024-02-11 11:52:40 +07:00
Pico provides a `.classless` version.
2024-02-11 11:45:39 +07:00
In this version, `<header>` , `<main>` , and `<footer>` inside `<body>` act as containers to define a centered or a fluid viewport.
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
2024-01-28 20:14:56 +07:00
< link
rel="stylesheet"
2024-02-11 12:36:32 +07:00
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico .classless.min.css"
2024-01-28 20:14:56 +07:00
/>
2021-07-02 23:04:17 +07:00
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
2023-04-10 11:59:32 +07:00
< link
rel="stylesheet"
2024-02-11 12:36:32 +07:00
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico .fluid.classless.min.css"
2023-04-10 11:59:32 +07:00
/>
2021-07-02 23:04:17 +07:00
```
Then just write pure HTML, and it should look great:
```html
2024-01-28 20:14:56 +07:00
<!doctype html>
2021-07-02 23:04:17 +07:00
< html lang = "en" >
< head >
2023-04-10 11:59:32 +07:00
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
2024-01-28 20:14:56 +07:00
< meta name = "color-scheme" content = "light dark" / >
2023-04-10 11:59:32 +07:00
< link
rel="stylesheet"
2024-02-11 12:36:32 +07:00
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico .classless.min.css"
2023-04-10 11:59:32 +07:00
/>
2021-07-02 23:04:17 +07:00
< title > Hello, world!< / title >
< / head >
< body >
< main >
< h1 > Hello, world!< / h1 >
< / main >
< / body >
< / html >
```
2024-02-11 11:45:39 +07:00
## Limitations
Pico CSS can be used without custom CSS for quick or small projects. However, it’ s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes` , this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
2020-10-01 13:33:05 +07:00
2024-02-11 12:36:32 +07:00
[Read more ](https://picocss.com/docs/usage-scenarios )
2022-09-13 08:48:30 +07:00
2024-02-11 11:45:39 +07:00
## Documentation
2020-09-25 09:48:13 +07:00
2023-04-10 11:59:32 +07:00
**Getting started**
2020-10-01 13:33:05 +07:00
2024-02-11 11:45:39 +07:00
- [Quick start ](https://picocss.com/docs )
- [Version picker `New` ](https://picocss.com/docs/version-picker )
- [Color schemes ](https://picocss.com/docs/color-schemes )
- [Class-less version ](https://picocss.com/docs/classless )
- [Conditional styling `New` ](https://picocss.com/docs/conditional )
- [RTL ](https://picocss.com/docs/rtl )
2020-09-25 09:48:13 +07:00
2023-04-10 11:59:32 +07:00
**Customization**
2020-09-25 09:48:13 +07:00
2024-02-11 11:45:39 +07:00
- [CSS Variables ](https://picocss.com/docs/css-variables )
- [Sass ](https://picocss.com/docs/sass )
- [Colors `New` ](https://picocss.com/docs/colors )
2020-09-25 09:48:13 +07:00
2023-04-10 11:59:32 +07:00
**Layout**
2020-08-08 11:03:00 +07:00
2024-02-11 11:45:39 +07:00
- [Container ](https://picocss.com/docs/container )
- [Landmarks & section ](https://picocss.com/docs/landmarks-section )
- [Grid ](https://picocss.com/docs/grid )
- [Overflow auto `New` ](https://picocss.com/docs/overflow-auto )
2019-12-09 15:14:26 +07:00
2023-04-10 11:59:32 +07:00
**Content**
2022-01-01 15:36:42 +07:00
2024-02-11 11:45:39 +07:00
- [Typography ](https://picocss.com/docs/typography )
- [Link ](https://picocss.com/docs/link )
- [Button ](https://picocss.com/docs/button )
- [Table ](https://picocss.com/docs/table )
2022-01-01 15:36:42 +07:00
2023-04-10 11:59:32 +07:00
**Forms**
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
- [Overview ](https://picocss.com/docs/forms )
- [Input ](https://picocss.com/docs/forms/input )
- [Textarea ](https://picocss.com/docs/forms/textarea )
- [Select ](https://picocss.com/docs/forms/select )
- [Checkboxes ](https://picocss.com/docs/forms/checkboxes )
- [Radios ](https://picocss.com/docs/forms/radios )
- [Switch ](https://picocss.com/docs/forms/switch )
- [Range ](https://picocss.com/docs/forms/range )
2019-12-09 15:14:26 +07:00
2023-04-10 11:59:32 +07:00
**Components**
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
- [Accordion ](https://picocss.com/docs/accordion )
- [Card ](https://picocss.com/docs/card )
- [Dropdown ](https://picocss.com/docs/dropdown )
- [Group `New` ](https://picocss.com/docs/group )
- [Loading ](https://picocss.com/docs/loading )
- [Modal ](https://picocss.com/docs/modal )
- [Nav ](https://picocss.com/docs/nav )
- [Progress ](https://picocss.com/docs/progress )
- [Tooltip ](https://picocss.com/docs/tooltip )
2021-07-02 23:04:17 +07:00
2023-04-10 11:59:32 +07:00
**About**
2019-12-09 15:14:26 +07:00
2024-02-11 11:45:39 +07:00
- [What’ s new in v2? ](https://picocss.com/docs/v2 )
- [Mission ](https://picocss.com/docs/mission )
- [Usage scenarios ](https://picocss.com/docs/usage-scenarios )
- [Brand ](https://picocss.com/docs/brand )
- [Built With ](https://picocss.com/docs/built-with )
2022-03-13 15:33:26 +07:00
2024-02-11 11:45:39 +07:00
## Browser Support
2020-10-27 11:22:03 +07:00
2024-02-11 11:45:39 +07:00
Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
2022-03-13 15:34:45 +07:00
2024-02-11 11:45:39 +07:00
## Contributing
2020-10-27 11:28:08 +07:00
2022-03-13 14:19:51 +07:00
If you are interested in contributing to Pico CSS, please read our [contributing guidelines ](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md ).
2020-10-27 11:28:08 +07:00
2024-02-11 11:45:39 +07:00
## Copyright and license
2021-07-24 12:24:33 +07:00
2024-01-28 20:14:56 +07:00
Licensed under the [MIT License ](https://github.com/picocss/pico/blob/master/LICENSE.md ).