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

Add examples

Browse source
This commit is contained in:
Lucas 2020-09-25 09:48:13 +07:00
parent 15aecaa674
commit 544e31dea8
2 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/index.html
View file

@ -328,6 +328,7 @@
</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="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@ -338,7 +339,7 @@
&nbsp;More about grids
</summary>
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the Pico spirit.</p>
<p>A full 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 layouts, you can look about <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 about <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>
@ -754,6 +755,7 @@
&lt;/<b>fieldset</b>&gt;</code></pre>
</article>
<p>Advanced example with all form elements supported in Pico <a href="https://picocss.com/examples/form-elements/">here</a>.</p>
</section><!-- ./ Docs: Form -->
<!-- Docs: Accordions -->