mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: build

Browse source
This commit is contained in:
Lucas Larroche 2023-01-28 12:39:08 +07:00
parent 1c6758dd4c
commit 9d6d54a1d3
21 changed files with 52 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/grid.html
View file

@ -3,4 +3,4 @@
&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><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/grid.min.js"></script></body></html>
&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><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/grid.min.js"></script></body></html>