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

docs: update README

Browse source
This commit is contained in:
Lucas Larroche 2024-02-11 12:36:32 +07:00
parent 2d56846d4b
commit 5907151a92
1 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -14,6 +14,12 @@ A minimalist and lightweight starter kit that prioritizes semantic syntax, makin
Write HTML, Add Pico CSS, and Voilà! Write HTML, Add Pico CSS, and Voilà!
## 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)
## A Superpowered HTML Reset ## A Superpowered HTML Reset
With just the right amount of everything, Pico is great starting point for a clean and lightweight design system. With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
@ -52,7 +58,7 @@ There are 4 ways to get started with pico.css:
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css. Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico/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
@ -110,7 +116,7 @@ Use the default `.classless` version if you need centered viewports:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
/> />
``` ```
@ -119,7 +125,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico/css/pico.fluid.classless.min.css" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
/> />
``` ```
@ -134,7 +140,7 @@ Then just write pure HTML, and it should look great:
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
/> />
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>
@ -150,7 +156,7 @@ Then just write pure HTML, and it should look great:
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. 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.
[See Usage scenarios](https://picocss.com/docs/usage-scenarios) [Read more](https://picocss.com/docs/usage-scenarios)
## Documentation ## Documentation