2021-12-19 09:50:55 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Documentation"
2022-05-22 11:25:28 +07:00
description="Pico works without package manager or dependencies! There are 4 ways to get started with pico.css: manually, from a CDN, with NPM, or with Composer."
2021-12-19 09:50:55 +07:00
canonical=""
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="start-link"}
< div role = "document" >
< section id = "start" >
< hgroup >
< h1 > Usage< / h1 >
< h2 > Works without package manager or dependencies 🙂!< / h2 >
< / hgroup >
2022-05-22 10:09:07 +07:00
< p > There are 4 ways to get started with pico.css:< / p >
2021-12-19 09:50:55 +07:00
< h3 > Install manually< / h3 >
< 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 > < < b > head< / b > > < / code > of your website.< / p >
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "css/pico.min.css"< / u > > < / code > < / pre >
< h3 > Install from CDN< / h3 >
< p > Alternatively, you can use < a href = "https://unpkg.com/@picocss/pico@latest/" > unpkg CDN< / a > to link pico.css< / p >
< pre > < code > < < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"< / u > > < / code > < / pre >
< h3 > Install with NPM< / h3 >
< pre > < code > < b > npm< / b > < i > install< / i > < u > @picocss/pico< / u > < / code > < / pre >
2022-05-22 10:09:07 +07:00
< h3 > Install with Composer< / h3 >
< pre > < code > < b > composer< / b > < i > require< / i > < u > picocss/pico< / u > < / code > < / pre >
2021-12-19 09:50:55 +07:00
< p > Starter HTML template:< / p >
< pre > < code > < em > < !doctype html> < / em >
< < b > html< / b > < i > lang< / i > =< u > "en"< / u > >
< < b > head< / b > >
< < b > meta< / b > < i > charset< / i > =< u > "utf-8"< / u > >
< < b > meta< / b > < i > name< / i > =< u > "viewport"< / u > < i > content< / i > =< u > "width=device-width, initial-scale=1"< / u > >
< < b > link< / b > < i > rel< / i > =< u > "stylesheet"< / u > < i > href< / i > =< u > "css/pico.min.css"< / u > >
< < b > title< / b > >Hello, world!< /< b > title< / b > >
< /< b > head< / b > >
< < b > body< / b > >
< < b > main< / b > < i > class< / i > =< u > "container"< / u > >
< < b > h1< / b > > Hello, world!< /< b > h1< / b > >
< /< b > main< / b > >
< /< b > body< / b > >
< /< b > html< / b > > < / code > < / pre >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
