Picocss

:web: :css:
Feb 18, 2026

Table of Contents

As a developer, I sometimes build small websites to demonstrate something or simply provide content. For my purpose, a minimal CSS framework offering basic styling is sufficient. Every time I start again, I search for a framework that looks good enough and start building. However, as I don't use the same framework across projects, it is difficult to maintain.

So, I took some time to look at which minimal framework I should use for my next projects or to rewrite older ones. I decided on picocss.

It comes in to version: a classless version with minimal functionality and components and a class version with more components and styling options. It offers optional color palettes and support for dark and light mode.

The "killer" feature is that picocss is actively maintained which is not the norm.

1. Integration into a website

Add the stylesheets for the classless version and the color palette to the header. The Google Noto font is used as the font of choice. 

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" >
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">

The framework applies directly to semantic HTML tags.

As CSS has gradually improved over time, most of the styling and some dynamic content can now be achieved using only CSS, without the need for Javascript or heavy frameworks.

For most layouts, flexbox is sufficient.

The website modern css lists a vast amount of examples where CSS can used more quickly and clean. 30secondsofcode and CSS backgrounds offer ideas for helpful and stylistic elements that can be achieved using CSS alone.

Although these notes mostly explain my rational for choosing picocss, please feel free to suggest improvements.