From 9d6d54a1d3225b6d3a879a50b8f544555cf9ed7a Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sat, 28 Jan 2023 12:39:08 +0700 Subject: [PATCH] chore: build --- docs/accordions.html | 2 +- docs/buttons.html | 2 +- docs/cards.html | 2 +- docs/classless.html | 2 +- docs/containers.html | 2 +- docs/customization.html | 2 +- docs/dropdowns.html | 4 ++-- docs/forms.html | 2 +- docs/grid.html | 2 +- docs/index.html | 2 +- docs/loading.html | 4 ++-- docs/modal.html | 16 ++++++++-------- docs/navs.html | 2 +- docs/progress.html | 4 +--- docs/rtl.html | 5 ++++- docs/scroller.html | 2 +- docs/tables.html | 2 +- docs/themes.html | 2 +- docs/tooltips.html | 2 +- docs/typography.html | 23 ++++++++++++++++++++--- docs/we-love-classes.html | 2 +- 21 files changed, 52 insertions(+), 34 deletions(-) diff --git a/docs/accordions.html b/docs/accordions.html index fbc2020b..6e71ca78 100644 --- a/docs/accordions.html +++ b/docs/accordions.html @@ -27,4 +27,4 @@ <p>…</p> </details> - + \ No newline at end of file diff --git a/docs/buttons.html b/docs/buttons.html index 9700889f..9d0e9620 100644 --- a/docs/buttons.html +++ b/docs/buttons.html @@ -3,4 +3,4 @@ <a href="#" role="button">Link</a>

Buttons come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

Secondary Contrast
<a href="#" role="button" class="secondary">Secondary</a>
 <a href="#" role="button" class="contrast">Contrast</a>

And a classic .outline variant.

Primary Secondary Contrast
<a href="#" role="button" class="outline">Primary</a>
 <a href="#" role="button" class="secondary outline">Secondary</a>
-<a href="#" role="button" class="contrast outline">Contrast</a>
+<a href="#" role="button" class="contrast outline">Contrast</a> \ No newline at end of file diff --git a/docs/cards.html b/docs/cards.html index acce7988..bcc5c564 100644 --- a/docs/cards.html +++ b/docs/cards.html @@ -2,4 +2,4 @@ <header>Header</header> Body <footer>Footer</footer> -</article> +</article> \ No newline at end of file diff --git a/docs/classless.html b/docs/classless.html index d778b739..21f36bb4 100644 --- a/docs/classless.html +++ b/docs/classless.html @@ -26,4 +26,4 @@ #root > footer { … } - + \ No newline at end of file diff --git a/docs/containers.html b/docs/containers.html index e33665d3..c441036c 100644 --- a/docs/containers.html +++ b/docs/containers.html @@ -1,3 +1,3 @@ Containers • Pico.css

Containers

.container enable a centered viewport.
.container-fluid enable a 100% layout.

<body>
   <main class="container"></main>
-</body>

Pico uses the same breakpoints and viewports sizes as Bootstrap.

DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
Viewport100%540px720px960px1140px

<header>, <main> and <footer> as direct children of <body> provide a responsive vertical padding

<section> provides a responsive margin-bottom to separate your sections.

Code licensed MIT

+</body>

Pico uses the same breakpoints and viewports sizes as Bootstrap.

DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
Viewport100%540px720px960px1140px

<header>, <main> and <footer> as direct children of <body> provide a responsive vertical padding

<section> provides a responsive margin-bottom to separate your sections.

\ No newline at end of file diff --git a/docs/customization.html b/docs/customization.html index 226fa47c..f498741e 100644 --- a/docs/customization.html +++ b/docs/customization.html @@ -56,4 +56,4 @@ @import "@picocss/pico/scss/pico/layout/document"; @import "@picocss/pico/scss/pico/layout/sectioning"; … -

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

+

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

\ No newline at end of file diff --git a/docs/dropdowns.html b/docs/dropdowns.html index 7a4d3c51..b84a0681 100644 --- a/docs/dropdowns.html +++ b/docs/dropdowns.html @@ -97,7 +97,7 @@ </li> </ul> </details> - +

Dropdowns can be used inside a <nav> with a nested <details role="list">

Example with a dropdown as a link:

<nav>
   <ul>
     <li><strong>Brand</strong></li>
@@ -154,4 +154,4 @@
       </ul>
     </li>
   </ul>
-</nav>
+</nav> \ No newline at end of file diff --git a/docs/forms.html b/docs/forms.html index 49c79dc5..ebd74539 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -105,4 +105,4 @@ <!-- Color --> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"> -</label> +</label> \ No newline at end of file diff --git a/docs/grid.html b/docs/grid.html index d8d762d1..2a068633 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -3,4 +3,4 @@ <div>2</div> <div>3</div> <div>4</div> -</div>

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

 More about grids

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

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.

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

Alternatively, you can learn about CSS Grid.

+</div>

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

 More about grids

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

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.

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

Alternatively, you can learn about CSS Grid.

\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 026f68ea..08c45847 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,4 +11,4 @@ <h1>Hello, world!</h1> </main> </body> -</html> +</html> \ No newline at end of file diff --git a/docs/loading.html b/docs/loading.html index 431ad867..032401b3 100644 --- a/docs/loading.html +++ b/docs/loading.html @@ -1,2 +1,2 @@ -Loading • Pico.css

