mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
chore: build
This commit is contained in:
Lucas Larroche
parent
1c6758dd4c
commit
9d6d54a1d3
21 changed files with 52 additions and 34 deletions
|
|
@ -27,4 +27,4 @@
|
|||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</code></pre></footer></article></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></body></html>
|
||||
</code></pre></footer></article></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></body></html>
|
||||
|
|
@ -3,4 +3,4 @@
|
|||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre></footer></article><p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p><p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p><article aria-label="Buttons styles examples"><a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a><footer class="code"><pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre></footer></article><p>And a classic <code>.outline</code> variant.</p><article aria-label="Outline style examples"><a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a> <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a><footer class="code"><pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre></footer></article></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></body></html>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre></footer></article></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></body></html>
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
<<b>header</b>>Header</<b>header</b>>
|
||||
Body
|
||||
<<b>footer</b>>Footer</<b>footer</b>>
|
||||
</<b>article</b>></code></pre></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></body></html>
|
||||
</<b>article</b>></code></pre></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></body></html>
|
||||
|
|
@ -26,4 +26,4 @@
|
|||
<i>#root</i> > <b>footer</b> {
|
||||
<em>…</em>
|
||||
}
|
||||
</code></pre></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></body></html>
|
||||
</code></pre></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></body></html>
|
||||
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. 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>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
|
||||
</code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><<b>details</b> <i>role</i>=<u>"list"</u>></code></p><p>Example with a dropdown as a link:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="link">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
|
|
@ -154,4 +154,4 @@
|
|||
</<b>ul</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre></footer></article></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></body></html>
|
||||
</<b>nav</b>></code></pre></footer></article></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></body></html>
|
||||
|
|
@ -105,4 +105,4 @@
|
|||
<em><!-- Color --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"color"</u>>Color
|
||||
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
||||
</<b>label</b>></code></pre></footer></article></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></body></html>
|
||||
</<b>label</b>></code></pre></footer></article></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></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://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>
|
||||
|
|
@ -11,4 +11,4 @@
|
|||
<<b>h1</b>>Hello, world!</<b>h1</b>>
|
||||
</<b>main</b>>
|
||||
</<b>body</b>>
|
||||
</<b>html</b>></code></pre></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></body></html>
|
||||
</<b>html</b>></code></pre></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></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -5,9 +5,9 @@
|
|||
Modal title
|
||||
</<b>header</b>>
|
||||
<<b>p</b>>
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||
</<b>p</b>>
|
||||
</<b>article</b>>
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
<<b>article</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Ut consectetur placerat pulvinar.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Cras sit amet maximus risus.
|
||||
Pellentesque sodales odio sit amet augue finibus pellentesque.
|
||||
Cras sit amet maximus risus.
|
||||
Pellentesque sodales odio sit amet augue finibus pellentesque.
|
||||
Nullam finibus risus non semper euismod.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
|
|
@ -84,4 +84,4 @@
|
|||
</<b>html</b>></code></pre><p><code>.modal-is-closing</code> brings a closing animation.</p><pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-closing"</u>>
|
||||
<em>…</em>
|
||||
</<b>html</b>></code></pre></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><dialog id="modal-example"><article><a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a><h3>Confirm your action!</h3><p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p><footer><a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a></footer></article></dialog><script src="js/commons.min.js"></script><script src="js/modal.min.js"></script></body></html>
|
||||
</<b>html</b>></code></pre></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><dialog id="modal-example"><article><a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a><h3>Confirm your action!</h3><p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p><footer><a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a></footer></article></dialog><script src="js/commons.min.js"></script><script src="js/modal.min.js"></script></body></html>
|
||||
|
|
@ -31,4 +31,4 @@
|
|||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Category<<b>/a</b>><<b>/li</b>>
|
||||
<<b>li</b>>Page<<b>/li</b>>
|
||||
<<b>/ul</b>>
|
||||
</<b>nav</b>></code></pre></footer></article></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></body></html>
|
||||
</<b>nav</b>></code></pre></footer></article></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></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2,4 +2,4 @@
|
|||
<<b>table</b>>
|
||||
…
|
||||
</<b>table</b>>
|
||||
</<b>figure</b>></code></pre></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></body></html>
|
||||
</<b>figure</b>></code></pre></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></body></html>
|
||||
|
|
@ -47,4 +47,4 @@
|
|||
</<b>tfoot</b>>
|
||||
</<b>table</b>></code></pre><p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p><figure><table role="grid"><thead><tr><th scope="col">#</th><th scope="col">Heading</th><th scope="col">Heading</th><th scope="col">Heading</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">1</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><th scope="row">2</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><th scope="row">3</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody></table></figure><pre><code><<b>table</b> <i>role</i>=<u>"grid"</u>>
|
||||
<em>…</em>
|
||||
</<b>table</b>></code></pre></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></body></html>
|
||||
</<b>table</b>></code></pre></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></body></html>
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
…
|
||||
</<b>article</b>></code></pre></footer></article><article data-theme="dark" aria-label="Forced dark theme example"><h3>Dark theme</h3><form class="grid"><input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required> <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required> <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button></form><footer class="code"><pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||
…
|
||||
</<b>article</b>></code></pre></footer></article></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></body></html>
|
||||
</<b>article</b>></code></pre></footer></article></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></body></html>
|
||||
|
|
@ -5,4 +5,4 @@
|
|||
<<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>>Right</<b>button</b>>
|
||||
<<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>>Bottom</<b>button</b>>
|
||||
<<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>>Left</<b>button</b>>
|
||||
</code></pre></footer></article></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></body></html>
|
||||
</code></pre></footer></article></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></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue