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.
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.
> 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.
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.
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.
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.
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.
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!
> 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
86 comments
[ 4.1 ms ] story [ 74.9 ms ] thread- 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...
Last week I started a new site about strategies I use for my prolific note writing: https://notes.joeldare.com
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.
> 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.
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.
https://edwardtufte.github.io/tufte-css/
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!
It seems like a privacy/tracking issue, or am I offbase?
> 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....
Worst case scenario, build it yourself inside on of the official Go docker containers.
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.
It absolutely is, and if you do include them you have to show a consent popup in the EU.
These are always hard to get right, but this one is compelling.
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.
Lots of options here.
Wow, you just stirred some ancient memories!
https://www.mcsweeneys.net/articles/im-comic-sans-asshole
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!
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.
However, in doing so, it also creates a distinctive style.
I think I like it.
My general rule is less draconian and more receptive to aesthetic experimentation.
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...
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.