Classless CSS library Almond.css

From Alvaro Montoro: almond.css

This is one of those “classless” CSS libraries — CSS that you apply to semantic HTML to apply a nice look. You apply no classes or any other selectors — it totally removes that mental exercise. The only selectors it uses are HTML elements. A perfect sort of choice for things like “I just need to style this one-pager of HTML quick”, Markdown output, or dare I say, a demo Pen.

(Saw via Louis Lazaris‘ article Top Front-End Tools Of 2022 on Smashing Mag. It is interesting how these libraries are always quite popular in the context of Louis’ newsletter.)

There are other CSS libraries in this category that come to mind, like: Water.css, MVP.css, new.css, and AttriCSS.

Almond.css takes a cool approach that I haven’t seen before: it allows you to customize everything from adjusting --custom-properties at the root level.

So you can use it “totally raw”, like this:

Or customize stuff likes fonts, spacing, and colors like this:

:root {
  --font-family: system-ui;
  --font-weight-normal: 300;
  --font-weight-bold: 600;
  --line-height: 2;
  --heading-margin: 3rem 0 1rem 0;
  --primary: orangered;
}

The post Classless CSS library Almond.css appeared first on CodePen Blog.