diff --git a/README.md b/README.md index 1b80609e..bf24d9ca 100644 --- a/README.md +++ b/README.md @@ -154,6 +154,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s ## Documentation **Getting started** + - [Usage](https://picocss.com/docs/) - [Themes](https://picocss.com/docs/themes.html) - [Customization](https://picocss.com/docs/customization.html) @@ -161,17 +162,20 @@ Pico can be used without custom CSS for quick or small projects. However, it’s - [RTL](https://picocss.com/docs/rtl.html) **Layout** + - [Containers](https://picocss.com/docs/containers.html) - [Grids](https://picocss.com/docs/grid.html) - [Horizontal scroller](https://picocss.com/docs/scroller.html) **Elements** + - [Typography](https://picocss.com/docs/typography.html) - [Buttons](https://picocss.com/docs/buttons.html) - [Forms](https://picocss.com/docs/forms.html) - [Tables](https://picocss.com/docs/tables.html) **Components** + - [Accordions](https://picocss.com/docs/accordions.html) - [Cards](https://picocss.com/docs/cards.html) - [Dropdowns](https://picocss.com/docs/dropdowns.html) @@ -180,6 +184,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s - [Progress](https://picocss.com/docs/progress.html) **Utilities** + - [Loading](https://picocss.com/docs/loading.html) - [Tooltips](https://picocss.com/docs/tooltips.html) diff --git a/docs/accordions.html b/docs/accordions.html index 6e71ca78..fbc2020b 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 9d0e9620..9700889f 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

And a classic .outline variant.

Primary Secondary Contrast
\ No newline at end of file +<a href="#" role="button" class="contrast outline">Contrast</a> diff --git a/docs/cards.html b/docs/cards.html index bcc5c564..acce7988 100644 --- a/docs/cards.html +++ b/docs/cards.html @@ -2,4 +2,4 @@ <header>Header</header> Body <footer>Footer</footer> -</article> \ No newline at end of file +</article> diff --git a/docs/classless.html b/docs/classless.html index 21f36bb4..d778b739 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 c441036c..e33665d3 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.

\ No newline at end of file +</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.

diff --git a/docs/customization.html b/docs/customization.html index f498741e..226fa47c 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.

\ No newline at end of file +

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.

diff --git a/docs/dropdowns.html b/docs/dropdowns.html index b84a0681..7a4d3c51 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:

\ No newline at end of file +</nav> diff --git a/docs/forms.html b/docs/forms.html index 547a27bd..49c79dc5 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -81,7 +81,7 @@ document.getElementById('indeterminate-checkbox').indeterminate = true; </script>

Others input types:

\ No newline at end of file +</label> diff --git a/docs/grid.html b/docs/grid.html index 2a068633..d8d762d1 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.

\ No newline at end of file +</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.

diff --git a/docs/index.html b/docs/index.html index 08c45847..026f68ea 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,4 +11,4 @@ <h1>Hello, world!</h1> </main> </body> -</html> \ No newline at end of file +</html> diff --git a/docs/modal.html b/docs/modal.html index 35a94eb1..23b63961 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.

 \ No newline at end of file +</html>

Confirm your action!

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

 diff --git a/docs/navs.html b/docs/navs.html index 17e7dc59..032c3493 100644 --- a/docs/navs.html +++ b/docs/navs.html @@ -31,4 +31,4 @@ <li><a href="#">Category</a></li> <li>Page</li> </ul> -</nav> \ No newline at end of file +</nav> diff --git a/docs/progress.html b/docs/progress.html index 86c89a13..7b19e178 100644 --- a/docs/progress.html +++ b/docs/progress.html @@ -1,3 +1,3 @@ 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>
\ No newline at end of file +</script> diff --git a/docs/rtl.html b/docs/rtl.html index f9c01ff2..4c97b8e1 100644 --- a/docs/rtl.html +++ b/docs/rtl.html @@ -1,4 +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>
 <html dir="rtl" lang="ar">
   ...
-</html>

ℹ️ The RTL feature is still experimental and will probably evolve.

\ No newline at end of file +</html>

ℹ️ The RTL feature is still experimental and will probably evolve.

diff --git a/docs/scroller.html b/docs/scroller.html index c4d81792..e902accc 100644 --- a/docs/scroller.html +++ b/docs/scroller.html @@ -2,4 +2,4 @@ <table> … </table> -</figure> \ No newline at end of file +</figure> diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html index d91a2120..dfdf4395 100644 --- a/docs/src/_sidebar.html +++ b/docs/src/_sidebar.html @@ -71,4 +71,4 @@ activeLink.setAttribute('aria-current', 'page'); parentAccordion.setAttribute('open', 'true'); - \ No newline at end of file + diff --git a/docs/src/forms.html b/docs/src/forms.html index 3b75f4f8..f682df33 100644 --- a/docs/src/forms.html +++ b/docs/src/forms.html @@ -1,8 +1,8 @@ - ${require('./_head.html') - title="Forms" + ${require('./_head.html') + title="Forms" description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports." canonical="forms.html" } @@ -10,10 +10,10 @@ ${require('./_nav.html')} - +
${require('./_sidebar.html') active="forms-link"} - +
@@ -233,7 +233,7 @@ 
<!-- Search -->
 <input type="search" id="search" name="search" placeholder="Search">
-  
+
 <!-- File browser -->
 <label for="file">File browser
   <input type="file" id="file" name="file">
@@ -264,7 +264,7 @@
${require('./_footer.html')} - +
diff --git a/docs/tables.html b/docs/tables.html index dcbb6b86..d41480b8 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>
\ No newline at end of file +</table> diff --git a/docs/themes.html b/docs/themes.html index bd7b3f1c..e35cf064 100644 --- a/docs/themes.html +++ b/docs/themes.html @@ -2,4 +2,4 @@ … </article>

Dark theme

\ No newline at end of file +</article> diff --git a/docs/tooltips.html b/docs/tooltips.html index 044b30d6..2f328998 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 f6cbb82a..63972daf 100644 --- a/docs/typography.html +++ b/docs/typography.html @@ -14,9 +14,9 @@ </div>

Inline text elements:

Abbr. abbr

Bold strong b

Italic i em cite

Deleted del

Inserted ins

Ctrl + S kbd

Highlighted mark

Strikethrough s

Small small

Text Sub sub

Text Sup sup

Underline u

Links come with .secondary and .contrast styles.

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

Primary
Secondary
Contrast

Blockquote:

"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia
\ No newline at end of file +</blockquote>