picocss/docs/src/containers.html

<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title="Containers" 
      description=".container enable a centered viewport, .container-fluid enable a 100% layout."
      canonical="containers.html"
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active="containers-link"}
      
      <div role="document">
        <section id="containers">
          <hgroup>
            <h1>Containers</h1>
            <h2>
              <code>.container</code> enable a centered viewport.<br>
              <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
            </h2>
          </hgroup>

<pre><code>&lt;<b>body</b>&gt;
  &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt;</code></pre>

          <p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
          <figure>
            <table role="grid">
              <thead>
                <tr>
                  <th>Device</th>
                  <th>Extra&nbsp;small</th>
                  <th>Small</th>
                  <th>Medium</th>
                  <th>Large</th>
                  <th>Extra&nbsp;large</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>Breakpoint</th>
                  <td>&lt;576<small>px</small></td>
                  <td>≥576<small>px</small></td>
                  <td>≥768<small>px</small></td>
                  <td>≥992<small>px</small></td>
                  <td>≥1200<small>px</small></td>
                </tr>
                <tr>
                  <th>Viewport</th>
                  <td>100<small>%</small></td>
                  <td>540<small>px</small></td>
                  <td>720<small>px</small></td>
                  <td>960<small>px</small></td>
                  <td>1140<small>px</small></td>
                </tr>
              </tbody>
            </table>
          </figure>
          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
          <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
Docs: separate pages 2021-10-31 21:33:19 +07:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`${require('./_head.html')`
			`title="Containers"`
			`description=".container enable a centered viewport, .container-fluid enable a 100% layout."`
			`canonical="containers.html"`
			`}`
			`</head>`

			`<body>`
			`${require('./_nav.html')}`

			`<main class="container" id="docs">`
			`${require('./_sidebar.html') active="containers-link"}`

			`<div role="document">`
			`<section id="containers">`
			`<hgroup>`
Docs: Sidebar styles 2021-11-02 00:20:55 +07:00			`<h1>Containers</h1>`
			`<h2>`
Docs: separate pages 2021-10-31 21:33:19 +07:00			`<code>.container</code> enable a centered viewport.<br>`
			`<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.`
Docs: Sidebar styles 2021-11-02 00:20:55 +07:00			`</h2>`
Docs: separate pages 2021-10-31 21:33:19 +07:00			`</hgroup>`

			`<pre><code><<b>body</b>>`
			`<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>`
			`</<b>body</b>></code></pre>`

			`<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>`
			`<figure>`
			`<table role="grid">`
			`<thead>`
			`<tr>`
			`<th>Device</th>`
			`<th>Extra small</th>`
			`<th>Small</th>`
			`<th>Medium</th>`
			`<th>Large</th>`
			`<th>Extra large</th>`
			`</tr>`
			`</thead>`
			`<tbody>`
			`<tr>`
			`<th>Breakpoint</th>`
			`<td><576<small>px</small></td>`
			`<td>≥576<small>px</small></td>`
			`<td>≥768<small>px</small></td>`
			`<td>≥992<small>px</small></td>`
			`<td>≥1200<small>px</small></td>`
			`</tr>`
			`<tr>`
			`<th>Viewport</th>`
			`<td>100<small>%</small></td>`
			`<td>540<small>px</small></td>`
			`<td>720<small>px</small></td>`
			`<td>960<small>px</small></td>`
			`<td>1140<small>px</small></td>`
			`</tr>`
			`</tbody>`
			`</table>`
			`</figure>`
			`<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>`
			`<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>`
			`</section>`

			`${require('./_footer.html')}`

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