PicoCSS - Technological watch

Learn what is PicoCSS in less than 5 minutes !
Tuesday, January 16, 2024

Minimal CSS Framework for semantic HTML

Elegant styles for all native HTML elements without .classes and dark mode automatically enabled.


Today, CSS frameworks like Bootstrap, Bulma or Tailwind are very hard to learn : You have a lot of classes to remember and write.

Here is an example:

<!-- Example of random CSS framework code -->
<form class="form form-modifier margin padding align">
<div class="input-wrapper input-wrapper-modifier margin padding">
<input type="text" class="input input-type-modifier input-style-modifier input-size-modifier">
<button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">

This code looks very ugly; there are a lot of CSS classes.

PicoCSS has an another approach ; it is a CSS framework without any class !


<!-- Example of PicoCSS code -->
<input type="text">
<button type="submit">Action</button>


  • PicoCSS is a class-less framework. The HTML code is simple now šŸ¤µšŸ». With it, you can build a website with basic template very quickly. You can find a few examples here: https://picocss.com/#examples

  • Easy to install šŸš€. You just have to extract a .zip file, and include it in the HTML like this:

<link rel="stylesheet" href="css/pico.min.css">

You can install it with npm and composer too.

Terminal window
npm install @picocss/pico
  • PicoCSS is very easy to use šŸ˜Ž. No learning curve. The documentation is well written. The code is simple to read.

  • Excellent to prototype projects šŸ¤–. PicoCSS offers a decent default design. You can customize the theme by changing CSS variables. It feels like a modernized version of the ā€œDefault Stylesā€, that all Browsers usually come with. It includes responsiveness, layouts, spacing, sizingā€¦


// Simple example to change the primary color of PicoCSS styles
:root {
--primary: #d81b60;
  • Lightweight šŸ“¦ (Less than 10 kB minified and gzipped)

  • Dark mode can be toggled for the HTML components āš«


  • As PicoCSS is class-less, styles are applied to HTML tags and not classes. It can reduce the flexibility of customization.
    • Not a choice for medium / big projects if customization is needed

Recommended articles