Merge pull request #662 from picocss/dev

v2.1.1

.github/CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# Contributing to Pico
+
+Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls).
+
+## Bug reports
+
+The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
+- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead.
+- Please do not use the issue tracker for feature requests.  Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have.
+
+## Pull requests
+
+Good pull requests, patches, improvements, and new features are a fantastic help.
+
+**Please ask before starting work on any significant new features.**
+We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas).
+
+[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
+
+[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
+
+**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,21 @@
+---
+name: Bug report
+about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Pico CSS.
+---
+
+Please search for duplicate or closed issues first.
+  
+## Describe the issue
+  
+### Current Behavior
+A concise description of the bug.
+
+### Expected Behavior
+A concise description of what you expected.
+
+### Reproduction URL
+We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
+**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
+
+### Environment
+Example: OS, versions, browser details.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Get Help
+    url: https://github.com/picocss/pico/discussions/categories/help
+    about: If you can't get something to work the way you expect, open a question in our discussion forums.
+  - name: Feature Request
+    url: https://github.com/picocss/pico/discussions/categories/ideas
+    about: Suggest any ideas you have using our discussion forums.

.github/logo-dark.svg

@@ -0,0 +1,27 @@
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    :root {
+      --pico-logo-wordmark: #fff;
+      --pico-logo-small-sparkles: #ff9500;
+      --pico-logo-big-sparkle: #ffbf00;
+    }
+    .pico-logo-wordmark {
+      fill: var(--pico-logo-wordmark);
+    }
+    .pico-logo-small-sparkles {
+      fill: var(--pico-logo-small-sparkles);
+    }
+    .pico-logo-big-sparkle {
+      fill: var(--pico-logo-big-sparkle);
+    }
+  </style>
+  <path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
+  <path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
+  <path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
+  <g class="pico-logo-wordmark">
+    <path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
+    <path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
+    <path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
+    <path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
+  </g>
+</svg>

.github/logo-light.svg

@@ -0,0 +1,27 @@
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    :root {
+      --pico-logo-wordmark: #2a3140;
+      --pico-logo-small-sparkles: #ffbf00;
+      --pico-logo-big-sparkle: #ff9500;
+    }
+    .pico-logo-wordmark {
+      fill: var(--pico-logo-wordmark);
+    }
+    .pico-logo-small-sparkles {
+      fill: var(--pico-logo-small-sparkles);
+    }
+    .pico-logo-big-sparkle {
+      fill: var(--pico-logo-big-sparkle);
+    }
+  </style>
+  <path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
+  <path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
+  <path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
+  <g class="pico-logo-wordmark">
+    <path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
+    <path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
+    <path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
+    <path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
+  </g>
+</svg>

.gitignore

@@ -1,4 +1,32 @@
-*.DS_Store
-TODO.md
-prepros-6.config
-test.html
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+/.vscode/
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.vi
+*.zip
+*~
+
+# Folders to ignore
+/node_modules/
+
+# Pico
+.pico

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2021 Pico
+Copyright (c) 2019-2024 Pico
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,88 +1,137 @@
-<p align="center">
-  <a href="https://picocss.com/">
-    <img src="https://picocss.com/img/logo.svg" width="64" height="64">
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
   </a>
 </p>
 
-<h3 align="center">Pico.css</h3>
+[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
+[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)
+[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+[![X (formerly Twitter)](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://x.com/picocss)
 
-<p align="center">
-  <strong>Graceful & Minimal CSS design system in pure semantic HTML.</strong><br>
-  Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
-  <a href="https://picocss.com/#examples">Examples</a> ·
-  <a href="https://picocss.com/docs/">Documentation</a>
-</p>
+## Minimal CSS Framework for Semantic HTML
 
-## Pico.css
-[![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
-[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
-[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
-[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
 
-**Class-light and semantic**  
-We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
+Write HTML, Add Pico CSS, and Voilà!
 
-**Great styles with just one CSS file**  
-No dependencies, package manager, external files or JavaScript.
+## What’s new in v2?
 
-**Responsive everything**  
-Elegant and consistent adaptatives spacings and typography on all devices.
+Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
 
-**Light or Dark mode**  
-Shipped with two beautiful color themes, automatically enabled according to the user preference.
+[Read more](https://picocss.com/docs/v2)
+
+## A Superpowered HTML Reset
+
+With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
+
+- Class-light and Semantic
+- Great Styles with Just CSS
+- Responsive Everything
+- Light or Dark Mode
+- Easy Customization
+- Optimized Performance
 
 ## Table of contents
 
-- [Usage](#usage)
+- [Quick start](#quick-start)
 - [Class-less version](#class-less-version)
-- [Examples](#examples)
+- [Limitations](#limitations)
 - [Documentation](#documentation)
-- [Variations](#variations)
+- [Browser Support](#browser-support)
 - [Contributing](#contributing)
 - [Copyright and license](#copyright-and-license)
 
-## Usage
+## Quick start
 
-There are 3 ways to get started with pico.css:
+There are 4 ways to get started with pico.css:
 
-**Install manually**
+### Install manually
 
-[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.
+[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
 
 ```html
 <link rel="stylesheet" href="css/pico.min.css">
 ```
 
-**Install from CDN**
+### Usage from CDN
 
-Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
+Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 ```
 
-**Install with NPM**
+### Install with NPM
 
 ```shell
 npm install @picocss/pico
 ```
 
+Or
+
+```shell
+yarn add @picocss/pico
+```
+
+Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):
+
+```SCSS
+@use "pico";
+```
+
+### Install with Composer
+
+```shell
+composer require picocss/pico
+```
+
+### Starter HTML template
+
+```HTML
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello world!</h1>
+    </main>
+  </body>
+</html>
+```
+
 ## Class-less version
 
-Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
+Pico provides a `.classless` version.
 
-In this version, `header`, `main` and `footer` act as container.
+In this version, `<header>`, `<main>`, and `<footer>` inside `<body>` act as containers to define a centered or a fluid viewport.
 
-Use the default `.classless `version if you need centered viewports:
+Use the default `.classless` version if you need centered viewports:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+/>
 ```
 
 Or use the `.fluid.classless` version if you need a fluid container:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
+>
 ```
 
 Then just write pure HTML, and it should look great:
@@ -93,7 +142,11 @@ Then just write pure HTML, and it should look great:
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+    <meta name="color-scheme" content="light dark">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+    >
     <title>Hello, world!</title>
   </head>
   <body>
@@ -104,80 +157,82 @@ Then just write pure HTML, and it should look great:
 </html>
 ```
 
-## Examples
+## Limitations
 
-Minimalist templates to discover Pico in action:
+Pico CSS can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
 
-[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
-
-- **[Preview](https://picocss.com/examples/preview/)**  
-  A starter example with all elements and components used in Pico
-
-- **[Class-less](https://picocss.com/examples/classless/)**  
-  Just a pure semantic HTML markup, without `.classes`
-
-- **[Basic template](https://picocss.com/examples/basic-template/)**  
-  A basic custom template for Pico using only CSS custom properties (variables)
-
-- **[Company](https://picocss.com/examples/company/)**  
-  A classic company or blog layout with a sidebar
-
-- **[Google Amp](https://picocss.com/examples/google-amp/)**   
-  A simple layout for Google Amp, with inlined CSS
-
-- **[Sign in](https://picocss.com/examples/sign-in/)**  
-  A minimalist layout for Login pages
-
-- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**  
-  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
-
-All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
+[Read more](https://picocss.com/docs/usage-scenarios)
 
 ## Documentation
 
 **Getting started**
-- [Usage](https://picocss.com/docs/#start)
-- [Themes](https://picocss.com/docs/#themes)
-- [Customization](https://picocss.com/docs/#customization)
-- [Class-less version](https://picocss.com/docs/#classless)
+
+- [Quick start](https://picocss.com/docs)
+- [Version picker `New`](https://picocss.com/docs/version-picker)
+- [Color schemes](https://picocss.com/docs/color-schemes)
+- [Class-less version](https://picocss.com/docs/classless)
+- [Conditional styling `New`](https://picocss.com/docs/conditional)
+- [RTL](https://picocss.com/docs/rtl)
+
+**Customization**
+
+- [CSS Variables](https://picocss.com/docs/css-variables)
+- [Sass](https://picocss.com/docs/sass)
+- [Colors `New`](https://picocss.com/docs/colors)
 
 **Layout**
-- [Containers](https://picocss.com/docs/#containers)
-- [Grids](https://picocss.com/docs/#grids)
-- [Horizontal scroller](https://picocss.com/docs/#scroller)
 
-**Elements**
-- [Typography](https://picocss.com/docs/#typography)
-- [Buttons](https://picocss.com/docs/#buttons)
-- [Forms](https://picocss.com/docs/#forms)
-- [Tables](https://picocss.com/docs/#tables)
+- [Container](https://picocss.com/docs/container)
+- [Landmarks & section](https://picocss.com/docs/landmarks-section)
+- [Grid](https://picocss.com/docs/grid)
+- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)
 
+**Content**
+
+- [Typography](https://picocss.com/docs/typography)
+- [Link](https://picocss.com/docs/link)
+- [Button](https://picocss.com/docs/button)
+- [Table](https://picocss.com/docs/table)
+
+**Forms**
+
+- [Overview](https://picocss.com/docs/forms)
+- [Input](https://picocss.com/docs/forms/input)
+- [Textarea](https://picocss.com/docs/forms/textarea)
+- [Select](https://picocss.com/docs/forms/select)
+- [Checkboxes](https://picocss.com/docs/forms/checkboxes)
+- [Radios](https://picocss.com/docs/forms/radios)
+- [Switch](https://picocss.com/docs/forms/switch)
+- [Range](https://picocss.com/docs/forms/range)
 
 **Components**
-- [Accordions](https://picocss.com/docs/#accordions)
-- [Cards](https://picocss.com/docs/#cards)
-- [Navs](https://picocss.com/docs/#navs)
-- [Progress](https://picocss.com/docs/#progress)
-- [Tooltips](https://picocss.com/docs/#tooltips)
 
-## Variations
+- [Accordion](https://picocss.com/docs/accordion)
+- [Card](https://picocss.com/docs/card)
+- [Dropdown](https://picocss.com/docs/dropdown)
+- [Group `New`](https://picocss.com/docs/group)
+- [Loading](https://picocss.com/docs/loading)
+- [Modal](https://picocss.com/docs/modal)
+- [Nav](https://picocss.com/docs/nav)
+- [Progress](https://picocss.com/docs/progress)
+- [Tooltip](https://picocss.com/docs/tooltip)
 
-| Variation | Minified CSS | Source | Example |
-|:-----|:-----|:-----|:-----|
-| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
-| Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss)  | [Classless](https://picocss.com/examples/classless/) |
-| Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
-| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
-| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
-| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
+**About**
+
+- [What’s new in v2?](https://picocss.com/docs/v2)
+- [Mission](https://picocss.com/docs/mission)
+- [Usage scenarios](https://picocss.com/docs/usage-scenarios)
+- [Brand](https://picocss.com/docs/brand)
+- [Built With](https://picocss.com/docs/built-with)
+
+## Browser Support
+
+Pico CSS 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.
 
 ## Contributing
 
-- [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
-- Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
+If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
 
 ## Copyright and license
 
 Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
-
-Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/).

composer.json

@@ -0,0 +1,30 @@
+{
+  "name": "picocss/pico",
+  "description": "Minimal CSS Framework for semantic HTML.",
+  "keywords": [
+    "css",
+    "css-framework",
+    "dark-mode",
+    "dark-theme",
+    "lightweight",
+    "minimal",
+    "minimalist",
+    "minimalistic",
+    "native-html",
+    "scss-framework",
+    "semantic"
+  ],
+  "homepage": "https://picocss.com",
+  "authors": [
+    {
+      "name": "Lucas Larroche",
+      "email": "lucas@larroche.com",
+      "homepage": "https://lucaslarroche.com",
+      "role": "Developer"
+    }
+  ],
+  "support": {
+    "issues": "https://github.com/picocss/pico/issues/"
+  },
+  "license": "MIT"
+}