HN Explorer

Show HN: I started building yet another CSS framework (eternityforest.github.io)

13 points by eternityforest ↗ HN
I really wanted to move my automation server project to a proper framework instead of the current ad hoc nightmare of inline CSS and redundant classes... But nothing seemed quite right. None of them seem suitable for deep restyling without changing markup.

So, I took all the good parts of my current CSS, replaced the bad parts with things I liked from the most popular frameworks, then extracted it as a standalone library.

The whole thing is 17.5kb, without minifying or removing comments.

It starts with classless styles for semantic html. There is a very small set of about 5 components(The intent is to basically build everything with mostly just windows, cards, and toolbars), and a mix of high and low level utilities.

There's a 12 column grid(not a real CSS grid, trying to keep it all flexbox all the time, it's just simplegrid pared down even more), a very small collection of sizing primitives.

I don't like the whole w-1 through w-100 stuff with hundreds of classes, instead, I use heights from the Highly Composite Number sequence, that you probably already know from somewhere or other(1,2,4,6,12,24, 36, 48, 60).

For widths, instead of exact fixed widths, I have w-sm-full and w-sm-half. The semantics of it is "About the full width of a phone screen, but the theme can fudge it a bit".

The reasoning is that most of the time, I'm designing things to collapse down to a long string of 1 phonewidth cards, might as well have a class for it.

I use zero media queries, except for a single desktop-only class. Nothing in markup should have to think about mobile vs desktop.

This isn't even v0.1 yet, there are still bugs, but the skeleton is there, and I'm posting now to hopefully get some feedback early, so I can fix anything before it's hard to fix.

10 comments

[ 2.8 ms ] story [ 34.5 ms ] thread
graypegg
You have a goal in mind here (cleaning up your automation server’s styling) so with that in mind, any reason why other options didn’t work? Or starting with something like tailwind which has all of the hyper-boring single property .text-lg/.background-red/etc classes made for you. Could extend off of it with your own styles, but allow tweaking with tailwind.

Going even further, just tweaking with style= and writing inline css instead of the single value configuration classes.

If it’s just because it’s a fun challenge, also good :)

eternityforest
I looked at tailwind, but they're missing any kind of semantic classes, and I don't really want . background-red style classes.

My set of utility classes is mostly for things where the content or the layout inherently suggests some of the styling, but I'd rather do the actual visual details with semantic selectors.

Almost all my utility classes have to do with layout or sizing, and a lot of those are still as semantic as possible. .margin adds "some" amount of margin, but a theme can choose how much.

This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup.

Bootstrap was the one I spent the most time looking into, but I didn't like how the markup winds up really bloated, and you have to apply classes to basically every tag, and how they don't make use of HTML5 semantic elements.

Using button class="button" seems a little excessive for a ~50k line total project, maybe it makes more sense if you're building the next Trello or GitHub!

spdustin
> This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup.

If you're "in control" of the interface, and accessibility isn't a concern, have you considered just "making up" your UI elements? Like an old-school version of custom components [0]. If semantics is what you're after, and if you're running the UI in a browser kiosk mode, why limit yourself to HTML5?

[0]: https://codepen.io/spdustin/pen/VwgmXWw

eternityforest
Accessibility is a semi-concern, it's an open source app that someone theoretically might want to use for something accessible, but that's a really good idea. Doesn't get much more semantic than that!
eternityforest
Update since there's a time limit on editing: I correctly support dark mode!
quickthrower2
Nice. I end up using Tailwind because despite there being so many framework none quite hit the spot for me. I think it is because it is actually really hard to be semantic (or requires a lot of discipline) while achieving a good look. Tailwind basically shrugs and says “oh well just tie the style to the component” and even flattens out almost all existing semantic style provided by the browser defaults! Maybe you’ll build the “.css” that I will like.
eternityforest
Tailwind seems to really be taking over fast for sure. To some extent you might be right, it's just not easy to be semantic, this project makes plenty of compromises too.

Mostly-semantic is a lot easier though, "There should be padding on this" is a big step up from "I'm specifying exactly 6px right here in the markup".

smartis2812
In Microsoft Edge for Business - Version 118.0.2088.76 it seems not to work :(
eternityforest
Thanks for the info! What specifically is broken?

On doing some digging it seems AVIF not being supported in Edge might be the issue, shoulda thought more about that demo image!

I should probably do more testing on FF too, since it's derived from internal tools that never got used outside of Chrome.