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

Update NPM and add unpkg CDN

Browse source
This commit is contained in:
Lucas 2019-12-11 15:07:21 +07:00
parent 3fffd037a9
commit f2adc7813b
7 changed files with 32 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

19
README.md
View file

@ -17,12 +17,29 @@ Elegant styles for all natives HTML elements without `.classes` and dark mode au
## Usage ## Usage
[Download Pico](https://github.com/picocss/pico/archive/v1.0.1.zip) and link `/css/pico.min.css` in the `<head>` of your website. There are 3 ways to get started with pico.css:
### Install manually
[Download Pico](https://github.com/picocss/pico/archive/v1.0.2.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
Alternatively, you can use the [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">
```
### Install with NPM
```shell
npm install @picocss/pico
```
## Examples ## Examples
- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes` - [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes`

5
docs/css/pico.docs.css
View file

@ -191,11 +191,6 @@ main > aside details[open] summary {
/** /**
* Docs: Documentation * Docs: Documentation
*/ */
#start a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
#themes button i { #themes button i {
font-style: normal; font-style: normal;
} }

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/img/logo.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M0 0h1000v1000H0z" fill="#1b2a32"/><path d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" fill="#fff"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 555 B

20
docs/index.html
View file

@ -99,19 +99,15 @@
<h2>Usage</h2> <h2>Usage</h2>
<h3>Work without package manager or dependencies 🙂!</h3> <h3>Work without package manager or dependencies 🙂!</h3>
</hgroup> </hgroup>
<p>1. Download Pico:</p> <p>There are 3 ways to get started with pico.css:</p>
<p> <h4>Install manually</h4>
<a href="https://github.com/picocss/pico/archive/v1.0.1.zip" role="button"> <a href="https://github.com/picocss/pico/archive/v1.0.2.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.
Download pico.css
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="0.66rem">
<path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
</svg>
</a></p>
<p>
2. Link the CSS:<br>
<small>(5.6 KB minified and gzipped)</small>
</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<h4>Install from CDN</h4>
<p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
<h4>Install with NPM</h4>
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
<p>Starter template:</p> <p>Starter template:</p>
<pre><code><em>&lt;!doctype html&gt;</em> <pre><code><em>&lt;!doctype html&gt;</em>

10
docs/scss/layout/_documentation.scss
View file

@ -5,16 +5,6 @@
// Docs: Themes // Docs: Themes
// –––––––––––––––––––– // ––––––––––––––––––––
#start {
a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
}
// Docs: Themes
// ––––––––––––––––––––
#themes { #themes {
button i { button i {
font-style: normal; font-style: normal;

10
package.json
View file

@ -1,14 +1,14 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.0.1", "version": "1.0.2",
"description": "Graceful & Minimal CSS design system in pure semantic HTML", "description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche <lucas@larroche.com>", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "./css/pico.min.css",
"homepage": "https://picocss.com", "homepage": "https://picocss.com",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/picocss/pico.git" "url": "git+https://github.com/picocss/pico.git"
}, },
"keywords": [ "keywords": [
"css", "css",
@ -18,7 +18,7 @@
"semantic", "semantic",
"minimal", "minimal",
"lightweight", "lightweight",
"scss-framwork", "scss-framework",
"native-html" "native-html"
], ],
"bugs": { "bugs": {