mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update README

Browse source
This commit is contained in:
Lucas Larroche 2023-04-10 11:59:32 +07:00
parent 662e12f007
commit 678a0394ef
3 changed files with 137 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

34
.github/logo.svg vendored Normal file
View file

@ -0,0 +1,34 @@
<svg fill="none" height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
<style>
:root {
--pico-logo-wordmark: #2a3140;
--pico-logo-small-sparkles: #ffbf00;
--pico-logo-big-sparkle: #ff9500;
}
@media only screen and (prefers-color-scheme: dark) {
:root {
--pico-logo-wordmark: #fff;
--pico-logo-small-sparkles: #ff9500;
--pico-logo-big-sparkle: #ffbf00;
}
}
.pico-logo-wordmark {
fill: var(--pico-logo-wordmark);
}
.pico-logo-small-sparkles {
fill: var(--pico-logo-small-sparkles);
}
.pico-logo-big-sparkle {
fill: var(--pico-logo-big-sparkle);
}
</style>
<path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
<path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
<path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
<g class="pico-logo-wordmark">
<path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
<path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
<path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
<path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

198
README.md
View file

@ -1,27 +1,33 @@
<p align="center"> <style>
:root {
--pico-logo-background: #fff;
}
@media only screen and (prefers-color-scheme: dark) {
:root {
--pico-logo-background: #2a3140;
}
}
</style>
<p align="center" style="background-color: var(--pico-logo-background); padding: 1rem;">
<a href="https://picocss.com/"> <a href="https://picocss.com/">
<img src="https://picocss.com/img/logo.svg" width="64" height="64"> <img src=".github/logo.svg" width="auto" height="60">
</a> </a>
</p> </p>
<h3 align="center">Pico.css</h3>
<p align="center"> <p align="center">
<strong>Minimal CSS Framework for semantic HTML</strong><br> <strong>Minimal CSS Framework for semantic HTML</strong>
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
<a href="https://picocss.com/#examples">Examples</a> ·
<a href="https://picocss.com/docs/">Documentation</a>
</p> </p>
## Pico.css <p align="center">
[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic HTML, making every HTML tag responsive and elegant by default.
[![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) </p>
[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4 <p align="center">
<a href="https://v2.picocss.com/docs">Documentation</a>
</p>
# Pico.css
**Class-light and semantic** **Class-light and semantic**
Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico. Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
@ -35,18 +41,17 @@ Elegant and consistent adaptive spacings and typography on all devices.
**Light or Dark mode** **Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference. Shipped with two beautiful color themes, automatically enabled according to the user preference.
## Table of contents # Table of contents
- [Usage](#usage) - [Usage](#usage)
- [Class-less version](#class-less-version) - [Class-less version](#class-less-version)
- [Examples](#examples)
- [Limitations](#limitations) - [Limitations](#limitations)
- [Documentation](#documentation) - [Documentation](#documentation)
- [Browser Support](#browser-support) - [Browser Support](#browser-support)
- [Contributing](#contributing) - [Contributing](#contributing)
- [Copyright and license](#copyright-and-license) - [Copyright and license](#copyright-and-license)
## Usage # Usage
There are 4 ways to get started with pico.css: There are 4 ways to get started with pico.css:
@ -55,7 +60,7 @@ There are 4 ways to get started with pico.css:
[Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website. [Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website.
```html ```html
<link rel="stylesheet" href="css/pico.min.css"> <link rel="stylesheet" href="css/pico.min.css" />
``` ```
**Install from CDN** **Install from CDN**
@ -63,13 +68,17 @@ There are 4 ways to get started with pico.css:
Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
``` ```
**Install with NPM** **Install with NPM**
```shell ```shell
npm install @picocss/pico npm install @picocss/pico@next
```
```shell
yarn add @picocss/pico@next
``` ```
**Install with Composer** **Install with Composer**
@ -78,7 +87,7 @@ npm install @picocss/pico
composer require picocss/pico composer require picocss/pico
``` ```
## Class-less version # Class-less version
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)). Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
@ -87,24 +96,30 @@ In this version, `header`, `main` and `footer` act as containers.
Use the default `.classless` version if you need centered viewports: Use the default `.classless` version if you need centered viewports:
```html ```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
``` ```
Or use the `.fluid.classless` version if you need a fluid container: Or use the `.fluid.classless` version if you need a fluid container:
```html ```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
/>
``` ```
Then just write pure HTML, and it should look great: Then just write pure HTML, and it should look great:
```html ```html
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <link
rel="stylesheet"
href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"
/>
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>
<body> <body>
@ -115,93 +130,78 @@ Then just write pure HTML, and it should look great:
</html> </html>
``` ```
## Examples # Limitations
Minimalist templates to discover Pico in action:
[![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples)
- **[Preview](https://picocss.com/examples/preview/)**
A starter example with all elements and components used in Pico
- **[Right-to-left (RTL) preview](https://picocss.com/examples/preview-rtl/)**
A starter example in Arabic with all the elements and components used in Pico
- **[Class-less](https://picocss.com/examples/classless/)**
Just a pure semantic HTML markup, without `.classes`
- **[Basic template](https://picocss.com/examples/basic-template/)**
A basic custom template for Pico using only CSS custom properties (variables)
- **[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
- **[Pico + Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
## Limitations
Pico 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. Pico 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.
## Documentation # Documentation
**Getting started** **Getting started**
- [Usage](https://picocss.com/docs/)
- [Themes](https://picocss.com/docs/themes.html) - [Quick start](https://v2.picocss.com/docs)
- [Customization](https://picocss.com/docs/customization.html) - [Color schemes](https://v2.picocss.com/docs/color-schemes)
- [Class-less version](https://picocss.com/docs/classless.html) - [Class-less version](https://v2.picocss.com/docs/classless)
- [RTL](https://picocss.com/docs/rtl.html) - [RTL](https://v2.picocss.com/docs/rtl)
**Customization**
- [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)
**Layout** **Layout**
- [Containers](https://picocss.com/docs/containers.html)
- [Grids](https://picocss.com/docs/grid.html)
- [Horizontal scroller](https://picocss.com/docs/scroller.html)
**Elements** - [Container](https://v2.picocss.com/docs/container)
- [Typography](https://picocss.com/docs/typography.html) - [Landmarks & section](https://v2.picocss.com/docs/landmarks-section)
- [Buttons](https://picocss.com/docs/buttons.html) - [Grid](https://v2.picocss.com/docs/grid)
- [Forms](https://picocss.com/docs/forms.html) - [Horizontal scroller](https://v2.picocss.com/docs/scroller)
- [Tables](https://picocss.com/docs/tables.html)
**Content**
- [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)
**Forms**
- [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)
**Components** **Components**
- [Accordions](https://picocss.com/docs/accordions.html)
- [Cards](https://picocss.com/docs/cards.html)
- [Dropdowns](https://picocss.com/docs/dropdowns.html)
- [Modal](https://picocss.com/docs/modal.html)
- [Navs](https://picocss.com/docs/navs.html)
- [Progress](https://picocss.com/docs/progress.html)
**Utilities** - [Accordion](https://v2.picocss.com/docs/accordion)
- [Loading](https://picocss.com/docs/loading.html) - [Card](https://v2.picocss.com/docs/card)
- [Tooltips](https://picocss.com/docs/tooltips.html) - [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)
## Browser Support **About**
- [What’s new in v2?](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)
# Browser Support
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. 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.
## Contributing # Contributing
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md). If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
## Copyright and license # Copyright and license
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
**Relevant third-party tools and resources we depend on:**
Website and docs:
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
- [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))
- [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))

3
package.json
View file

@ -11,6 +11,9 @@
"type": "git", "type": "git",
"url": "git+https://github.com/picocss/pico.git" "url": "git+https://github.com/picocss/pico.git"
}, },
"publishConfig": {
"tag": "next"
},
"keywords": [ "keywords": [
"css", "css",
"css-framework", "css-framework",