PHPackages yohn/picocss - 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. yohn/picocss ActiveLibrary yohn/picocss ============ Minimal CSS Framework for semantic HTML. 2.2.10(1y ago)173179[4 issues](https://github.com/Yohn/PicoCSS/issues)[2 PRs](https://github.com/Yohn/PicoCSS/pulls)MITCSSCI passing Since Nov 27Pushed 1y ago9 watchersCompare [ Source](https://github.com/Yohn/PicoCSS)[ Packagist](https://packagist.org/packages/yohn/picocss)[ Docs](https://github.com/Yohn/PicoCSS)[ Fund](http://cash.me/$yohnjohn84)[ GitHub Sponsors](https://github.com/Yohn)[ RSS](/packages/yohn-picocss/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (22)Used By (0) [ ![Pico CSS](https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg) ](https://picocss.com) [![Github release](https://camo.githubusercontent.com/15daa69cc676b6290795d0d8a2fad57a2d5b3b15ce6bef9bff18e389debb9876/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f596f686e2f5069636f4353533f636f6c6f723d303137322e6164266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.com/Yohn/PicoCSS/releases/latest)[![npm version](https://camo.githubusercontent.com/1944434d174d3f2e0f5b7069235c564f51340b608bf0a3adcb95a0528bfdaa13/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40796f686e732f7069636f6373733f636f6c6f723d303137326164)](https://www.npmjs.com/package/@yohns/picocss)[![License](https://camo.githubusercontent.com/6f88bb599c4091d8c2b5550065babba0ca3c6db4b5cda06fee50fc9d7373e757/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d253233303137326164)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md) Yohns Updated Version --------------------- [](#yohns-updated-version) I'm not sure if the original [Pico CSS](https://github.com/picocss/pico) repository is abandoned or not, but I really liked what they had to offer, and wanted to help not let this awesomely simple and easy to use front end framework disappear, so I merged as many of open pull requests that fixed some issues, and / or enhanced the project that were available at the time. I'll try to help keep it viable and do some bug fixes if any arise, and would always appreciate anyone elses help to continue keeping this alive! You can see the new features I, and many others have created pull requests for by going to [Yohns Pico CSS](https://yohn.github.io/PicoCSS). This page just has the demos of most of the features I have merged, or added to the project. Extras Built on top of PicoCSS ------------------------------ [](#extras-built-on-top-of-picocss) - [Alert, Confirm, and Prompt Dialogs](https://github.com/Yohn/PicoCSS-Datatables/blob/main/src/CustomDialog.js) (Will work on that more later, but it works good!) - [YoSelect](https://github.com/Yohn/YoSelect) Searchable `` options, with tagging, image support, and a lot more! - [PicoCSS-WYSIWYG](https://github.com/Yohn/PicoCSS-WYSIWYG) Simple editor wih card, accordion, image, links, lists, headers and more - [PicoCSS-Datatables](https://github.com/Yohn/PicoCSS-Datatables) Searchable, sortable, editable, filterable table data helper. - [PicoCSS-Tag-Select](https://github.com/Yohn/PicoCSS-Tag-Select) Simplier tag class to change a select tag into tags 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 a 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) 1. [Yohns Updated Version](#yohns-updated-version) 2. [Extras Built on top of PicoCSS](#extras-built-on-top-of-picocss) 3. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html) 4. [What’s new in v2?](#whats-new-in-v2) 5. [A Superpowered HTML Reset](#a-superpowered-html-reset) 6. [Table of contents](#table-of-contents) 7. [Quick start](#quick-start) 1. [Install manually](#install-manually) 2. [Usage from CDN](#usage-from-cdn) 3. [Install with NPM](#install-with-npm) 4. [Starter HTML template](#starter-html-template) 8. [Class-less version](#class-less-version) 9. [Limitations](#limitations) 10. [Documentation](#documentation) 11. [Browser Support](#browser-support) 12. [Contributing](#contributing) 13. [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/Yohn/PicoCSS/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/@yohns/picocss) to link pico.css. ``` ``` ### Install with NPM [](#install-with-npm) ``` npm i @yohns/picocss ``` Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use): ``` @use "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** - [Yohns Pico CSS Additions](https://yohn.github.io/PicoCSS/) - [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/Yohn/PicoCSS/blob/master/.github/CONTRIBUTING.md). Copyright and license --------------------- [](#copyright-and-license) Licensed under the [MIT License](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md). ### Health Score 37 — LowBetter than 83% of packages Maintenance45 Moderate activity, may be stable Popularity24 Limited adoption so far Community27 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 80.8% 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 ~5 days Total 14 Last Release 467d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5c53f441885ec90d8d6e547f4c9023da12f10229c3848059e19b6aba9be1859a?d=identicon)[Yohn](/maintainers/Yohn) --- Top Contributors [![lucaslarroche](https://avatars.githubusercontent.com/u/23470684?v=4)](https://github.com/lucaslarroche "lucaslarroche (835 commits)")[![Yohn](https://avatars.githubusercontent.com/u/2002591?v=4)](https://github.com/Yohn "Yohn (88 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (27 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)")[![jubishop](https://avatars.githubusercontent.com/u/13165?v=4)](https://github.com/jubishop "jubishop (3 commits)")[![remohammadi](https://avatars.githubusercontent.com/u/174137?v=4)](https://github.com/remohammadi "remohammadi (3 commits)")[![rbf](https://avatars.githubusercontent.com/u/807084?v=4)](https://github.com/rbf "rbf (3 commits)")[![trasparente](https://avatars.githubusercontent.com/u/5657516?v=4)](https://github.com/trasparente "trasparente (2 commits)")[![waldyrious](https://avatars.githubusercontent.com/u/478237?v=4)](https://github.com/waldyrious "waldyrious (2 commits)")[![wenkm](https://avatars.githubusercontent.com/u/3335540?v=4)](https://github.com/wenkm "wenkm (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)")[![Edwing123](https://avatars.githubusercontent.com/u/40911825?v=4)](https://github.com/Edwing123 "Edwing123 (2 commits)") --- Tags csscss-frameworkdark-modedark-themelightweightminimalminimalistnative-htmlpicopicocsssassscssscss-frameworksemanticcsssemanticlightweightminimalcss frameworkdark-modeminimalistminimalisticdark-themescss-frameworknative-html ### Embed Badge ![Health badge](/badges/yohn-picocss/health.svg) ``` [![Health](https://phpackages.com/badges/yohn-picocss/health.svg)](https://phpackages.com/packages/yohn-picocss) ``` ### Alternatives [picocss/pico Minimal CSS Framework for semantic HTML. 16.5k14.5k4](/packages/picocss-pico)[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) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)