Saturday, 4 November 2023

Show HN: I started building yet another CSS framework https://bit.ly/40qCkIP

Show HN: I started building yet another CSS framework 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. https://bit.ly/40q02Fh November 4, 2023 at 09:55AM

No comments:

Post a Comment