@picocss/pico
Version:
Minimal CSS Framework for semantic HTML
85 lines (66 loc) • 3.48 kB
HTML
<html lang="en">
<head>
${require('./_head.html')
title="Class-less version"
description="For wild HTML purists, Pico provides a .classless version."
canonical="classless.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="classless-link"}
<div role="document">
<section id="classless">
<hgroup>
<h1>Class-less version</h1>
<h2>For wild HTML purists!</h2>
</hgroup>
<p>Pico provides a <code>.classless</code> version (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless">example</a>).</p>
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>
<pre><code><em>// Containers</em>
<b>body</b> > <b>header</b>,
<b>body</b> > <b>main</b>,
<b>body</b> > <b>footer</b> {
<em>…</em>
}
</code></pre>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>></code></pre>
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>></code></pre>
<p>These <code>.classless</code> versions are also available on <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a>:</p>
<pre><code><em>// Centered viewport</em>
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"</u>>
</code></pre>
<pre><code><em>// Fluid viewport</em>
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css"</u>>
</code></pre>
<p>If you need to customize the default parent (<code><<b>body</b>></code>) for <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code>, you can recompile Pico by defining another CSS selector.</p>
<p>Useful for <a href="https://reactjs.org/">React</a>, <a href="https://www.gatsbyjs.com/">Gatsby</a> or <a href="https://nextjs.org/">Next.js</a>.</p>
<pre><code><em>/* Custom Class-less version for React */</em>
<em>// Set the root element</em>
<i>$semantic-root-element</i>: <u>"#root"</u>;
<em>// Enable <header>, <main>, <footer> inside $semantic-root-element as containers</em>
<i>$enable-semantic-container</i>: <u>true</u>;
<em>// Enable .classes</em>
<i>$enable-classes</i>: <u>false</u>;
<em>// Import Pico</em>
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
<p>The code above will compile Pico with the containers defined like this:</p>
<pre><code><em>// Containers</em></em>
<i>#root</i> > <b>header</b>,
<i>#root</i> > <b>main</b>,
<i>#root</i> > <b>footer</b> {
<em>…</em>
}
</code></pre>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>