PicoCSS - Technological watch

Minimal CSS Framework for semantic HTML

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

Problematic

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">
  </div>
  <button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">
    Action
  </button>
</form>

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:

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

Advantages

• 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.

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…

Example:

// 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 ⚫

Disadvantages

• 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