mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 19:46: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

200
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/">
<img src="https://picocss.com/img/logo.svg" width="64" height="64">
<img src=".github/logo.svg" width="auto" height="60">
</a>
</p>
<h3 align="center">Pico.css</h3>
<p align="center">
<strong>Minimal CSS Framework for semantic HTML</strong><br>
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>
<strong>Minimal CSS Framework for semantic HTML</strong>
</p>
## Pico.css
[![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)
[![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)
[![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)
<p align="center">
Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic HTML, making every HTML tag responsive and elegant by default.
</p>
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**
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**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
## Table of contents
# Table of contents
- [Usage](#usage)
- [Class-less version](#class-less-version)
- [Examples](#examples)
- [Limitations](#limitations)
- [Documentation](#documentation)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
## Usage
# Usage
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.
```html
<link rel="stylesheet" href="css/pico.min.css">
<link rel="stylesheet" href="css/pico.min.css" />
```
**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.
```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**
```shell
npm install @picocss/pico
npm install @picocss/pico@next
```
```shell
yarn add @picocss/pico@next
```
**Install with Composer**
@ -78,7 +87,7 @@ npm install @picocss/pico
composer require picocss/pico
```
## Class-less version
# Class-less version
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:
```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:
```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:
```html
<!doctype 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">
<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>
@ -115,93 +130,78 @@ Then just write pure HTML, and it should look great:
</html>
```
## Examples
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
# 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.
## Documentation
# Documentation
**Getting started**
- [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)
- [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)
**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**
- [Containers](https://picocss.com/docs/containers.html)
- [Grids](https://picocss.com/docs/grid.html)
- [Horizontal scroller](https://picocss.com/docs/scroller.html)
**Elements**
- [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)
- [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)
**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**
- [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**
- [Loading](https://picocss.com/docs/loading.html)
- [Tooltips](https://picocss.com/docs/tooltips.html)
- [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)
## 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.
## 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).
## Copyright and license
# Copyright and license
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))
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).