Readit News logoReadit News
btown · 2 years 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.

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!

varrock · 2 years ago
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 · 2 years ago
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.
PhrosTT · 2 years ago
You are welcome to use vanilla frameworks for a generic looking site. This is clearly intended as a thematic look.
fouc · 2 years ago
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.

Dead Comment

arendtio · 2 years ago
Style yes, but I find it so hard to read.
noiiyfdedvv · 2 years ago
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.

fbdab103 · 2 years ago
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.

qingcharles · 2 years ago
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.
alberth · 2 years ago
Another thing, semantically - the HEADER and FOOTER should go before & after, respectively, the MAIN tag
noiiyfdedvv · 2 years ago
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.

atlintots · 2 years ago
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!

crooked-v · 2 years ago
People who like this may also enjoy Tufte CSS (https://edwardtufte.github.io/tufte-css/).
ykonstant · 2 years ago
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.
MrVandemar · 2 years ago
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 years ago
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 · 2 years ago
My general rule is, if Reader Mode improves your site, your site is a failure.
jsyang00 · 2 years 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.
wackget · 2 years ago
When remote fonts are blocked, the text is rendered with Comic Sans. Not a good look.
defanor · 2 years ago
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.
fouc · 2 years ago
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.
ykonstant · 2 years ago
OK, hear me out. Times New Comic.
Atotalnoob · 2 years ago
Or is it the best look?
ykonstant · 2 years ago
It was the best of looks, it was the worst of looks, it was the Sans of Comics~