diff options
Diffstat (limited to 'htmx/static/pico-1.5.11/docs/src/classless.html')
| -rw-r--r-- | htmx/static/pico-1.5.11/docs/src/classless.html | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/src/classless.html b/htmx/static/pico-1.5.11/docs/src/classless.html new file mode 100644 index 0000000..6321a1a --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/classless.html @@ -0,0 +1,84 @@ +<!doctype 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> |