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" >
< strong > Minimal CSS Framework for semantic HTML< / strong >
< / p >
2019-12-09 15:14:26 +07:00
2020-08-08 11:11:38 +07:00
< p align = "center" >
2023-04-10 11:59:32 +07:00
Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic HTML, making every HTML tag responsive and elegant by default.
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
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
2023-04-10 11:59:32 +07:00
# Table of contents
2021-07-02 23:04:17 +07:00
- [Usage ](#usage )
- [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
2023-04-10 11:59:32 +07:00
# Usage
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
2021-07-02 23:04:17 +07:00
**Install from CDN**
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
2023-04-23 11:23:51 +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
2023-04-10 11:59:32 +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" / >
< 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 )
- [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 )
- [Theme generator ](https://v2.picocss.com/docs/theme-generator )
- [Sass ](https://v2.picocss.com/docs/sass )
- [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 )
- [Horizontal scroller ](https://v2.picocss.com/docs/scroller )
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 )
- [Group New ](https://v2.picocss.com/docs/group )
- [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
2023-04-10 11:59:32 +07:00
Licensed under the [MIT License ](https://github.com/picocss/pico/blob/master/LICENSE.md ).
