{"id":13399895,"url":"https://github.com/picocss/pico","last_synced_at":"2025-05-13T10:55:13.088Z","repository":{"id":37385116,"uuid":"221892711","full_name":"picocss/pico","owner":"picocss","description":"Minimal CSS Framework for semantic HTML","archived":false,"fork":false,"pushed_at":"2025-03-15T06:48:59.000Z","size":10428,"stargazers_count":14776,"open_issues_count":95,"forks_count":447,"subscribers_count":85,"default_branch":"main","last_synced_at":"2025-05-05T20:45:52.758Z","etag":null,"topics":["css","css-framework","dark-mode","dark-theme","lightweight","minimal","minimalist","minimalistic","native-html","scss","scss-framework","semantic"],"latest_commit_sha":null,"homepage":"https://picocss.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/picocss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-15T09:42:54.000Z","updated_at":"2025-05-05T18:13:27.000Z","dependencies_parsed_at":"2024-01-03T02:23:39.678Z","dependency_job_id":"9d5fe8f6-19af-45ab-9e77-f12aee33ea87","html_url":"https://github.com/picocss/pico","commit_stats":{"total_commits":453,"total_committers":43,"mean_commits":"10.534883720930232","dds":"0.17660044150110377","last_synced_commit":"5ce6840d493fbe9bffc967bad22f90d737362fa9"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picocss%2Fpico","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picocss%2Fpico/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picocss%2Fpico/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picocss%2Fpico/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picocss","download_url":"https://codeload.github.com/picocss/pico/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176668,"owners_count":21866185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","dark-mode","dark-theme","lightweight","minimal","minimalist","minimalistic","native-html","scss","scss-framework","semantic"],"created_at":"2024-07-30T19:00:44.761Z","updated_at":"2025-05-13T10:55:13.047Z","avatar_url":"https://github.com/picocss.png","language":"CSS","readme":"\u003cp\u003e\n  \u003ca href=\"https://picocss.com\" target=\"_blank\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg\"\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg\"\u003e\n      \u003cimg alt=\"Pico CSS\" src=\"https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg\" width=\"auto\" height=\"60\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad\u0026logo=github\u0026logoColor=white)](https://github.com/picocss/pico/releases/latest)\n[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)\n[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)\n[![X (formerly Twitter)](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social\u0026label=Follow%20%40picocss)](https://x.com/picocss)\n\n## Minimal CSS Framework for Semantic HTML\n\nA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.\n\nWrite HTML, Add Pico CSS, and Voilà!\n\n## What’s new in v2?\n\nPico 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.\n\n[Read more](https://picocss.com/docs/v2)\n\n## A Superpowered HTML Reset\n\nWith just the right amount of everything, Pico is great starting point for a clean and lightweight design system.\n\n- Class-light and Semantic\n- Great Styles with Just CSS\n- Responsive Everything\n- Light or Dark Mode\n- Easy Customization\n- Optimized Performance\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [Class-less version](#class-less-version)\n- [Limitations](#limitations)\n- [Documentation](#documentation)\n- [Browser Support](#browser-support)\n- [Contributing](#contributing)\n- [Copyright and license](#copyright-and-license)\n\n## Quick start\n\nThere are 4 ways to get started with pico.css:\n\n### Install manually\n\n[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `\u003chead\u003e` of your website.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/pico.min.css\"\u003e\n```\n\n### Usage from CDN\n\nAlternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\"\u003e\n```\n\n### Install with NPM\n\n```shell\nnpm install @picocss/pico\n```\n\nOr\n\n```shell\nyarn add @picocss/pico\n```\n\nThen, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):\n\n```SCSS\n@use \"pico\";\n```\n\n### Install with Composer\n\n```shell\ncomposer require picocss/pico\n```\n\n### Starter HTML template\n\n```HTML\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003cmeta name=\"color-scheme\" content=\"light dark\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/pico.min.css\"\u003e\n    \u003ctitle\u003eHello world!\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain class=\"container\"\u003e\n      \u003ch1\u003eHello world!\u003c/h1\u003e\n    \u003c/main\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Class-less version\n\nPico provides a `.classless` version.\n\nIn this version, `\u003cheader\u003e`, `\u003cmain\u003e`, and `\u003cfooter\u003e` inside `\u003cbody\u003e` act as containers to define a centered or a fluid viewport.\n\nUse the default `.classless` version if you need centered viewports:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css\"\n/\u003e\n```\n\nOr use the `.fluid.classless` version if you need a fluid container:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css\"\n\u003e\n```\n\nThen just write pure HTML, and it should look great:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003cmeta name=\"color-scheme\" content=\"light dark\"\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css\"\n    \u003e\n    \u003ctitle\u003eHello, world!\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain\u003e\n      \u003ch1\u003eHello, world!\u003c/h1\u003e\n    \u003c/main\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Limitations\n\nPico 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.\n\n[Read more](https://picocss.com/docs/usage-scenarios)\n\n## Documentation\n\n**Getting started**\n\n- [Quick start](https://picocss.com/docs)\n- [Version picker `New`](https://picocss.com/docs/version-picker)\n- [Color schemes](https://picocss.com/docs/color-schemes)\n- [Class-less version](https://picocss.com/docs/classless)\n- [Conditional styling `New`](https://picocss.com/docs/conditional)\n- [RTL](https://picocss.com/docs/rtl)\n\n**Customization**\n\n- [CSS Variables](https://picocss.com/docs/css-variables)\n- [Sass](https://picocss.com/docs/sass)\n- [Colors `New`](https://picocss.com/docs/colors)\n\n**Layout**\n\n- [Container](https://picocss.com/docs/container)\n- [Landmarks \u0026 section](https://picocss.com/docs/landmarks-section)\n- [Grid](https://picocss.com/docs/grid)\n- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)\n\n**Content**\n\n- [Typography](https://picocss.com/docs/typography)\n- [Link](https://picocss.com/docs/link)\n- [Button](https://picocss.com/docs/button)\n- [Table](https://picocss.com/docs/table)\n\n**Forms**\n\n- [Overview](https://picocss.com/docs/forms)\n- [Input](https://picocss.com/docs/forms/input)\n- [Textarea](https://picocss.com/docs/forms/textarea)\n- [Select](https://picocss.com/docs/forms/select)\n- [Checkboxes](https://picocss.com/docs/forms/checkboxes)\n- [Radios](https://picocss.com/docs/forms/radios)\n- [Switch](https://picocss.com/docs/forms/switch)\n- [Range](https://picocss.com/docs/forms/range)\n\n**Components**\n\n- [Accordion](https://picocss.com/docs/accordion)\n- [Card](https://picocss.com/docs/card)\n- [Dropdown](https://picocss.com/docs/dropdown)\n- [Group `New`](https://picocss.com/docs/group)\n- [Loading](https://picocss.com/docs/loading)\n- [Modal](https://picocss.com/docs/modal)\n- [Nav](https://picocss.com/docs/nav)\n- [Progress](https://picocss.com/docs/progress)\n- [Tooltip](https://picocss.com/docs/tooltip)\n\n**About**\n\n- [What’s new in v2?](https://picocss.com/docs/v2)\n- [Mission](https://picocss.com/docs/mission)\n- [Usage scenarios](https://picocss.com/docs/usage-scenarios)\n- [Brand](https://picocss.com/docs/brand)\n- [Built With](https://picocss.com/docs/built-with)\n\n## Browser Support\n\nPico 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.\n\n## Contributing\n\nIf you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).\n\n## Copyright and license\n\nLicensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).\n","funding_links":[],"categories":["CSS","SCSS","Class-less","前端开发框架及项目","Frameworks / Resources"],"sub_categories":["其他_文本生成、文本对话","P"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicocss%2Fpico","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicocss%2Fpico","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicocss%2Fpico/lists"}