Show HN: Bolt.css – Another classless CSS library (opens in new tab)

After seeing so many classless css libraries pop up over the past few years I decided to make my own. Nothing too fancy with it but I like the style and will be using it on some other small projects. Open to feedback or opinions.

Here is small list of other "classless" CSS libraries I have found over the years

- https://github.com/andybrewer/mvp

- https://github.com/kognise/water.css

- https://github.com/xz/new.css

- https://github.com/vladocar/Basic.css

- https://github.com/oxalorg/sakura

- https://github.com/igoradamenko/awsm.css

- https://github.com/hawkz/gdcss

- https://github.com/emareg/classlesscss

- https://github.com/vincentdoerig/latex-css (disclaimer: I am the author)

Overwriting blue links with...blue links that fail WCAG2 and have no pseudo-classes.

Replacing the default down arrow in <details> with...a down arrow SVG.

Delete it from the page and the main changes are 1. no rounded corners 2. content can possibly be larger than 800px

What's the point of this "library?"

> Use it in other projects

That's the place not to use this. This is just "I think browser defaults should look like this." Use it in any other project and all these element-based rules have a different specificity than the class-based ones. Have fun!

A "classless CSS library" is just a stylesheet, isn't it?

These keep popping up again and again but are "generally" a terrible idea. At some point you'll need something that you imagined would for sure have an HTML tag and then the misery begins.

Looks decent, pretty minimalistic.

The form / input styles should use :focus-within instead of :hover to apply styles, using "power-user" keyboard navigation with tab and such doesn't correctly show what you have focused. I was pretty surprised by this - it's sloppy to add new input styles that give less information than the default browser styles about what is focused

Textarea removing the little "resize" widget in the bottom left is also pretty disappointing, being able to resize textareas so they're massive when you're typing in them and small when you're done with them is very convenient. For instance check out the comment box on HN, the small angled lines in the bottom right let you resize the box. I understand it can sometimes break layouts but it's not a good reason to remove it.

It's good you have used CSS vars for lots of configuration but I find the choices of 7px and 11px for (highlight-)border-radius to be strange, usually powers of 2 are all the rage these days

Inline text blocks look clean, I like those a lot

Maybe it was just in the German speaking world, but such projects were called "template" or "boilerplate" ~10 years ago. When did we start calling them libraries? It doesn't add any functionality as one might expect from a library, it 's just an opinionated change to the default CSS shipped by browsers. Not to say that this is a bad thing, I just disagree on the terminology.

I have been writing HTML for... 20 years? And I just learned there is a `meter` element that supports `high`, `low`, and `optimum`.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...

I knew about the other weird ones though.

Your styles for <mark> and <code> don’t look good when the element breaks across multiple lines. Thankfully there’s an easy fix, the relatively unknown {box-decoration-break: clone;}

The range/output that display 0 or 100 but don't touch the ends of the slide rubs me in a very wrong way. Besides, nice style.

This looks great on mobile Safari. Overflow-y scrolling inside the code block is a great touch. In fact the only real issue I see is the very last element, the range slider, for which the handles don’t fully reach either edge. Awesome job.

(I'm using MVP.css for my homepage)

Shouldn't have HTML a decent look out of the box?

TIL about <mark>, <meter>, and <progress>!

This is pretty neat. I loved it.

The designer's enemy.

I like it, nice work!

Finally we're reaching CSS communism