TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: magick.css – Minimalist CSS for Wizards

305 pointsby magistr4teabout 1 year ago

29 comments

btownabout 1 year ago
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.<p>Code for those interested: <a href="https:&#x2F;&#x2F;github.com&#x2F;wintermute-cell&#x2F;magick.css&#x2F;blob&#x2F;master&#x2F;magick.css">https:&#x2F;&#x2F;github.com&#x2F;wintermute-cell&#x2F;magick.css&#x2F;blob&#x2F;master&#x2F;ma...</a><p>Wish there were custom checkboxes and radio buttons - they&#x27;re the only thing that break immersion at the moment! Everything else is absolutely stellar. Might inspire me to finally make that blog I&#x27;ve been thinking about!
varrockabout 1 year ago
This is a great example of how a font can really compliment the style you&#x27;re going for. It fits so well that you hardly notice it at all.
评论 #39797547 未加载
评论 #39798561 未加载
noiiyfdedvvabout 1 year ago
There’s a little typo in the simple example:<p><pre><code> &lt;main&gt; &lt;header&gt; &lt;&#x2F;header&gt; &lt;section&gt; &lt;&#x2F;section&gt; &lt;section&gt; &lt;&#x2F;section&gt; &lt;section&gt; &lt;&#x2F;section&gt; &lt;footer&gt; &lt;&#x2F;footer&gt; &lt;&#x2F;header&gt; </code></pre> Note closing header not main.
评论 #39796916 未加载
评论 #39803896 未加载
评论 #39797198 未加载
atlintotsabout 1 year ago
this, mixed with the look of a LaTeX document is exactly the kind of vibe I&#x27;m looking to go with for my personal site as well. Something just so appealing about it to me.<p>that, and the ultra-minimal look of websites of old university professors (basically just html and nothing else) looks so cool to me.<p>i wish personal blogs were more popular!
crooked-vabout 1 year ago
People who like this may also enjoy Tufte CSS (<a href="https:&#x2F;&#x2F;edwardtufte.github.io&#x2F;tufte-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;edwardtufte.github.io&#x2F;tufte-css&#x2F;</a>).
评论 #39798019 未加载
MrVandemarabout 1 year ago
No. Please don&#x27;t put script fonts in uppercase. It&#x27;s absolute death to readability.<p>Actually don&#x27;t put <i>anything</i> in uppercase - like underlining, it&#x27;s a form of emphasis that has its origins in typewriters, which were locked to one typeface.<p>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 <i>ascenders</i>, and the variation is easier to parse.<p>For emphasis, please use size, weight, and italics.<p>Thank you.
评论 #39798993 未加载
jsyang00about 1 year ago
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.
评论 #39800220 未加载
wackgetabout 1 year ago
When remote fonts are blocked, the text is rendered with Comic Sans. Not a good look.
评论 #39799309 未加载
评论 #39797732 未加载
评论 #39797702 未加载
评论 #39798036 未加载
评论 #39797118 未加载
troupoabout 1 year ago
Why do all css frameworks and design systems hate text inputs so much?<p>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 <a href="https:&#x2F;&#x2F;medium.com&#x2F;google-design&#x2F;the-evolution-of-material-designs-text-fields-603688b3fe03" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;google-design&#x2F;the-evolution-of-material-d...</a>
kyledrakeabout 1 year ago
I love the idea of (mostly) classless css frameworks. I tried to make one a while ago but it&#x27;s probably not as good: <a href="https:&#x2F;&#x2F;elementcss.neocities.org" rel="nofollow">https:&#x2F;&#x2F;elementcss.neocities.org</a>
评论 #39800378 未加载
junonabout 1 year ago
The fonts here are superb, I found the page to be highly readable and absolutely cute without being over the top. Delightful :)
tetris11about 1 year ago
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!
评论 #39799350 未加载
pietroppeterabout 1 year ago
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!
spookybonesabout 1 year ago
It love it.<p>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.
lacooljabout 1 year ago
this reminds me of <a href="https:&#x2F;&#x2F;alistapart.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;alistapart.com&#x2F;</a>
ramesh31about 1 year ago
Beautiful. Classless needs to become the standard for CSS libraries. I&#x27;m tired of learning your DSL to center a div. Just make the HTML do what I expect it to.
TheGoodBarnabout 1 year ago
I updated my small Vue template site to use this instead of new.css as a little refresh! Thank you for sharing.<p><a href="https:&#x2F;&#x2F;vue-template.spaghet.me&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vue-template.spaghet.me&#x2F;</a>
andrei_says_about 1 year ago
Love this. Classless styling can offer so much, especially in the context of document-driven websites.
benreesmanabout 1 year ago
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.<p>Is there a central place for in-the-know CSS wizards to post and discuss their most recent next level demo?<p>Years ago there was something called like CSS Zen Garden or something but times have moved on I think.
评论 #39797023 未加载
评论 #39835091 未加载
评论 #39797858 未加载
评论 #39796918 未加载
0pteronabout 1 year ago
Is there not a privacy-respecting font-host besides google? A lot of privacy&#x2F;ad focused extensions will block these.
busfahrerabout 1 year ago
I love classless CSS frameworks, but I think it&#x27;s a pity that there are only so few that use serif fonts. I&#x27;m grateful for any links if anybody has some hints.
euroderfabout 1 year ago
Semantic HTML[1] <i>and</i> Tufte style, all in <i>one</i>[2] CDN&#x27;d file. Me likey.<p>[1] &lt;aside&gt; at least<p>[2] Not counting normalize.css
jdthediscipleabout 1 year ago
Truly beautiful!<p>These are always hard to get right, but this one is compelling.
aetherspawnabout 1 year ago
Something really nice about the typography?
sergiomatteiabout 1 year ago
I love this. I&#x27;m using this.
swyxabout 1 year ago
oh i collect these!<p>- <a href="https:&#x2F;&#x2F;andybrewer.github.io&#x2F;mvp&#x2F;" rel="nofollow">https:&#x2F;&#x2F;andybrewer.github.io&#x2F;mvp&#x2F;</a> mvp.css<p>- <a href="https:&#x2F;&#x2F;yegor256.github.io&#x2F;tacit&#x2F;" rel="nofollow">https:&#x2F;&#x2F;yegor256.github.io&#x2F;tacit&#x2F;</a><p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;alvaromontoro&#x2F;almond.css">https:&#x2F;&#x2F;github.com&#x2F;alvaromontoro&#x2F;almond.css</a> has thin fonts<p>- <a href="https:&#x2F;&#x2F;picocss.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;picocss.com&#x2F;</a> Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.<p>- <a href="https:&#x2F;&#x2F;simplecss.org&#x2F;demo" rel="nofollow">https:&#x2F;&#x2F;simplecss.org&#x2F;demo</a> 4kb incl dark mode<p>- <a href="https:&#x2F;&#x2F;watercss.kognise.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;watercss.kognise.dev&#x2F;</a> Small size (&lt; 2kb)<p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;xz&#x2F;new.css">https:&#x2F;&#x2F;github.com&#x2F;xz&#x2F;new.css</a> (<a href="https:&#x2F;&#x2F;newcss.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;newcss.net&#x2F;</a>) 4.8kb<p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;oxalorg&#x2F;sakura">https:&#x2F;&#x2F;github.com&#x2F;oxalorg&#x2F;sakura</a> supports extremely easy theming using variables for duotone color scheming.<p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;susam&#x2F;spcss">https:&#x2F;&#x2F;github.com&#x2F;susam&#x2F;spcss</a><p>- <a href="https:&#x2F;&#x2F;neat.joeldare.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;neat.joeldare.com&#x2F;</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;codazoda&#x2F;neatcss">https:&#x2F;&#x2F;github.com&#x2F;codazoda&#x2F;neatcss</a><p>- <a href="https:&#x2F;&#x2F;concrete.style&#x2F;" rel="nofollow">https:&#x2F;&#x2F;concrete.style&#x2F;</a> Tiny (&lt; 1kb)<p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;zichy&#x2F;fieber">https:&#x2F;&#x2F;github.com&#x2F;zichy&#x2F;fieber</a> (new, wants feedback)<p>- <a href="https:&#x2F;&#x2F;mikemai.net&#x2F;typesettings&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;mikemai.net&#x2F;typesettings&#x2F;index.html</a> (new)<p>for more: <a href="https:&#x2F;&#x2F;github.com&#x2F;swyxio&#x2F;spark-joy&#x2F;blob&#x2F;master&#x2F;README.md#no-framework">https:&#x2F;&#x2F;github.com&#x2F;swyxio&#x2F;spark-joy&#x2F;blob&#x2F;master&#x2F;README.md#no...</a>
评论 #39795698 未加载
评论 #39795596 未加载
评论 #39796752 未加载
评论 #39795422 未加载
评论 #39801200 未加载
评论 #39796103 未加载
评论 #39797140 未加载
评论 #39842931 未加载
评论 #39795536 未加载
hatthewabout 1 year ago
This seems less like a CSS framework and more like an article theme. Maybe I misunderstand the common definition of &quot;CSS framework&quot;.
评论 #39798842 未加载
评论 #39796578 未加载
runjakeabout 1 year ago
Is it typical for these frameworks to link to Google fonts in them?<p>It seems like a privacy&#x2F;tracking issue, or am I offbase?
评论 #39796331 未加载
评论 #39798522 未加载
评论 #39796844 未加载
评论 #39796922 未加载
Uptrendaabout 1 year ago
Forcing everything to be black and white when we have millions of colors is pretentious af.