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

Docs: separate pages

Browse source
This commit is contained in:
Lucas Larroche 2021-10-31 21:33:19 +07:00
parent cea5c8c04c
commit bbb53c7dd4
61 changed files with 2994 additions and 1498 deletions
Download patch file Download diff file Expand all files Collapse all files

57
docs/src/index.html Normal file
View file

@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Documentation"
description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
canonical=""
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="start-link"}
<div role="document">
<section id="start">
<hgroup>
<h2>Usage</h2>
<h3>Works without package manager or dependencies 🙂!</h3>
</hgroup>
<p>There are 3 ways to get started with pico.css:</p>
<h4>Install manually</h4>
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</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>
<h4>Install from CDN</h4>
<p>Alternatively, you can use <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 HTML template:</p>
<pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
&lt;<b>head</b>&gt;
&lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
&lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1"</u>&gt;
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
&lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
&lt;/<b>head</b>&gt;
&lt;<b>body</b>&gt;
&lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;
&lt;<b>h1</b>&gt;Hello, world!&lt;/<b>h1</b>&gt;
&lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt;
&lt;/<b>html</b>&gt;</code></pre>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>