mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 17:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "Feature: modal"

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 00:12:34 +07:00 • committed by GitHub
parent 39314102d2
commit d5544ea021
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
115 changed files with 3754 additions and 6410 deletions
Download patch file Download diff file Expand all files Collapse all files

67
docs/src/grid.html
View file

@ -1,67 +0,0 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Grid"
description=".grid enable a minimal grid system with auto-layout columns."
canonical="grid.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="grid-link"}
<div role="document">
<section id="grid">
<hgroup>
<h1>Grid</h1>
<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
</hgroup>
<article aria-label="Grid example">
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<footer class="code">
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;3&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer>
</article>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
<details>
<summary>
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
&nbsp;More about grids
</summary>
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
</details>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
<script src="js/grid.min.js"></script>
</body>
</html>