return to table of content

Show HN: magick.css – Minimalist CSS for Wizards

swyx
10 replies
1d20h

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...

lukeholder
2 replies
1d18h

Can you make this list a GitHub repository called “Awesome classless CSS”

skeptrune
1 replies
1d19h

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.

swyx
0 replies
15h38m

youve just done that !

timvdalen
0 replies
1d1h

That typesettings one has a confusing license. GitHub says MIT, the linked page says commercial use not allowed.

codazoda
0 replies
1d19h

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

citizenpaul
0 replies
1d20h

Have you ever actually used one in production. Curious BC I used to do the same thing.

varrock
8 replies
1d13h

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.

rascul
6 replies
1d13h

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.

fouc
2 replies
1d13h

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.

troupo
1 replies
1d9h

The font is fine, it's the line-height that is wrong: the text is a bit too squished

fouc
0 replies
13h7m

Oh I see what you mean

PhrosTT
2 replies
1d5h

You are welcome to use vanilla frameworks for a generic looking site. This is clearly intended as a thematic look.

rascul
0 replies
22h58m

Why can't I use this one? I don't see anything mentioned about the font being required or even part of it.

alsetmusic
0 replies
1d1h

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.

arendtio
0 replies
1d9h

Style yes, but I find it so hard to read.

wackget
7 replies
1d15h

When remote fonts are blocked, the text is rendered with Comic Sans. Not a good look.

Atotalnoob
2 replies
1d15h

Or is it the best look?

ykonstant
1 replies
1d11h

It was the best of looks, it was the worst of looks, it was the Sans of Comics~

qingcharles
0 replies
18h34m

It was the blurst of looks...

ykonstant
0 replies
1d11h

OK, hear me out. Times New Comic.

fouc
0 replies
1d12h

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.

defanor
0 replies
1d12h

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.

noiiyfdedvv
6 replies
1d20h

There’s a little typo in the simple example:

    <main>
      <header> </header>
      <section> </section>
      <section> </section>
      <section> </section>
      <footer> </footer>
    </header>
Note closing header not main.

alberth
3 replies
1d14h

Another thing, semantically - the HEADER and FOOTER should go before & after, respectively, the MAIN tag

noiiyfdedvv
2 replies
1d5h

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.

eddd-ddde
1 replies
1d3h

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.

noiiyfdedvv
0 replies
1d

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.

qingcharles
0 replies
18h35m

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.

fbdab103
0 replies
1d16h

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.

runjake
5 replies
1d18h

Is it typical for these frameworks to link to Google fonts in them?

It seems like a privacy/tracking issue, or am I offbase?

fbdab103
1 replies
1d16h

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.

hnlmorg
0 replies
1d9h

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.

kolme
0 replies
1d9h

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.

benreesman
0 replies
1d16h

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.

benreesman
3 replies
1d16h

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.

benreesman
0 replies
1d14h

Looks great, thank you kindly!

kcrwfrd_
0 replies
1d12h

CSS Zen Garden

Wow, you just stirred some ancient memories!

MrVandemar
3 replies
1d10h

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.

bovermyer
2 replies
1d7h

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.

fmajid
1 replies
1d3h

My general rule is, if Reader Mode improves your site, your site is a failure.

bovermyer
0 replies
11h51m

That's fine for you.

My general rule is less draconian and more receptive to aesthetic experimentation.

tetris11
1 replies
1d19h

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!

redeux
0 replies
1d6h

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.

kyledrake
1 replies
1d11h

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

croisillon
0 replies
1d3h

i must confess: Element is my goto classless framework, thanks for making it!

jsyang00
1 replies
1d19h

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.

hatthew
1 replies
1d18h

This seems less like a CSS framework and more like an article theme. Maybe I misunderstand the common definition of "CSS framework".

vaylian
0 replies
1d7h

"CSS framework" is just a fancy way of saying "CSS library".

ykonstant
0 replies
1d11h

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.

troupo
0 replies
1d9h

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...

spookybones
0 replies
1d2h

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.

sergiomattei
0 replies
1d19h

I love this. I'm using this.

ramesh31
0 replies
1d1h

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.

pietroppeter
0 replies
1d11h

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!

junon
0 replies
1d5h

The fonts here are superb, I found the page to be highly readable and absolutely cute without being over the top. Delightful :)

jdthedisciple
0 replies
1d17h

Truly beautiful!

These are always hard to get right, but this one is compelling.

euroderf
0 replies
6h28m

Semantic HTML[1] and Tufte style, all in one[2] CDN'd file. Me likey.

[1] <aside> at least

[2] Not counting normalize.css

busfahrer
0 replies
1d6h

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.

btown
0 replies
1d19h

This 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!

atlintots
0 replies
1d15h

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!

andrei_says_
0 replies
1d14h

Love this. Classless styling can offer so much, especially in the context of document-driven websites.

aetherspawn
0 replies
1d9h

Something really nice about the typography?

Uptrenda
0 replies
1d11h

Forcing everything to be black and white when we have millions of colors is pretentious af.