Loading

aria-busy="true" enable a loading indicator.

<button aria-busy="true">Please wait…</button>
-<button aria-busy="true" class="secondary"></button>

It can be applied to any block:

<article aria-busy="true"></article>

Or any text element:

Code licensed MIT

+Loading • Pico.css

Loading

aria-busy="true" enable a loading indicator.

<button aria-busy="true">Please wait…</button>
+<button aria-busy="true" class="secondary"></button>

It can be applied to any block:

<article aria-busy="true"></article>

Or any text element:

Code licensed MIT

\ No newline at end of file diff --git a/docs/modal.html b/docs/modal.html index 23b63961..35a94eb1 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -5,9 +5,9 @@ Modal title </header> <p> - 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. </p> </article> @@ -15,8 +15,8 @@ <article> <h3>Confirm your action!</h3> <p> - 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. </p> <footer> @@ -42,8 +42,8 @@ </a> <h3>Confirm your action!</h3> <p> - 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. </p> <footer> @@ -84,4 +84,4 @@ </html>

.modal-is-closing brings a closing animation.

<!doctype html>
 <html class="modal-is-open modal-is-closing">
   …
-</html>

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 +</html>

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file diff --git a/docs/navs.html b/docs/navs.html index 032c3493..17e7dc59 100644 --- a/docs/navs.html +++ b/docs/navs.html @@ -31,4 +31,4 @@ <li><a href="#">Category</a></li> <li>Page</li> </ul> -</nav> +</nav> \ No newline at end of file diff --git a/docs/progress.html b/docs/progress.html index 7b19e178..8267883f 100644 --- a/docs/progress.html +++ b/docs/progress.html @@ -1,3 +1 @@ -Progress • Pico.css

Progress

Progress bar element in pure HTML, without JavaScript.

<progress value="25" max="100"></progress>

You can change a progress bar to an indeterminate state by setting the indeterminate property to true

<script>
-  document.getElementById('indeterminate-progress').indeterminate = true;
-</script>

Code licensed MIT

+Progress • Pico.css

Progress

Progress bar element in pure HTML, without JavaScript.

<progress value="25" max="100"></progress>

A progress bar without a value attribute is indeterminate.

<progress></progress>

Code licensed MIT

\ No newline at end of file diff --git a/docs/rtl.html b/docs/rtl.html index 264368eb..3a3f6892 100644 --- a/docs/rtl.html +++ b/docs/rtl.html @@ -1 +1,4 @@ -RTL (Right-To-Left) • Pico.css

RTL

Support for right-to-left text in Pico.

To enable RTL in Pico you need to set dir="rtl"on the <html> element (example).

<!doctype html>
+RTL (Right-To-Left) • Pico.css
RTL
Support for right-to-left text in Pico.
To enable RTL in Pico you need to set dir="rtl"on the <html> element (example).
<!doctype html>
+<html dir="rtl" lang="ar">
+  ...
+</html>
ℹ️ The RTL feature is still experimental and will probably evolve.
Code licensed MIT

\ No newline at end of file
diff --git a/docs/scroller.html b/docs/scroller.html
index e902accc..c4d81792 100644
--- a/docs/scroller.html
+++ b/docs/scroller.html
@@ -2,4 +2,4 @@
   <table>
     …
   </table>
-</figure>

Code licensed MIT

+</figure> \ No newline at end of file diff --git a/docs/tables.html b/docs/tables.html index d41480b8..dcbb6b86 100644 --- a/docs/tables.html +++ b/docs/tables.html @@ -47,4 +47,4 @@ </tfoot> </table>

role="grid" enable striped rows.

#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
<table role="grid">
   …
-</table>
+</table> \ No newline at end of file diff --git a/docs/themes.html b/docs/themes.html index e35cf064..bd7b3f1c 100644 --- a/docs/themes.html +++ b/docs/themes.html @@ -2,4 +2,4 @@ … </article>

Dark theme

<article data-theme="dark">
   …
-</article>
+</article> \ No newline at end of file diff --git a/docs/tooltips.html b/docs/tooltips.html index 2f328998..044b30d6 100644 --- a/docs/tooltips.html +++ b/docs/tooltips.html @@ -5,4 +5,4 @@ <button data-tooltip="Right" data-placement="right">Right</button> <button data-tooltip="Bottom" data-placement="bottom">Bottom</button> <button data-tooltip="Left" data-placement="left">Left</button> - + \ No newline at end of file diff --git a/docs/typography.html b/docs/typography.html index 9f4e70d2..bf4ee6a0 100644 --- a/docs/typography.html +++ b/docs/typography.html @@ -1,3 +1,20 @@ -Typography • Pico.css

Typography

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

DeviceExtra smallSmallMediumLargeExtra large
Base font16px17px18px19px20px
<h1>32px34px36px38px40px
<h2>28px29px31.5px33.25px35px
<h3>24px25.5px27px28.5px30px
<h4>20px21.25px22.5px23.75px25px
<h5>18px19.125px20.25px21.375px22.5px
<h6>16px17px18px19px20px
<small>14px14.875px15.75px16.625px27.5px

Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6