Note
This is a community-driven successor to the Pico CSS framework with a few simple goals:
- Maintain
picominimally until its creator returns. - Focus exclusively on the
pico.cssversion, similar to how simple.css is maintained (for Sass version check @Yohn's fork instead). - Keep all net new features in https://github.com/anyblades/blades, shipped as
pico.blades.css— a drop-in compatible replacement forpico.css.
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à!
Now including all features from Blades CSS, shipped as pico.blades.css — a drop-in compatible replacement for pico.css.
Also, it includes various fixes for original @picocss/pico issues:
- 🛠️ #731: Allow to selectively unreduce motion like
[aria-busy="true"]does - 🐞 #670: Slow website picocss.com | box-shadow performance issues & PR#718
- 🛠️ #721: Possible duplicate of text-align property inside the same element selector
- 🐞 #701: Nav dropdowns display error with Firefox
- 🐞 #727: Fix dropdown summary ul offscreen | in Safari
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
There are 4 ways to get started with Pico+Blades CSS:
Download Pico+Blades and link css/pico.blades.css in the <head> of your website.
<link rel="stylesheet" href="css/pico.blades.min.css" />Alternatively, you can use jsDelivr CDN to link pico.blades.css:
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/@anyblades/pico@^2.2.0-beta/css/pico.blades.min.css
"/>npm install @anyblades/pico@beta @anyblades/bladesThen, import Pico+Blades into your CSS:
@import "@anyblades/pico";
@import "@anyblades/blades";<!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.blades.min.css" />
<title>Hello world!</title>
</head>
<body>
<main class="container">
<h1>Hello world!</h1>
</main>
</body>
</html>- Getting started
- Customization
- Layout
- Content
- Forms
- Components
- Utilities 🥷
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 many helpers or utility .classes, it requires CSS knowledge to build large projects.
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.
- https://github.com/anyblades/pico for the original Pico CSS framework fixes.
- https://github.com/anyblades/blades for net new features and ideas.
Licensed under the MIT License.