mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
chore: update example links
This commit is contained in:
Lucas Larroche
parent
24639b4516
commit
714ff062f5
10 changed files with 10 additions and 10 deletions
File diff suppressed because one or more lines are too long
|
|
@ -56,4 +56,4 @@
|
|||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/document"</u>;
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/sectioning"</u>;
|
||||
<em>…</em>
|
||||
</code></pre><p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p></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/customization.min.js"></script></body></html>
|
||||
</code></pre><p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p></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/customization.min.js"></script></body></html>
|
||||
|
|
@ -3,4 +3,4 @@
|
|||
<<b>div</b>>2</<b>div</b>>
|
||||
<<b>div</b>>3</<b>div</b>>
|
||||
<<b>div</b>>4</<b>div</b>>
|
||||
</<b>div</b>></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> 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>
|
||||
</<b>div</b>></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://codesandbox.io/s/github/picocss/examples/tree/master/v1-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> 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>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre></footer></article><p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p><p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p><p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b>></code> container.</p><pre><code><em><!-- Open modal--></em>
|
||||
</<b>dialog</b>></code></pre></footer></article><p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p><p>As a starting point, you can look at this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p><p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b>></code> container.</p><pre><code><em><!-- Open modal--></em>
|
||||
<<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<em>…</em>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,7 +20,7 @@
|
|||
<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>Pico provides a <code>.classless</code> version (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-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>
|
||||
|
||||
<pre><code><em>// Containers</em>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
<em>…</em>
|
||||
</code></pre>
|
||||
|
||||
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</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>
|
||||
<p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-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">
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
</article>
|
||||
|
||||
<p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
|
||||
<p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
|
||||
<p>As a starting point, you can look at this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p>
|
||||
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b></u>></code> container.</p>
|
||||
|
||||
<pre><code><em><!-- Open modal--></em>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<h1>RTL</h1>
|
||||
<h2>Support for right-to-left text in Pico.</h2>
|
||||
</hgroup>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://picocss.com/examples/preview-rtl/">example</a>).</p>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl">example</a>).</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue