2023-04-10 11:59:32 +07:00
< p align = "center" style = "padding: 1rem;" >
2023-04-10 12:12:09 +07:00
< a href = "https://v2.picocss.com/" >
2023-04-10 11:59:32 +07:00
< img src = ".github/logo.svg" width = "auto" height = "60" >
2020-08-08 11:11:38 +07:00
< / a >
< / p >
2019-12-09 15:14:26 +07:00
2023-04-10 11:59:32 +07:00
< p align = "center" >
2024-01-28 20:14:56 +07:00
< strong > A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.< / strong >
2023-04-10 11:59:32 +07:00
< / p >
2019-12-09 15:14:26 +07:00
2020-08-08 11:11:38 +07:00
< p align = "center" >
2024-01-28 20:14:56 +07:00
Write HTML, Add Pico CSS, and Voilà!
2020-08-08 11:11:38 +07:00
< / p >
2019-12-09 15:14:26 +07:00
2023-04-10 11:59:32 +07:00
< p align = "center" >
< a href = "https://v2.picocss.com/docs" > Documentation< / a >
< / p >
2019-12-09 15:14:26 +07:00
2023-04-10 11:59:32 +07:00
# Pico.css
2021-07-24 14:33:49 +07:00
2024-01-28 20:14:56 +07:00
**Class-light and Semantic**
Thriving on simplicity, Pico directly styles your HTML tags, using fewer than 10 `.classes` ` overall. It also comes with a class-less version for wild HTML purists.
2020-10-27 11:22:03 +07:00
2024-01-28 20:14:56 +07:00
**Great Styles with Just CSS**
No extra baggage needed. Pico works seamlessly without dependencies, package managers, external files, or JavaScript, achieving elegant and straightforward styles with pure HTML markup.
2020-09-25 09:48:13 +07:00
2024-01-28 20:14:56 +07:00
**Responsive Everything**
Effortless elegance on every device. Pico natively scales font sizes and spacings with screen widths, resulting in a consistent and elegant look across devices. No extra classes or configuration needed.
2020-09-25 09:48:13 +07:00
2024-01-28 20:14:56 +07:00
**Light or Dark Mode**
Pico comes with two accessible, neutral color schemes out of the box: light and dark. The best part? It automatically adapts to users' `prefers-color-scheme` `, all without the use of JavaScript.
**Easy Customization**
Customize Pico with over 130 CSS variables, or dive deeper by using SASS. Switch between 20 handcrafted color themes and compose with 30+ modular components to tailor the UI to your brand's look and feel.
**Optimized Performance**
Speed meets elegance. Unlike bulky and overcomplicated frameworks that demand extensive class overrides and JavaScript, Pico keeps your HTML lean, decreases memory usage by avoiding excessive CSS specificity, and reduces loaded files.
2020-09-25 09:48:13 +07:00
2023-04-10 11:59:32 +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-01-28 20:14:56 +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
2021-07-02 23:04:17 +07:00
**Install manually**
2023-04-11 20:16:14 +07:00
[Download Pico ](https://github.com/picocss/pico/archive/refs/heads/v2.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-01-28 20:14:56 +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
2023-04-23 11:23:51 +07:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ @picocss/pico@next/css/pico .min.css" />
2019-12-11 15:07:21 +07:00
```
2021-07-02 23:04:17 +07:00
**Install with NPM**
2019-12-11 15:07:21 +07:00
```shell
2023-04-10 11:59:32 +07:00
npm install @picocss/pico@next
```
```shell
yarn add @picocss/pico@next
2019-12-11 15:07:21 +07:00
```
2022-01-26 11:21:35 +01:00
**Install with Composer**
```shell
composer require picocss/pico
```
2023-04-10 11:59:32 +07:00
# Class-less version
2021-07-02 23:04:17 +07:00
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
2024-01-28 20:14:56 +07:00
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico .classless.min.css"
/>
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"
2023-04-23 11:23:51 +07:00
href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/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"
2023-04-23 11:23:51 +07:00
href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/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 >
```
2023-04-10 11:59:32 +07:00
# Limitations
2020-10-01 13:33:05 +07:00
2023-04-10 11:59:32 +07:00
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.
2022-09-13 08:48:30 +07:00
2023-04-10 11:59:32 +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
2023-04-10 11:59:32 +07:00
- [Quick start ](https://v2.picocss.com/docs )
2024-01-28 20:14:56 +07:00
- [Version picker `New` ](https://v2.picocss.com/docs/version-picker )
2023-04-10 11:59:32 +07:00
- [Color schemes ](https://v2.picocss.com/docs/color-schemes )
- [Class-less version ](https://v2.picocss.com/docs/classless )
- [RTL ](https://v2.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
2023-04-10 11:59:32 +07:00
- [CSS Variables ](https://v2.picocss.com/docs/css-variables )
- [Sass ](https://v2.picocss.com/docs/sass )
2024-01-28 20:14:56 +07:00
- [Colors `New` ](https://v2.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
2023-04-10 11:59:32 +07:00
- [Container ](https://v2.picocss.com/docs/container )
- [Landmarks & section ](https://v2.picocss.com/docs/landmarks-section )
- [Grid ](https://v2.picocss.com/docs/grid )
2024-01-28 20:14:56 +07:00
- [Overflow auto `New` ](https://v2.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
2023-04-10 11:59:32 +07:00
- [Typography ](https://v2.picocss.com/docs/typography )
- [Link ](https://v2.picocss.com/docs/link )
- [Button ](https://v2.picocss.com/docs/button )
- [Table ](https://v2.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
2023-04-10 11:59:32 +07:00
- [Overview ](https://v2.picocss.com/docs/forms )
- [Input ](https://v2.picocss.com/docs/forms/input )
- [Textarea ](https://v2.picocss.com/docs/forms/textarea )
- [Select ](https://v2.picocss.com/docs/forms/select )
- [Checkboxes ](https://v2.picocss.com/docs/forms/checkboxes )
- [Radios ](https://v2.picocss.com/docs/forms/radios )
- [Switch ](https://v2.picocss.com/docs/forms/switch )
- [Range ](https://v2.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
2023-04-10 11:59:32 +07:00
- [Accordion ](https://v2.picocss.com/docs/accordion )
- [Card ](https://v2.picocss.com/docs/card )
- [Dropdown ](https://v2.picocss.com/docs/dropdown )
2024-01-28 20:14:56 +07:00
- [Group `New` ](https://v2.picocss.com/docs/group )
2023-04-10 11:59:32 +07:00
- [Loading ](https://v2.picocss.com/docs/loading )
- [Modal ](https://v2.picocss.com/docs/modal )
- [Nav ](https://v2.picocss.com/docs/nav )
- [Progress ](https://v2.picocss.com/docs/progress )
- [Tooltip ](https://v2.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
2023-04-10 11:59:32 +07:00
- [What’ ](https://v2.picocss.com/docs/v2 )
- [Mission ](https://v2.picocss.com/docs/mission )
- [Usage scenarios ](https://v2.picocss.com/docs/usage-scenarios )
- [Brand ](https://v2.picocss.com/docs/brand )
2022-03-13 15:33:26 +07:00
2023-04-10 11:59:32 +07:00
# Browser Support
2020-10-27 11:22:03 +07:00
2022-03-13 11:54:31 +07:00
Pico 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
2023-04-10 11:59:32 +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
2023-04-10 11:59:32 +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 ).
