diff --git a/README.md b/README.md index cfb1f79a..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,10 +184,11 @@ 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) -## Browser Support +## Browser support Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11. diff --git a/docs/accordions.html b/docs/accordions.html index 45ab2171..fbc2020b 100644 --- a/docs/accordions.html +++ b/docs/accordions.html @@ -1,4 +1,4 @@ -Accordions • Pico.css

Accordions

Toggle sections of content in pure HTML, without JavaScript.

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

Accordion 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
<details>
+Accordions • Pico.css
Accordions
Toggle sections of content in pure HTML, without JavaScript.
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
Accordion 2
  • Vestibulum id elit quis massa interdum sodales.
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
  • Quisque sed eros non eros ornare elementum.
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
<details>
   <summary>Accordion 1</summary>
   <p>…</p>
 </details>
@@ -27,4 +27,4 @@
   <p>…</p>
 </details>
 
-            
Code licensed MIT

\ No newline at end of file
+
diff --git a/docs/buttons.html b/docs/buttons.html index 4206dbff..9700889f 100644 --- a/docs/buttons.html +++ b/docs/buttons.html @@ -1,6 +1,6 @@ -Buttons • Pico.css

Buttons

The essential button in pure HTML, without .classes for the default style.

diff --git a/docs/cards.html b/docs/cards.html index 6d27c8f3..acce7988 100644 --- a/docs/cards.html +++ b/docs/cards.html @@ -1,5 +1,5 @@ -Cards • Pico.css

Cards

A flexible container with graceful spacings across devices and viewports.

I'm a card!
<article>I'm a card!</article>

You can use <header> and footer <footer> inside <article>

Header
Body
Footer
<article>
+Cards • Pico.css
Cards
A flexible container with graceful spacings across devices and viewports.
I'm a card!
<article>I'm a card!</article>
You can use <header> and footer <footer> inside <article>
Header
Body
Footer
<article>
   <header>Header</header>
   Body
   <footer>Footer</footer>
-</article>
Code licensed MIT

\ No newline at end of file
+</article>
diff --git a/docs/classless.html b/docs/classless.html index e6c1ab09..d778b739 100644 --- a/docs/classless.html +++ b/docs/classless.html @@ -1,4 +1,4 @@ -Class-less version • Pico.css

Class-less version

For wild HTML purists!

Pico provides a .classless version (example).

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

// Containers
+Class-less version • Pico.css
Class-less version
For wild HTML purists!
Pico provides a .classless version (example).
In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.
// Containers
 body > header,
 body > main,
 body > footer {
@@ -26,4 +26,4 @@
 #root > footer {
   …
 }
-
Code licensed MIT

\ No newline at end of file
+
diff --git a/docs/containers.html b/docs/containers.html index 6e4e7205..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>
+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

\ 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 04ce489c..226fa47c 100644 --- a/docs/customization.html +++ b/docs/customization.html @@ -1,4 +1,4 @@ -Customization • Pico.css

Customization

You can customize themes with SCSS or, you can edit the CSS variables.

Example: pick a color!

Custom theme

diff --git a/docs/dropdowns.html b/docs/dropdowns.html index 3f88102e..7a4d3c51 100644 --- a/docs/dropdowns.html +++ b/docs/dropdowns.html @@ -1,4 +1,4 @@ -Dropdowns • Pico.css
diff --git a/docs/forms.html b/docs/forms.html index a0105510..49c79dc5 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -1,4 +1,4 @@ -Forms • Pico.css

Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default. You can use .grid inside a form.

All natives form elements are fully customizable and themeable with CSS variables.

We'll never share your email with anyone else. 
<form>
+Forms • Pico.css
Forms
All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.
Inputs are width: 100%; by default. You can use .grid inside a form.
All native form elements are fully customizable and themeable with CSS variables.
 
  We'll never share your email with anyone else. 
<form>
 
   <!-- Grid -->
   <div class="grid">
@@ -81,7 +81,7 @@
   document.getElementById('indeterminate-checkbox').indeterminate = true;
 </script>
Others input types:
     
<!-- Search -->
 <input type="search" id="search" name="search" placeholder="Search">
-  
+
 <!-- File browser -->
 <label for="file">File browser
   <input type="file" id="file" name="file">
@@ -105,4 +105,4 @@
 <!-- Color -->
 <label for="color">Color
   <input type="color" id="color" name="color" value="#0eaaaa">
-</label>
Code licensed MIT

\ No newline at end of file
+</label>
diff --git a/docs/grid.html b/docs/grid.html index 1bb47cbe..d8d762d1 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -1,6 +1,6 @@ -Grid • Pico.css

Grid

.grid enable a minimal grid system with auto-layout columns.

1
2
3
4

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 aeffba2c..026f68ea 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -Documentation • Pico.css

Usage

Works without package manager or dependencies 🙂!

There are 4 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

<link rel="stylesheet" href="css/pico.min.css">

Install from CDN

Alternatively, you can use unpkg CDN to link pico.css

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

Install with NPM

npm install @picocss/pico

Install with Composer

composer require picocss/pico

Starter HTML template:

<!doctype html>
+Documentation • Pico.css
Usage
Works without package manager or dependencies 🙂!
There are 4 ways to get started with pico.css:
Install manually
Download Pico and link /css/pico.min.css in the <head> of your website.
<link rel="stylesheet" href="css/pico.min.css">
Install from CDN
Alternatively, you can use unpkg CDN to link pico.css
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
Install with NPM
npm install @picocss/pico
Install with Composer
composer require picocss/pico
Starter HTML template:
<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -11,4 +11,4 @@
       <h1>Hello, world!</h1>
     </main>
   </body>
