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.
Extremely simple static site generation (like Grandma used to bake in the 90s web). Either by hand with minimalist HTML or just taking the output directly from almost any Markdown/reStructuredText/Asciidoc/etc processor and generally only needing to add a single LINK tag at the top to one of these CSS files.
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.
For something like a personal website or blog this seems totally sufficient, though maybe a bit boring. I disagree that these kinds of projects are "generally a terrible idea."
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
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!
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;}
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.
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.
39 comments
[ 3.1 ms ] story [ 81.9 ms ] threadI have a few internal tools that use https://newcss.net/ and it is just a nice tool to have in your quiver.
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
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!
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...
I knew about the other weird ones though.
- 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)
By the way, why not mention the very well tuned Pico.css? https://picocss.com/examples/preview/
Most of these (including yours) can be compared easily there.
https://github.com/oxalorg/sakura/blob/master/src/bookmarkle...
with
https://mrcoles.com/bookmarklet/
edit: found this to be useful for testing https://dohliam.github.io/dropin-minimal-css/
Shouldn't have HTML a decent look out of the box?