Repository: picocss/pico Branch: main Commit: 1039a4788d6a Files: 185 Total size: 9.9 MB Directory structure: gitextract_oiadxwwi/ ├── .github/ │ ├── CONTRIBUTING.md │ └── ISSUE_TEMPLATE/ │ ├── bug_report.md │ └── config.yml ├── .gitignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── composer.json ├── css/ │ ├── pico.amber.css │ ├── pico.blue.css │ ├── pico.classless.amber.css │ ├── pico.classless.blue.css │ ├── pico.classless.conditional.amber.css │ ├── pico.classless.conditional.blue.css │ ├── pico.classless.conditional.cyan.css │ ├── pico.classless.conditional.fuchsia.css │ ├── pico.classless.conditional.green.css │ ├── pico.classless.conditional.grey.css │ ├── pico.classless.conditional.indigo.css │ ├── pico.classless.conditional.jade.css │ ├── pico.classless.conditional.lime.css │ ├── pico.classless.conditional.orange.css │ ├── pico.classless.conditional.pink.css │ ├── pico.classless.conditional.pumpkin.css │ ├── pico.classless.conditional.purple.css │ ├── pico.classless.conditional.red.css │ ├── pico.classless.conditional.sand.css │ ├── pico.classless.conditional.slate.css │ ├── pico.classless.conditional.violet.css │ ├── pico.classless.conditional.yellow.css │ ├── pico.classless.conditional.zinc.css │ ├── pico.classless.css │ ├── pico.classless.cyan.css │ ├── pico.classless.fuchsia.css │ ├── pico.classless.green.css │ ├── pico.classless.grey.css │ ├── pico.classless.indigo.css │ ├── pico.classless.jade.css │ ├── pico.classless.lime.css │ ├── pico.classless.orange.css │ ├── pico.classless.pink.css │ ├── pico.classless.pumpkin.css │ ├── pico.classless.purple.css │ ├── pico.classless.red.css │ ├── pico.classless.sand.css │ ├── pico.classless.slate.css │ ├── pico.classless.violet.css │ ├── pico.classless.yellow.css │ ├── pico.classless.zinc.css │ ├── pico.colors.css │ ├── pico.conditional.amber.css │ ├── pico.conditional.blue.css │ ├── pico.conditional.css │ ├── pico.conditional.cyan.css │ ├── pico.conditional.fuchsia.css │ ├── pico.conditional.green.css │ ├── pico.conditional.grey.css │ ├── pico.conditional.indigo.css │ ├── pico.conditional.jade.css │ ├── pico.conditional.lime.css │ ├── pico.conditional.orange.css │ ├── pico.conditional.pink.css │ ├── pico.conditional.pumpkin.css │ ├── pico.conditional.purple.css │ ├── pico.conditional.red.css │ ├── pico.conditional.sand.css │ ├── pico.conditional.slate.css │ ├── pico.conditional.violet.css │ ├── pico.conditional.yellow.css │ ├── pico.conditional.zinc.css │ ├── pico.css │ ├── pico.cyan.css │ ├── pico.fluid.classless.amber.css │ ├── pico.fluid.classless.blue.css │ ├── pico.fluid.classless.conditional.amber.css │ ├── pico.fluid.classless.conditional.blue.css │ ├── pico.fluid.classless.conditional.cyan.css │ ├── pico.fluid.classless.conditional.fuchsia.css │ ├── pico.fluid.classless.conditional.green.css │ ├── pico.fluid.classless.conditional.grey.css │ ├── pico.fluid.classless.conditional.indigo.css │ ├── pico.fluid.classless.conditional.jade.css │ ├── pico.fluid.classless.conditional.lime.css │ ├── pico.fluid.classless.conditional.orange.css │ ├── pico.fluid.classless.conditional.pink.css │ ├── pico.fluid.classless.conditional.pumpkin.css │ ├── pico.fluid.classless.conditional.purple.css │ ├── pico.fluid.classless.conditional.red.css │ ├── pico.fluid.classless.conditional.sand.css │ ├── pico.fluid.classless.conditional.slate.css │ ├── pico.fluid.classless.conditional.violet.css │ ├── pico.fluid.classless.conditional.yellow.css │ ├── pico.fluid.classless.conditional.zinc.css │ ├── pico.fluid.classless.css │ ├── pico.fluid.classless.cyan.css │ ├── pico.fluid.classless.fuchsia.css │ ├── pico.fluid.classless.green.css │ ├── pico.fluid.classless.grey.css │ ├── pico.fluid.classless.indigo.css │ ├── pico.fluid.classless.jade.css │ ├── pico.fluid.classless.lime.css │ ├── pico.fluid.classless.orange.css │ ├── pico.fluid.classless.pink.css │ ├── pico.fluid.classless.pumpkin.css │ ├── pico.fluid.classless.purple.css │ ├── pico.fluid.classless.red.css │ ├── pico.fluid.classless.sand.css │ ├── pico.fluid.classless.slate.css │ ├── pico.fluid.classless.violet.css │ ├── pico.fluid.classless.yellow.css │ ├── pico.fluid.classless.zinc.css │ ├── pico.fuchsia.css │ ├── pico.green.css │ ├── pico.grey.css │ ├── pico.indigo.css │ ├── pico.jade.css │ ├── pico.lime.css │ ├── pico.orange.css │ ├── pico.pink.css │ ├── pico.pumpkin.css │ ├── pico.purple.css │ ├── pico.red.css │ ├── pico.sand.css │ ├── pico.slate.css │ ├── pico.violet.css │ ├── pico.yellow.css │ ├── pico.zinc.css │ └── postcss.config.js ├── package.json ├── scripts/ │ └── build-themes.js └── scss/ ├── _index.scss ├── _settings.scss ├── colors/ │ ├── _index.scss │ └── utilities/ │ ├── _background-colors.scss │ ├── _colors.scss │ ├── _css-vars.scss │ ├── _index.scss │ ├── _settings.scss │ └── _utils.scss ├── components/ │ ├── _accordion.scss │ ├── _card.scss │ ├── _dropdown.scss │ ├── _group.scss │ ├── _loading.scss │ ├── _modal.scss │ ├── _nav.scss │ ├── _progress.scss │ └── _tooltip.scss ├── content/ │ ├── _button.scss │ ├── _code.scss │ ├── _embedded.scss │ ├── _figure.scss │ ├── _link.scss │ ├── _misc.scss │ ├── _table.scss │ └── _typography.scss ├── forms/ │ ├── _basics.scss │ ├── _checkbox-radio-switch.scss │ ├── _input-color.scss │ ├── _input-date.scss │ ├── _input-file.scss │ ├── _input-range.scss │ └── _input-search.scss ├── helpers/ │ ├── _copyright.scss │ └── _functions.scss ├── layout/ │ ├── _container.scss │ ├── _document.scss │ ├── _grid.scss │ ├── _landmarks.scss │ ├── _overflow-auto.scss │ └── _section.scss ├── pico.classless.scss ├── pico.colors.scss ├── pico.conditional.scss ├── pico.fluid.classless.scss ├── pico.scss ├── postcss.config.js ├── themes/ │ ├── _default.scss │ └── default/ │ ├── _dark.scss │ ├── _light.scss │ ├── _schemes.scss │ ├── _styles.scss │ └── _theme-colors.scss └── utilities/ ├── _accessibility.scss └── _reduce-motion.scss ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/CONTRIBUTING.md ================================================ # 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`. ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- 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. ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ 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. ================================================ FILE: .gitignore ================================================ # 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 ================================================ FILE: .prettierrc ================================================ { "printWidth": 100 } ================================================ FILE: LICENSE.md ================================================ MIT License 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 in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

Pico CSS

[![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) ## Minimal CSS Framework for Semantic HTML A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! ## What’s new in v2? 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. [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 - [Quick start](#quick-start) - [Class-less version](#class-less-version) - [Limitations](#limitations) - [Documentation](#documentation) - [Browser Support](#browser-support) - [Contributing](#contributing) - [Copyright and license](#copyright-and-license) ## Quick start There are 4 ways to get started with pico.css: ### Install manually [Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `` of your website. ```html ``` ### Usage from CDN Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css. ```html ``` ### 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 Hello world!

Hello world!

``` ## Class-less version Pico provides a `.classless` version. In this version, `
`, `
`, and `