picocss/docs/src/classless.html

<!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://picocss.com/examples/classless/">example</a>).</p>
          <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</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>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
          <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
          <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
          <p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>

<pre><code><em>// Centered viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>&gt;
</code></pre>

<pre><code><em>// Fluid viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt;
</code></pre>

          <p>If you need to customize the default parent (<code>&lt;<b>body</b>&gt;</code>) for <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code>, you can recompile Pico by defining another CSS selector.</p>
          <p>Useful for <a href="https://reactjs.org/">React</a>, <a href="https://reactjs.org/">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 &lt;header&gt;, &lt;main&gt;, &lt;footer&gt; 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>

        </section>

        <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>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<!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://picocss.com/examples/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>`
docs: add documentation for $semantic-root-element 2022-10-02 16:45:28 +07:00
			`<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>`

Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<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://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>`

			`<pre><code><em>// Centered viewport</em>`
			`<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/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://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>>`
			`</code></pre>`

docs: add documentation for $semantic-root-element 2022-10-02 16:45:28 +07:00			`<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://reactjs.org/">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>`

Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`</section>`

docs: add documentation for $semantic-root-element 2022-10-02 16:45:28 +07:00			`<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>`

Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`${require('./_footer.html')}`

			`</div>`
			`</main>`
			`<script src="js/commons.min.js"></script>`
			`</body>`
			`</html>`