PHPackages picocss/pico - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. picocss/pico ActiveLibrary picocss/pico ============ Minimal CSS Framework for semantic HTML. v2.1.1(1y ago)16.5k14.5k↓45.2%497[88 issues](https://github.com/picocss/pico/issues)[29 PRs](https://github.com/picocss/pico/pulls)3MITCSSCI failing Since May 22Pushed 2mo ago80 watchersCompare [ Source](https://github.com/picocss/pico)[ Packagist](https://packagist.org/packages/picocss/pico)[ Docs](https://picocss.com)[ RSS](/packages/picocss-pico/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (34)Used By (3) [ ![Pico CSS](https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg) ](https://picocss.com) [![Github release](https://camo.githubusercontent.com/9dbbbc50c249fbc9a27d40af7d7f377ddece8183b4a189d5026509f3cb2c9632/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f7069636f6373732f7069636f3f636f6c6f723d303137326164266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.com/picocss/pico/releases/latest)[![npm version](https://camo.githubusercontent.com/fabd6f91f29b3e41d173dc68fd5e820cfd4a395714ae9ea3c02d4f720a14b7aa/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f407069636f6373732f7069636f3f636f6c6f723d303137326164)](https://www.npmjs.com/package/@picocss/pico)[![License](https://camo.githubusercontent.com/6f88bb599c4091d8c2b5550065babba0ca3c6db4b5cda06fee50fc9d7373e757/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d253233303137326164)](https://github.com/picocss/pico/blob/master/LICENSE.md)[![X (formerly Twitter)](https://camo.githubusercontent.com/8ccfe9a72b7fbcdaf61547c8d7a6d2d133d8821ce6213135525345a758c922f7/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f68747470732f747769747465722e636f6d2f7069636f6373732e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f772532302534307069636f637373)](https://x.com/picocss) Minimal CSS Framework for Semantic HTML --------------------------------------- [](#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? ----------------- [](#whats-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 ------------------------- [](#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 ----------------- [](#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 ----------- [](#quick-start) There are 4 ways to get started with pico.css: ### Install manually [](#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. ``` ``` ### Usage from CDN [](#usage-from-cdn) Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css. ``` ``` ### Install with NPM [](#install-with-npm) ``` npm install @picocss/pico ``` Or ``` yarn add @picocss/pico ``` Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use): ``` @use "pico"; ``` ### Install with Composer [](#install-with-composer) ``` composer require picocss/pico ``` ### Starter HTML template [](#starter-html-template) ``` Hello world! Hello world! ``` Class-less version ------------------ [](#class-less-version) Pico provides a `.classless` version. In this version, ``, ``, and `` inside `` act as containers to define a centered or a fluid viewport. Use the default `.classless` version if you need centered viewports: ``` ``` Or use the `.fluid.classless` version if you need a fluid container: ``` ``` Then just write pure HTML, and it should look great: ``` Hello, world! Hello, world! ``` Limitations ----------- [](#limitations) 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. [Read more](https://picocss.com/docs/usage-scenarios) Documentation ------------- [](#documentation) **Getting started** - [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** - [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** - [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) **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 --------------- [](#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 ------------ [](#contributing) 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 --------------------- [](#copyright-and-license) Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). ### Health Score 59 — FairBetter than 99% of packages Maintenance67 Regular maintenance activity Popularity61 Solid adoption and visibility Community42 Growing community involvement Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 91.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~39 days Recently: every ~94 days Total 27 Last Release 430d ago Major Versions v1.5.10 → v2.0.0-alpha12023-04-23 v1.5.11 → v2.0.0-rc22024-01-07 v1.5.12 → v2.0.02024-02-11 v1.5.13 → v2.0.42024-03-03 ### Community Maintainers ![](https://www.gravatar.com/avatar/8c88ca2b113fabc5f83a270749f417793435753ae134660206f740cd2edef67d?d=identicon)[picocss](/maintainers/picocss) --- Top Contributors [![lucaslarroche](https://avatars.githubusercontent.com/u/23470684?v=4)](https://github.com/lucaslarroche "lucaslarroche (874 commits)")[![KiranMantha](https://avatars.githubusercontent.com/u/13364465?v=4)](https://github.com/KiranMantha "KiranMantha (12 commits)")[![jelmerveen](https://avatars.githubusercontent.com/u/43730771?v=4)](https://github.com/jelmerveen "jelmerveen (9 commits)")[![FireIsGood](https://avatars.githubusercontent.com/u/109556932?v=4)](https://github.com/FireIsGood "FireIsGood (5 commits)")[![wenkeming](https://avatars.githubusercontent.com/u/8252267?v=4)](https://github.com/wenkeming "wenkeming (5 commits)")[![hayatbiralem](https://avatars.githubusercontent.com/u/2085468?v=4)](https://github.com/hayatbiralem "hayatbiralem (4 commits)")[![tusharnankani](https://avatars.githubusercontent.com/u/61280281?v=4)](https://github.com/tusharnankani "tusharnankani (4 commits)")[![rbf](https://avatars.githubusercontent.com/u/807084?v=4)](https://github.com/rbf "rbf (3 commits)")[![jubishop](https://avatars.githubusercontent.com/u/13165?v=4)](https://github.com/jubishop "jubishop (3 commits)")[![leomp12](https://avatars.githubusercontent.com/u/10326572?v=4)](https://github.com/leomp12 "leomp12 (2 commits)")[![Masa-Shin](https://avatars.githubusercontent.com/u/34234442?v=4)](https://github.com/Masa-Shin "Masa-Shin (2 commits)")[![nstringham](https://avatars.githubusercontent.com/u/44071655?v=4)](https://github.com/nstringham "nstringham (2 commits)")[![zgoda](https://avatars.githubusercontent.com/u/141999?v=4)](https://github.com/zgoda "zgoda (2 commits)")[![asbjornu](https://avatars.githubusercontent.com/u/12283?v=4)](https://github.com/asbjornu "asbjornu (2 commits)")[![autogenus](https://avatars.githubusercontent.com/u/40123042?v=4)](https://github.com/autogenus "autogenus (2 commits)")[![DavidSouther](https://avatars.githubusercontent.com/u/498712?v=4)](https://github.com/DavidSouther "DavidSouther (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![Edwing123](https://avatars.githubusercontent.com/u/40911825?v=4)](https://github.com/Edwing123 "Edwing123 (2 commits)")[![HerrBertling](https://avatars.githubusercontent.com/u/1827373?v=4)](https://github.com/HerrBertling "HerrBertling (2 commits)")[![Kaleidea](https://avatars.githubusercontent.com/u/74888177?v=4)](https://github.com/Kaleidea "Kaleidea (2 commits)") --- Tags csscss-frameworkdark-modedark-themelightweightminimalminimalistminimalisticnative-htmlscssscss-frameworksemanticcsssemanticlightweightminimalcss frameworkdark-modeminimalistminimalisticdark-themescss-frameworknative-html ### Embed Badge ![Health badge](/badges/picocss-pico/health.svg) ``` [![Health](https://phpackages.com/badges/picocss-pico/health.svg)](https://phpackages.com/packages/picocss-pico) ``` ### Alternatives [wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[composer/semver Version comparison library that offers utilities, version constraint parsing and validation. 3.3k489.6M672](/packages/composer-semver)[semantic/ui Semantic empowers designers and developers by creating a shared vocabulary for UI. 51.1k35.6k2](/packages/semantic-ui)[nunomaduro/termwind It's like Tailwind CSS, but for the console. 2.5k239.8M286](/packages/nunomaduro-termwind)[sabberworm/php-css-parser Parser for CSS Files written in PHP 1.8k191.2M65](/packages/sabberworm-php-css-parser)[matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M336](/packages/matthiasmullie-minify) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)