-</html>
Code licensed MIT

\ No newline at end of file
+</html>
diff --git a/docs/loading.html b/docs/loading.html index eb3f553a..431ad867 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:

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

diff --git a/docs/modal.html b/docs/modal.html index e331971f..23b63961 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -1,13 +1,13 @@ -Modal • Pico.css

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 9649c79e..032c3493 100644 --- a/docs/navs.html +++ b/docs/navs.html @@ -1,4 +1,4 @@ -Navs • Pico.css
diff --git a/docs/progress.html b/docs/progress.html index 2b3459eb..7b19e178 100644 --- a/docs/progress.html +++ b/docs/progress.html @@ -1 +1,3 @@ -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>
\ No newline at end of file +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>
diff --git a/docs/rtl.html b/docs/rtl.html index 41e96d81..264368eb 100644 --- a/docs/rtl.html +++ b/docs/rtl.html @@ -1,4 +1 @@ -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 +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>
diff --git a/docs/scroller.html b/docs/scroller.html
index de52b8ed..e902accc 100644
--- a/docs/scroller.html
+++ b/docs/scroller.html
@@ -1,5 +1,5 @@
-Horizontal scroller • Pico.css
Horizontal scroller
<figure> acts as a container to make any content scrollable horizontally.
Useful to have responsive <table>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
<figure>
+Horizontal scroller • Pico.css
Horizontal scroller
<figure> acts as a container to make any content scrollable horizontally.
Useful to have responsive <table>
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
<figure>
   <table>
     …
   </table>
-</figure>
Code licensed MIT

\ No newline at end of file
+</figure>
Code licensed MIT

diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html
index ec0c3940..dfdf4395 100644
--- a/docs/src/_sidebar.html
+++ b/docs/src/_sidebar.html
@@ -9,7 +9,7 @@
         Collapse
         
       
-      Table of content
+      Table of contents
     
     

       Getting started
@@ -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 e4f6bfb2..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"}
-      
+
       

         

           

@@ -21,7 +21,7 @@
             
All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

           

           
Inputs are width: 100%; by default. You can use .grid inside a form.

-          
All natives form elements are fully customizable and themeable with CSS variables.

+          
All native form elements are fully customizable and themeable with CSS variables.

           

             

               

@@ -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 47673294..d41480b8 100644
--- a/docs/tables.html
+++ b/docs/tables.html
@@ -1,4 +1,4 @@
-Tables • Pico.css
Tables
Default styles for tables without .classes
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#TotalTotalTotalTotalTotal
<table>
+Tables • Pico.css
Tables
Default styles for tables without .classes
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
#TotalTotalTotalTotalTotal
<table>
   <thead>
     <tr>
       <th scope="col">#</th>
@@ -47,4 +47,4 @@
   </tfoot>
 </table>
role="grid" enable striped rows.
#HeadingHeadingHeadingHeadingHeading
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
<table role="grid">
   …
-</table>
Code licensed MIT

\ No newline at end of file
+</table>
Code licensed MIT

diff --git a/docs/themes.html b/docs/themes.html
index 58b817eb..e35cf064 100644
--- a/docs/themes.html
+++ b/docs/themes.html
@@ -1,5 +1,5 @@
-Themes • Pico.css
Themes
Pico is shipped with 2 consistent themes: Light & Dark.
The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark
Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">
Light theme
  
Code licensed MIT

diff --git a/docs/tooltips.html b/docs/tooltips.html
index ce700439..2f328998 100644
--- a/docs/tooltips.html
+++ b/docs/tooltips.html
@@ -1,8 +1,8 @@
-Tooltips • Pico.css
Tooltips
Enable tooltips everywhere in pure HTML, without JavaScript.
Tooltip on a link
Tooltip on inline element
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
+Tooltips • Pico.css
Tooltips
Enable tooltips everywhere in pure HTML, without JavaScript.
Tooltip on a link
Tooltip on inline element
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
 <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
 <p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
 
data-placement with the values top, right, bottom or left is used to control the position of the tooltip.
<button data-tooltip="Top" data-placement="top">Top</button>
 <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>
-
Code licensed MIT

\ No newline at end of file
+
Code licensed MIT

diff --git a/docs/typography.html b/docs/typography.html
index c51d553f..9f4e70d2 100644
--- a/docs/typography.html
+++ b/docs/typography.html
@@ -1,20 +1,3 @@
-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
<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
Inside a <hgroup> or a <div class="headings"> all margin-bottom are collapsed and the :last-child is muted.
Heading 2
Subtitle for heading 2
<hgroup>
-  <h2>Heading 2</h2>
-  <h3>Subtitle for heading 2</h3>
-</hgroup>
<div class="headings">
-  <h2>Heading 2</h2>
-  <h3>Subtitle for heading 2</h3>
-</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
<a href="#">Primary</a>
-<a href="#" class="secondary">Secondary</a>
-<a href="#" class="contrast">Contrast</a>
Blockquote:
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia
<blockquote>
-  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
-  Nam at dui sit amet ipsum cursus ornare."
-  <footer>
-    <cite>- Phasellus eget lacinia</cite>
-  </footer>
-</blockquote>
Code licensed MIT

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