Show HN: magick.css – Minimalist CSS for Wizards
css.winterveil.netThis is an absolutely beautiful design system, and a beautiful way of presenting one. I love the interplay of the organic serifs and handwritten script for inputs, with all the attention to detail for balanced line heights and weights.
Code for those interested: https://github.com/wintermute-cell/magick.css/blob/master/ma...
Wish there were custom checkboxes and radio buttons - they're the only thing that break immersion at the moment! Everything else is absolutely stellar. Might inspire me to finally make that blog I've been thinking about!
This is a great example of how a font can really compliment the style you're going for. It fits so well that you hardly notice it at all.
The font doesn't seem that great to me. Not sure exactly why but while it's not quite difficult for me to read, it's not as easy as other common fonts.
You are welcome to use vanilla frameworks for a generic looking site. This is clearly intended as a thematic look.
Yes, but it shouldn't be to the point that it gets in the way of the content. But I'm not a web designer and I'm not the intended audience. Still, I like to click through to interesting (to me) things and check them out. The typeface kept me from investigating as far as I normally might.
Why can't I use this one? I don't see anything mentioned about the font being required or even part of it.
I think that's kind of the whole point. It is introducing an ambience, it is deliberately made quirky and irregular like the handwriting of some. It is not a common font and that means our eyes are going to be slightly unused to reading it.
The font is fine, it's the line-height that is wrong: the text is a bit too squished
Oh I see what you mean
Style yes, but I find it so hard to read.
There’s a little typo in the simple example:
<main>
<header> </header>
<section> </section>
<section> </section>
<section> </section>
<footer> </footer>
</header>
If we are going to add some notes...
I appreciate it if sites demoing their CSS embed the non-minimized version. I wanted to take a quick peek at what it looked like, but instead I have to go through a few additional hops to grab the source. Or at least just a clickable link directly to the unprocessed form.
I use the <article> tag for the main content of the page, and then <section> for related but extra content, such as the comments section, tags, etc.
Another thing, semantically - the HEADER and FOOTER should go before & after, respectively, the MAIN tag
I was curious so I checked. According to MDN:
> Permitted parents: Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element
I think you can use a header more or less anywhere, and it is a header for content contained by its parent.
I think it is more related to whether your header and footer are actually the main content of your page, which may vary from page to page.
Good point. Apparently (MDN) there should only be 1 main on a page, and it should not include sidebars, generic headers/footers repeated on other pages, etc.
So, you might have a site-wide header, a main containing a content-specific header / content / footer, and then a site-wide footer.
Not sure how useful that would be, but interesting to me as a sometime web hacker.
this, mixed with the look of a LaTeX document is exactly the kind of vibe I'm looking to go with for my personal site as well. Something just so appealing about it to me.
that, and the ultra-minimal look of websites of old university professors (basically just html and nothing else) looks so cool to me.
i wish personal blogs were more popular!
People who like this may also enjoy Tufte CSS (https://edwardtufte.github.io/tufte-css/).
I am glad Tufte emphasizes tight integration between images and text, a reasonable style choice that certain TeX purists refuse to acknowledge. In my writings at least, technical or otherwise, images and text are part of one continuous narrative; it makes no more sense to reorder and relocate my images than to do so to my paragraphs.
No. Please don't put script fonts in uppercase. It's absolute death to readability.
Actually don't put anything in uppercase - like underlining, it's a form of emphasis that has its origins in typewriters, which were locked to one typeface.
The uppercase letterforms are too similar -- there is no variation in the heights of the letters, so your eye finds it harder to read. Upper and lower case, you have letters like y and p and j which have descenders; b and d and t who have ascenders, and the variation is easier to parse.
For emphasis, please use size, weight, and italics.
Thank you.
Hmm, yes, this does break a rule of legibility. It's harder to read than it could be.
However, in doing so, it also creates a distinctive style.
I think I like it.
My general rule is, if Reader Mode improves your site, your site is a failure.
That's fine for you.
My general rule is less draconian and more receptive to aesthetic experimentation.
I wish there were more of the minimalist CSS frameworks with opinionated styling. Easy to find very nice generic ones, but harder if you want one with some flavor.
Try Tufte CSS:
When remote fonts are blocked, the text is rendered with Comic Sans. Not a good look.
Comic sans hate is so passé.
And when font selection by a web page is disallowed altogether, it is rendered with my preferred font, but with a reduced font-weight, slightly increased font-size, and increased line-height. The low weight in particular, combined with it picking up the dark theme, makes the text rather uncomfortable to read.
I'm a bit annoyed to realize my current setup isn't blocking google fonts. I usually block things like that at the /etc/hosts level.
OK, hear me out. Times New Comic.
Or is it the best look?
It was the best of looks, it was the worst of looks, it was the Sans of Comics~
It was the blurst of looks...
Why do all css frameworks and design systems hate text inputs so much?
Here: Instead of using common sense Google ended up doing a user study with 800 participants to arrive at the conclusion that text inputs must look like text inputs https://medium.com/google-design/the-evolution-of-material-d...
I love the idea of (mostly) classless css frameworks. I tried to make one a while ago but it's probably not as good: https://elementcss.neocities.org
i must confess: Element is my goto classless framework, thanks for making it!
Thanks! If you have any feedback or ideas feel free to let me know. I don't put a lot of time into it because I'm not sure what I would change at this point.
The fonts here are superb, I found the page to be highly readable and absolutely cute without being over the top. Delightful :)
I was scrolling down expecting to be surprised by a sudden outburst of color, but instead I was pleased that the structure just remained consistent and readable, and monochrome was a deliberate and pleasing aesthetic. Well done!
It’s funny because I was kind of hoping for the opposite when it came to the code blocks. I find that color syntax highlighting makes code blocks much easier to read.
Really interesting. One thing I particularly appreciate is how it is fully commented and you can decide only to extract the parts that you need. The part to add line numbers to code looks very nicely done!
It love it.
For the hell of it, I looked at the Chinese translation offered in the nav. I can’t read Chinese, so I wonder what someone who can read it thinks, but it looks very cluttered to me. (I know font options are very limited compared to English.) Interestingly, it also uses different photos.
this reminds me of https://alistapart.com/
Beautiful. Classless needs to become the standard for CSS libraries. I'm tired of learning your DSL to center a div. Just make the HTML do what I expect it to.
I updated my small Vue template site to use this instead of new.css as a little refresh! Thank you for sharing.
Love this. Classless styling can offer so much, especially in the context of document-driven websites.
Starred, love this. I’m looking for something more than a reset but less than a framework on something at the moment and this is on my shortlist of places to look for inspiration about what modern advanced CSS looks like.
Is there a central place for in-the-know CSS wizards to post and discuss their most recent next level demo?
Years ago there was something called like CSS Zen Garden or something but times have moved on I think.
> CSS Zen Garden
Wow, you just stirred some ancient memories!
Is there not a privacy-respecting font-host besides google? A lot of privacy/ad focused extensions will block these.
I love classless CSS frameworks, but I think it's a pity that there are only so few that use serif fonts. I'm grateful for any links if anybody has some hints.
Semantic HTML[1] and Tufte style, all in one[2] CDN'd file. Me likey.
[1] <aside> at least
[2] Not counting normalize.css
Truly beautiful!
These are always hard to get right, but this one is compelling.
Something really nice about the typography?
I love this. I'm using this.
oh i collect these!
- https://andybrewer.github.io/mvp/ mvp.css
- https://yegor256.github.io/tacit/
- https://github.com/alvaromontoro/almond.css has thin fonts
- https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
- https://simplecss.org/demo 4kb incl dark mode
- https://watercss.kognise.dev/ Small size (< 2kb)
- https://github.com/xz/new.css (https://newcss.net/) 4.8kb
- https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming.
- https://github.com/susam/spcss
- https://neat.joeldare.com/ https://github.com/codazoda/neatcss
- https://concrete.style/ Tiny (< 1kb)
- https://github.com/zichy/fieber (new, wants feedback)
- https://mikemai.net/typesettings/index.html (new)
for more: https://github.com/swyxio/spark-joy/blob/master/README.md#no...
Damn, should edit this to include a header like "list of minimal CSS frameworks" so that it becomes searchable for folks looking for something like this.
youve just done that !
Huzzah! Neat CSS made your list. I created that and use it for all my projects (to indirectly answer the other reply to your comment).
Last week I started a new site about strategies I use for my prolific note writing: https://notes.joeldare.com
shoutout to https://picocss.com
Have you ever actually used one in production. Curious BC I used to do the same thing.
yup! very handy for demos
That typesettings one has a confusing license. GitHub says MIT, the linked page says commercial use not allowed.
Can you make this list a GitHub repository called “Awesome classless CSS”
https://github.com/dbohdan/classless-css is one list and https://dohliam.github.io/dropin-minimal-css/ is a nice site to preview many
swyx already has one: https://github.com/swyxio/spark-joy?tab=readme-ov-file#fun-c...
one of my favourites: https://latex.vercel.app/
This seems less like a CSS framework and more like an article theme. Maybe I misunderstand the common definition of "CSS framework".
"CSS framework" is just a fancy way of saying "CSS library".
Is it typical for these frameworks to link to Google fonts in them?
It seems like a privacy/tracking issue, or am I offbase?
They’re pretty easy to serve from local: https://github.com/radekg/google-font-download. Most of individual fonts available in google fonts are SIL OFL 1.1:
> The SIL Open Font License (or OFL in short) is one of the major open font licenses, which allows embedding, or "bundling", of the font in commercially sold products. OFL is a free and open source license.
https://en.m.wikipedia.org/wiki/SIL_Open_Font_License#:~:tex....
That is a tremendously useful utility. Only annoyed they do not provide builds so I am going to have to install the Go tooling and/or re-implement my own half-baked version.
That’s a pretty unfair thing to get annoyed about when someone is providing you software for free.
Worst case scenario, build it yourself inside on of the official Go docker containers.
> It seems like a privacy/tracking issue, or am I offbase?
It absolutely is, and if you do include them you have to show a consent popup in the EU.
If you care about privacy/tracking in 2024 there are basically two paths (not mutually exclusive):
1. Fight it at the polling booth and support things like the EFF.
2. Become a hard target for anyone but advanced actors with you on their short list.
Door #2 depends on what you mean by “advanced actor”, short of being Moxie Marlinspike or something, if Cozy Bear or 8800 or TAO/Equation Group wants you, they’re gonna get you. They’ve got people posing as employees in all the big shops (which to their credit have whole teams devoted to finding and ejecting them but with a clean passport long-term planning it’s an uphill fight).
As with all security, it’s a numbers game that comes down to three key principles:
1. Make the default flow the secure flow.
2. Decide who you trust to get the details right that your adversary understands better than you do.
3. Have multiple layers of security drawn from the list you get from #2.
My infosec story is still a mess, but it’s starting to become a known mess that I’m cleaning up in an organized way.
On #2: I trust Brad Fitzpatrick so I trust TailScale and run it everywhere. I trust Moxie so I trust Signal. I trust Proton for a few reasons, not least of which is that Reddit and Google and Meta and many, many others give you a bunch of grief coming in off a ProtonVPN exit node: Reddit won’t even let you connect, Google hits you with wild levels of CAPTCHA on e.g. Workspace OpenID connect, and Meta superficially connects but breaks in weird ways it shouldn’t even by “post laid everyone off” standards.
Brave is my compromise between usability and privacy, it’s got decent defaults that crank up really high (per-use permissions on WideVine is a great example, most major browser vendors just opt you in silently, it also fights AMP and does a fair amount of tracker blocking).
ProtonVPN is aggressive by default and has a few “sledgehammer” modes (e.g. Secure Core), and it can be configured to take down your effective connection if it fails to negotiate. It also does split WireGuard by default and so it plays nice with TailScale out of the box.
DuckDuckGo and Yandex both return stuff (e.g. torrents to leaked model weights) that Google censors, though obviously with Yandex you’re trading the old boss with one agenda for the new boss with a different one.
On LLMs, the Orca de-tunes of Mistral-8x7 are very operator-aligned and run just fine on mid-spec Macs or gaming-class PCs and you can build llama.cpp from a small-ish codebase you can easily grep for obvious icky shit (and I trust ggerganov).
Source: worked at FB on Ads and abuse/security and IG on ranking/recommenders.
Forcing everything to be black and white when we have millions of colors is pretentious af.