The least amount of CSS for a decent looking site (2023)(thecascade.dev) |
The least amount of CSS for a decent looking site (2023)(thecascade.dev) |
* { box-sizing: border-box }
`body, html { box-sizing: border-box } * { box-sizing: inherit }`
> But a browser should have a minimal set of default styles!
They always have done. My suggestion does not affect that.
> Websites shouldn't be able to turn off default stylings!
Many already literally are, either through CSS resets or simply doing h1 { color: red }.
> What's the point!?
There's a dozen or so popular CSS resets that literally overrides all the browser default styles. It would save time and data to not ship the same styles over and over again.
> It's impossible!
No, no it is not. Simply inform the browser to apply no styling at all. This would be a straightforward feature for browser implementors to create.
And, no, I do not want the text I am reading to be full-width on my 32-inch monitor. I'm jumping between a lot of other sites that need to take up the entire space.
I mean, newspapers have a smaller columnar style than any website and have been around for generations.
You hear this, HN?
Please don't do this. Despite what usability studies say, I prefer wide content over scrolling every few seconds and having to make my eyes follow the moving text. I, the user, can already control the content width by resizing my browser, thank you very much.
I'd know, because this is exactly how I temporarily "fix" rubbish, outdated sites that have all their 80 column text appear on the left: I resize my browser window to move the text in to the center of my display. It's immensely annoying. It's annoying enough that sometimes it compels me to spend the (short but anger filled) time and override the site's stylesheet rather. At which point, may as well have served me some plain text instead. Speaking of, I do sometimes just toggle reader mode on too.
Nearly every techie and non-techie I know has a bazillion tabs open 100% of the time. The likelihood that even the top 10 are all single-column text is 0%. And I'd sooner read web pages hot off a dot matrix printer than constantly pecking at the edge of an un-maximized window, resizing it like some kind of meth-addled chicken.
Note: I may be overstating slightly for effect.
Oh the irony that lots complain that mainstream OSes window managers are oh so poor when all people seem to be able to do is fullscreen everything and then tab around.
Meanwhile, macOS gave up on the absolutely brilliant if misunderstood Mac OS X green + a.k.a "zoom" which would miraculously resize windows to the maximum size of its content but no more.
If you could easily shrink a tab, I would prefer websites to not limit text width. Since you can't, I sorta prefer them to do it, though it's much worse than the user controlling it in a nice per tab way
But I, the user, do not. And I will not. Because there are a bazillion websites that I want to browse in a maximized browser window. So limiting the content width help people like me who cannot/would not resize my browser.
solves the paragraph width "usability" and uses the full screen space
not sure why its never used.. I also really dislike the current trend of giant white sidebars
I’m still interested in this layout, but that’s why nobody does it: it’s far more complex from the web dev’s perspective, bad if not executed perfectly, and still has downsides even if perfect.
I think it’s still popular in places where the viewport size and content are both known at design time.
Yes you can already resize the window or zoom but that oftentimes break the design in some way.
Well, nothing happen in tech before it's a trend, so let's just wait and hope.
Most websites abuse the latter two, and makes my mouse wheel spin like a meth addict without a dose.
Please keep the default font size. It's aligned with the system's size, and is precisely what a browser's zoom function will scale.
And no, I absolutely do NOT want the content I’m reading to be full width on my 32” monitor. I have loads of other sites that I’m jumping between which do need to take up the full space.
I mean newspapers have a narrower columnar layout than any website and they’ve been around for centuries.
So then you hug the right edge of the screen, looking for it, where it looks like it is, and where it's been for like the entire history of computing, and then you click, and there's just nothing there.
This is a special case of Fitts's law, where a button at the edge of a screen becomes effectively infinitely wide, as far as ease-of-clicking goes.
This was used intentionally with great effect on usability in the 90s and 2000s. (Scrollbar, start menu, show desktop, etc.)
In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
It's nice of you to consider only your own perspective.
In that case I'd say the problem is exactly what you state
> knows essentially no CSS
The solution is quite obvious then too: learn some. It's not hard. Understanding the basics is a afternoon job. Diving a bit deeper a day, and learning about some often-used more in depth features like "responsive" or flexbox, another day. For a software developer/engineer that builds backends, CSS really isn't that hard.
That's not to say a basic CSS set and some explanation like in TLA, isn't useful.
It's my pet-peeve that in software development, I'm convinced we should understand the stuff that we work with. Not all, and certainly not everything in great detail, but enough to know where to find the info and details when working with it. From sysadmin to the concepts of cryptography and from accessibility to how an OS writes stuff to disk. Even if that means constantly learning.
Anyone making a personal website?
Just to like, follow up: 99% of the point of making your personal website is, like, making it fucking personal which is to say that you put your own time and energy into learning something in the process. Copy/pasting random CSS from the web is not learning. Also, copy/pasting this particular CSS is not even showing the slightest bit of interest.
So consider: Why would anyone care about your personal website if you don't care enough to learn how to make it, you know, personal by actually learning a tiny bit about the art you're trying to put into practice?
And none of this even starts to explain why this junk would be popular here. There are some brilliant CSS hacks in the wild that deserve attention, but this is sub-par even for child's play that might teach you how to do something useful. It's not even a lesson. It's just some crap you don't understand that you might copy and paste, with almost no explanation.
These fonts have not been designed for pixelated displays. Yes, it's better on Retina / HiDPI displays (I even enjoy some serif fonts on those), but those have to be designed with pixels in mind. But they usually are atrocious on "classic" pixel densities.
And tangent: the print industry has a much wider typeface selection than "just" Times New Roman, which is rather rare in my personal experience (sample size of one, though).
This is beautified if somebody wants to see how it is done.
function() {
var myBody = document.getElementsByTagName('body')[0];
var myBodyWidth = myBody.style.width;
if (!myBodyWidth || myBodyWidth === 'auto' || myBodyWidth === 'inherit') {
myBody.style.width = '1200px';
myBody.style.marginLeft = 'auto';
myBody.style.marginRight = 'auto';
myBody.style.position = 'relative';
myBody.style.cssFloat = 'none';
} else {
myBody.style.width = 'auto';
myBody.style.position = 'static';
}
}(2) user stylesheets (permanent solution, but you could have multiple and use an extension to enable disable different widths)
(3) responsive mode (in dev tools, most flexible, but most cumbersome to reach)
(4) Other extensions
There are easy ways to resize the viewport, so the premise is false.
It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.
https://github.com/zen-browser/desktop/issues/1126 is the issue, closed as they won't fix it (thus my snark).
> In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
Afaik Ubuntu jumpstarted it with their minified GTK scrollbar, used in their Unity DE. But that thing was actually smart: It slimmed down visually, but as soon as the mouse entered its region you got the scrollbar handle at the mouse pointer's position. So it made manipulating the scrollbar even easier than a fullsized scrollbar (for at least some usage) while looking nicer. Ofc that usability aspect is something the CSS reskins and other adaptations promptly and completely forgot.
I much more sympathize with them tbh. Let browser makers figure out how to give the easy to use controls to users. Let them add some override for the number of columns and columns max width and gap and so on. Or let extensions handle that. Whatever. But don't rely on each site prescribing how I have to read it.
That used to be a solved problem, before every website started to include multiple oversized "dickbars" floating over the real content and taking up 15+% of the available vertical space. Pressing the "Page Down" button on a keyboard would scroll down by exactly one screenfull. We also used to have scrollbars that on most operating systems would let you scroll down by exactly one screenfull with a single click.
Or to the right. (That might be even worse though, I don't know.)
i have never hit this issue bc you need a massive amount of text to fill the whole screen. I have some natural breaks and subheaders. Each section is wrapped in its own columns
Is this article not someone in the community documenting what's understood? I'm sorry if it doesn't meet your expectations, but it's fine for me.
When you say you sometimes enlarge the font, how many words per line do you aim for or end up with, roughly? You’re describing behaviour that aims to render text more readable, so obviously it isn’t simply a case of “I like text content to be as wide as possible”.
It’s still there. Window > Zoom from the menu bar, or ⌥ + click the green window button.
Did people lose the old art, or have you never managed to grasp the "new" one?
Maybe someone should invent a tiling tab manager for the web browser.
https://betanews.com/2014/07/12/view-all-your-firefox-tabs-a...
E.g., there's no way for you to easily send me the desktop state of the open window sizes and dimensions you have in mind. And even then, I'd have to hack the window decorations and fonts myself. I'm back to meth-addled chicken pecking!
See above...
> But don't try to force your preference onto everyone please.
Limiting column width is already the predominantly established pattern, even all the way back to print, so this is nonsensical. Unless I interpret it as the cheap, childish clapback that it is. Which I have to say, really befits the take.
No. Claiming that I'm trying to force something to happen that is already the given way is what's nonsensical. Because you see, it has already happened. I can at most reinforce it, contributing to it remaining established, which is really not the model you've been playing along in.
> That seems a very ... progressive mindset.
I'd go as far as to say it's downright tautological!
> And everything anyone else says, that goes against current trend is ... childish clapback?
No. Riding off what I said to coyly make your point instead of just directly sharing them, in order to get a rise out of the other, is what constitutes the childish clapback there. You know, like what you're doing again.
> Wow. You sir are truly an enlightened being.
Unfortunately, I fall way short of that. If I was truly enlightened, I wouldn't give conversations like this the time of day, as they're intentionally crafted to be asinine, to waste people's time and care. Or is that not your whole idea?
Because I have to say, could have fooled me! Repeating after me that I have the amazing options of simulating a different device, injecting my own styling, or using reader mode, blatantly ignoring that these are workarounds and right after I did explicitly list 2/3rds of them off, surely you can appreciate comes across as more than just a little insulting and disingenuous. So does reflecting back the subjectivity of the topic, while conveniently ignoring that e.g. stylesheet injection or browser extension use go both ways, and they could use those too. So is everything just fine as is then, or is there a change needed? Make up your mind, please?
> Thanks for sharing your wisdom with us today.
Cheers! I would say any time, but hopefully for not much longer.
That’s the whole point of this article. CSS is a huge language. Where do you even begin? This article is a perfect response to that very natural question.
There is no point to this article. This is the most common kind of trash you can find if you type in "minimum css"... it's not even that. Come on. Have integrity in your work and learn how to do it.
And this:
> but it's pretty much a bunch of pick-and-choose attributes for HTML that you can wrap up into "classes".
indicates despite using it for 25 years, you haven't even tried to learn it. This may have been partially true back when it was first introduced and all people knew were things like "font" and "[text-]align", but it's been a horribly inaccurate description of CSS for decades now.
If you really want to please everybody here, introduce an option that is remembered in a cookie (reading preference, trivial to implement). There is no one size fit all here.
It's very ignorant to believe 100% of users are happy with having to resize their browsers just to get a pleasant rendering of the site.
I seriously doubt there are any people who resize their browser window every time they switch tabs.
If I load CNN.com right now and scroll to the bottom, I receive 26.9 MB over the wire.
Of that, 52.2 kB are CSS.
5,547 kB are JS.
CSS bloat is not as big a deal.
The adware is typically injected onto the page by 3rd parties so it's nothing the web devs can do anything about.
Lots of sites become more functional with JS disabled.
CNN specifically isn't a site I visit much, but most news sites load a ton of third-party stuff (being on mobile makes it hard to check)
That's like asking any other software dev to "say no" to letting other programs run concurrent with their own. It's just not within scope and any attempts to have your program behave this way will be impossible to maintain.
If you're a business that wants to inject ads without anyone getting in the way, all you have to do is host the pages somewhere the dev can't touch. This would likely be a CDN or similar for a multitude of other good reasons. So the content security policy is now only configurable by the admin who really doesn't give a shit and doesn't even know what's being hosted on there.
I don't think it's identical to package tree shaking but the outcome is the same.
I don't think it was doing it before v4, or if it was, not as efficiently
It can make sense for a theme selector that works on the server, since you can serve specific HTML when building the page. However, if using a JavaScript-based solution that fetches the theme preference from localStorage, I find this almost always results in a "flashbang" in dark mode, as the retrieval is slower than the first browser paint.
I've been implementing (and recommending) pure CSS-based theming to avoid this problem. Users seem much happier with them, and I haven't heard anybody ask for a theme switcher. We just respect their existing preference. However, I can see this being a problem if you offer multiple color schemes (beyond just light and dark).
I'd be curious to know if anybody has found a way to avoid this issue with JS switchers -- ideally without needing to delay the initial paint.
I do think an interesting approach would be a browser extension that lets you override the prefers-color-scheme property on a per-domain basis, similar to the toggle in dev tools.
Not if you blockingly inline the three lines of JavaScript with a good old script tag right in the HTML.
That way you will have a flash, but if the user set dark mode on their browser/DE, they'll flash in dark, not light.
Or, alternatively, you can always make it flash in dark. I never heard about anybody being annoyed by a dark flash.
I'm not aware of the specifics of regulations in other parts of the world, but this distinction is irrelevant for the EU ePrivacy directive: a) it was never about cookies only, and b) purely functional cookies that record user preferences do not need explicit consent.
From [0]:
> 34,35 Storage of information in the sense of Article 5(3) ePD refers to placing information on a physical electronic storage medium that is part of a user or subscriber’s terminal equipment [..] this includes making use of established protocols such as browser cookie storage as well as customized software, regardless of who created or installed the protocols or software on the terminal equipment.
> 43 This might also be the case for web browsers that process information stored or generated information [sic] inside the device (such as cookies, local storage, WebSQL, or even information provided by the users themselves). The use of such information by an application would not be subject to Article 5(3) ePD as long as the information does not leave the device
https://www.edpb.europa.eu/our-work-tools/documents/public-c...
Thank you for illustrating the fact that the phrase "best practice" means nothing, and is little more than a synonym for "I heard this somewhere."
I remember Firefox used to have an option in the menu for selecting alternative stylesheets, multiple ones not just light and dark, I think it was a standard from CSS, but only Firefox had a way to select them through the UI, for other browsers you had to use Javascript to make a selector.
Presumably, most users wanting flashbang-less browsing experience use Dark Reader extension or similarly radical solutions.
The sad truth is that the user preferences and per-site persistence for stuff like this should always have been browser's responsibility to begin with: just the same way like the font-size/page zoom already is, and likewise some (blatantly limited) security settings. (Bitterly) amusing fact is that there was (and still is) concept of "alternate stylesheets" from the beginning of CSS (still part of the spec [0], no support outside Gecko), that also fade into obsolescence for it's lack of persistence. So to this days, Firefox, for example, has View → Page Style menu, where user can choose alternate stylesheet but the choice is not preserved across navigations, so is pretty useless on its own.
Similarly userstyles: specifications dictate there is like CSS origin level and how they should behave and that all "user agents" are supposed to give user a way to enter the cascade this way, but does not give any official way how to scope individual recipes to concrete origins. That's what the unofficial `@-moz-document` extension was that, and briefly had a chance to be formalised [1]. But I digress.
(Likewise all the "European" cookies banners: tragic example of regulation applied on the wrong level. Instead of putting users in charge with help of their "user agents": implicitly blocking pretty much everything and using permissions system that actually would have a chance to be more than "pinky promise we will not track you if you don't click this toggle inside our banner". But I digress even more, sorry.)
> I'd be curious to know if anybody has found a way to avoid this issue with JS switchers -- ideally without needing to delay the initial paint.
At this point, when browsers do not support per-site user preference for that natively, pragmatic (most robust) way would be to respond with properly set HTML payload straight away. There is even specified HTTP header for this, so once adopted in browsers, we could even ditch HTTP cookies [2] for the persistence, but it seems quite demanding on the server (IIUC negotiating these "Client Hints" takes extra initial request round-trip).
Pragmatically, I guess having early running JS in the HEAD that ensures the proper color-scheme is set on the root not and only proper stylesheets load should pretty much prevent most flashbangs, provided the relevant bit would arrive early enough from the server. I think there does not exist any good no-JS-no-Cookie (or any JS-less persistence) solution that supports navigations, sadly.
[0] https://html.spec.whatwg.org/multipage/links.html#rel-altern...
[1] https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#cha...
[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/...
Most browsers also support per-page overrides, but the only consistent place to find it is Dev Tools, which is a shame.
I think browsers decided to invest in "Reader Mode" as a UX over more direct control of user styles and page styles, and I'm not always sure that is the correct choice, but I can understand how it seems the simpler "one-button" choice.
I feel the same way about salads in restaurants—I don’t want to have to slice produce, add dressing, and toss my own salad at the table without a bowl or proper utensils. I want the professionals who I am paying to prepare my meal to handle that. If I have problems with any of the ingredients, or some desire for unreasonable quantities of dressing, then I can make requests. Serving me a plate of neatly partitioned ingredients strikes me as an insane thing to do…I suppose unless it comes with fondue or I have signed up for some hibachi nonsense to make my dinner more “interactive”.
I have fully lost the thread, apologies, carry on.
The ideal web would give the option of better separating form and function when possible. I'm well aware that this is an old set of values from another time, but today they're more important than ever, not just aesthetically, but with reference to ability and power and dare I say, freedom.
Calling this a “sad state of affairs” is pretty dramatic. You have to gaze upon things that aren’t in your preferred colors, oh my!
What would you do if you had the option to choose any font of your choosing? What color for the headers? The background of the buttons? Should you be able to define the border radius? The CSS transitions? All of CSS?
You can do that. There are extension for that.
I don't think this is a concern for the vast majority of users.
It is ludicrous to expect every web page to give the user control over individual theme elements. If you want such level of control, you can override them yourself with a custom style sheet.
Something similar to plain text can be created with the <pre> tag in HTML if you like to add metadata to your page.
Make sure to linewrap on your prefered 50-70ch limit for our reading pleasure, otherwise I will be adding the style="width:70ch" locally to your body tag.
font-family: System UI;
font-family: system-ui;
e.g. this wouldn't work either?
font-family: Times New Roman;
This is generally referred to as "what pretty much everyone else thinks about your stupid font".
(i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/)
It seems Astro or Hugo (potentially with Tailwind to customize CSS) are good options. Astro felt more complex than needed, on the other hand, writing html/css manually doesn’t work well either (predefined layouts and easy to use style customization options would be needed). I couldn’t find a suitable Astro theme either (most themes seem to be made for companies, or needlessly fancy, and a few for individual blogs).
In the process of figuring this out, I was surprised how complicated designing a website has become. There are so many frameworks, components, integrations and significant dependancies that I wondered how web developers keep up in this ecosystem.
> Granted, if you have images they can cause some overflow issues.
The "fix" breaks zooming in.
> In general, the font-size is a little small as well
It is quite annoying when websites mess with your preferred font, its size, style, and so on, often turning texts illegible. In this case it is made awkwardly large, but often it is made illegibly small, apparently also with the intention to fix the defaults.
> Many people love dark mode, so let’s enable it based on a user’s system preferences.
"color-scheme" is like "viewport": an invocation to tell the browser that the website is not too broken, and the web browser should act more sensibly. Those are practical, but still awkward, not quite how things should be: I wish web browsers defaulted to sensible behaviors. So I rather view it as a choice between adapting to how things are and pushing for how they should be.
> We generally want to try and fall somewhere in the 45-90 characters per line range (for body text, not headlines).
I used to set max-width in ch before removing CSS completely as well, but usually desktop web browser windows are resizable, with the space being there to be used, not to fill with background color. I see it in epub files sometimes as well: huge margins are enforced, being rather annoying when you do not want those, while if you do, you can simply adjust the window size (or set such default styles, as another option).
If you only target modern (5 year window) that one popular reset can be trimmed.
A drop down menu on an iPhone SE is supposed to look different than on an ultra wide monitor on a desktop!
This must be paired with `height: auto`, or your image’s aspect ratio will be messed up if the width gets capped.
> img, svg, video { max-width: 100%; }
… but beware, Chrome 141 has CSS width/height work on nested SVG elements, and auto is being miscalculated. Workaround is to change the `svg` to `svg:where(:not(svg svg))`.
> We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts.
Please don’t. system-ui is a font for matching the system UI. The UI font is often not good for long content, and in some less common OS/language combinations it’s almost unusable. Stick with sans-serif if that’s what you want. People have been using system-ui as a proxy for a maybe-better sans-serif. This is not what it is, and it is bad to use it so.
> In general, the font-size is a little small as well, so we can bump it up
This is acceptable for larger screens. I reckon 18–20px is a reasonable target, so 1.25rem is fine. But on small screens, please don’t go above 1rem, it’s the platform’s customary size and you don’t have the space to waste.
> the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do
Ouch. 1.7 is huge on smaller displays. If you want a single value, I suggest 1.4–1.5. If you want to vary by width, 1.4 on small displays up to 1.6 on large will be reasonable.
> font-family: System UI;
That’s a second glaring error you should instantly observe if you use the stylesheet. I am not encouraged about its quality.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Sensible browsers let you separate the two. Firefox defaults to having content follow the system theme, but you can change it to just light or just dark.
> main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
This is effectively giving a minimum 2rem margin. Well, actually 2rem + 8px once including the default body margin. That’s way too much, and applied in the wrong way.
If you wanted to apply it to the main element, it would be easier and I think more logical to use padding:
main {
max-width: 70ch;
padding-inline: 2rem;
margin-inline: auto;
}
body {
margin: 1rem;
}
main {
max-width: 70ch;
margin-inline: auto;
}
Layout wise this is why newspapers arrange their text in columns and books also generally comply with this restriction.
LOL.
Interesting comparison in the context of the top rated discussion about setting width. I'm with @kmoser. The original actually looks better--to me--and I like that I can manage it.
For tips see: https://practicaltypography.com/
Here is an article that was posted to HN which implements the three-state (auto/light/dark) toggle in HTML and CSS only: https://lyra.horse/blog/2025/08/you-dont-need-js/
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Is this common? Why don't those people configure their browser to use a light theme? Or if they prefer different websites to be different themes, use a browser plugin?
...a more general issue is that every website has to re-implement many things. It's a small issue, but it discourages newcomers, and the redundancy on every website adds up. Ideally, a site should look decent with no CSS, but in order to support legacy sites (a good thing) the default styles are the legacy ones (a bad thing); keeping what even back then would probably be considered "bugs" (except, like how crimes become legal, they managed to become "features" by being discovered too late), such as large images causing horizontal overflow. Honestly, is there a single good reason to make the default font Times New Roman 16px?
Arrogant.
But not as bad as those jerks that use smaller and smaller, progressively lower contrast text as the actual content gets more important. Huge readable repetitive headings, microfiche gray-on-gray for the stuff that mattered.
Hell, Hacker News sets the comment font size smaller than default.
The value of that recommendation is rather dubious considering today's high-resolution displays that allow for smaller font sizes. 80 readable characters at 768p are not the same as 80 readable characters at 4K.
To my surprise the paper actually concludes that fast readers prefer shorter line length.
Edit: Usually books and newspapers are also more or less in compliance with this convention and those where around since before computers where a thing.
Do people actually do this? I have like 10 tabs in a maximized browser window. Am I supposed to keep unmaximizing it and fidgeting with the width? Or am I supposed to just rip the tab out and have to deal with multiple browser windows?
https://github.com/twbs/bootstrap/pull/22377/files
but it's back in the current one:
https://github.com/twbs/bootstrap/blob/main/scss/_variables....
This PR to Bluesky has more recent discussion about it and offers workarounds:
What if you get a terrible font choice on the standard `font-family: sans-serif`? Should all my visitors have to download 100 KB of external fonts because Microsoft are inept?
Meh, for my personal website, I'll keep using system-ui.
Bootstrap later added it back, but in the PR discussion it was pointed out that this is still an issue on Chinese and Korean Windows, at least.
> Meh, for my personal website, I'll keep using system-ui.
Well sure, but in that case you could also use your own personal language that no-one else knows.
I wouldn’t have made any sense of the CSS box model without him back in 2002.
I guess this says something about the evolution of web standards.
I think it is best to take the Kevin Powell approach, as per the article, where you will be leaning in on browser defaults. Clearly you have to do your cross-browser and cross-platform testing, however, after almost two decades of everything coming with a CSS reset lurking in the stylesheets somewhere and mountains of cruft on top (remember frameworks), it is so liberating to get rid of the lot and to use the modern CSS tools such as CSS Grid and CSS variables.
Nowadays CSS is my favourite 'LEGO set' and I love the creative opportunities. This contrasts with the olden days where I hated the hacks based on hacks that was CSS. I have gone from practically drowning despite wearing armbands to being able to effortlessly glide through the water. CSS reset is one of those 'armbands' and it takes courage to go without such things. Same goes for those awful CSS pre-processor things.
Sounds like you would enjoy https://mastrojs.github.io – a _minimal_ Astro alternative.
We could not hope that everything would remain simple. Thanks for all the open standards and frameworks that we don't have to license.
And yes, it is a paralysis of choice.
I personally liked Astro's approach to "Components", less glue more "just writing html/md". That is of course a learning curve on its own.
HTML was meant to be hand-authored, not a compilation target. It's like if people forgot you can still cook rice without a rice cooker.
The result is decent, though the organization of the long page could be improved. In my view, a good personal website would include space for a photo, name, and affiliation, along with a simple menu for sections like biography, publication, projects, with a professional style (font and colors), but no more complex. The publication page could have a style for presenting papers in a clean well-formatted list. That may require a theme that comes with a layout and a degree of customization and novelty.
A lot of themes I looked into are not quite professional.
If anything good is left outside the temples of Facebook, etc, it's not much, and I'm embarrassed.
Configuring the whole browser to have a light theme is the wrong solution - some websites look better in dark mode and some look better in light mode. Also, the browser setting also affects the UI of the browser itself, not just website contents.
These are of course solvable problems, but the most obvious and trivial way to handle this is just to store an extra flag per-website in the same place as the zoom preference.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Edit: this looks pretty harmless https://github.com/the-code-rider/dark-theme-extension/blob/...
This is particularly important on mobile, as dark is very reflective at day, and light blinds you at night.
img { max-width: 100%; }
Doesn’t bother me enough to change the technique at this time, but I’ve put it in the things to do list.
I like the idea of having it automated by the system-set user preference in addition to having an option to set it manually with a link.
Rules can be broken, but not without consequence.
Also, if were really going off the argument of design - your font choice is almost certainly worse than whatever the OS does by default.
The OS, most likely developed by a multi trillion dollar corporation, probably chose a font that's highly legible and simple in a broad array of contexts.
Your font might be cooler, but is it better? Fat chance.
Columns work great for things like a navigation sidebar or an image grid, but it just doesn't play nice with long-form blog content.
In that regard HN is excellent.
I agree "HN is excellent" you only need to change the "85%" on the main table to your preference, in my case "70ch" in your case to "100%".
I do wonder how much you need UW for coding, in my experience without the IDE borders and decorations usually the code will end around halfway on my screen.
When I'm using my UW daily screen I usually dock two windows side by side. and didn't find that restricting. But I am also nostalgic for the 4:3 days from time to time.
If I were doing this, I would have it do Deep Research or similar on the most minimal, efficient set of tags to include in the `head` tag in late 2025.
It's possible you can get away with a bunch of .md files, but you will need a file to store site-wide metadata and/or YAML "front matter" in the MD to define page-specific variables.
I have a 4k screen. Most of the time I keep my browsers half width. For most sites it seems to be the best use of screen real estate. Even at half width that site's CSS restricts the width of the content too much, leaving a lot of wasted padding on either side.
Probably like 98% of the time, yes.
It's not an ultrawide, just a 27" 16:9 screen.
I find small windows to perform poorly on anything that's not just a simple document (gmail, hacker news, etc) because those require some horizontal space.
Anyway, a quick readthru of the code of the extension i linked shows it does use content scripts, but also it doesn’t do any network access.
It does make it kind of useful to write one line centers instead of two, but at the expense of people kind of needing to learn about damn logical properties when they read your code/blog.
Also, in my experience they interact with Flexbox and CSS Grid in useful ways that sometimes the "logical" properties are much easier to reason with than the 4-property versions or the individual property versions.
This was trivial for websites 15 years ago, but due to increasing complexity, it's no longer feasible. We've put more and more styling type things in JS, which really undermines web as a platform.
This is why CSS exists. This isn't some weirdo use case, this is THE use case. We're all losing the plot.
Which is fine. Most software is shit, so they should feel right at home. I'm just not going to pretend that the current state of web applications is at all acceptable.
It's awful in so many ways. Awful, awful, awful.
People, especially "left-brained" types, massively underestimate how much aesthetics affect their psychological state. You are not a being of pure reason manipulating mathematical symbols in a pure abstract aether. You're a primate with a half-dozen crude senses that evolved mostly to make sure we didn't die from getting eaten by sabretooth tigers or eating spoiled fruit that only very recently monkey-patched that wetware into sort being able to reason about abstractions using a big messy pile of analogies and visualizations.
If you're a coder, you understand this extremely well, implicitly: You set up your IDE fonts and colors in a way that helps you see through the code. You don't want to be looking at letter forms when you're trying to grok something.
This is also the job of designers: Creating typefaces and layouts so that people see through the text, to the meaning.
Leaving your website in the system standard font basically screams "I do not give a shit about what is written here" and also possibly "I run a quacky conspiracy website" and me and most people will scroll past your writing as quickly as possible.
But there is no font that has no connotation. Every font has subconscious meanings to readers. Knowing what these are is important. Times New Roman screams, "I'm still using Windows 98". Whereas Comic Sans screams, "I work in a shitty real estate office". Simple examples. But the art is much deeper than that, because Optima Sans and Univers read very differently to the general public in ways that I could spend another few pages explaining. Every choice you make with type implies something that sits as a layer on top of the text that's written in that typography. But if you do your job well, you make the artisanship transparent, and allow the content to shine.
This is why typography is a bit of a black art, and why it's powerful. It subtly influences people in ways they don't notice and don't understand, while they're absorbing written information. Dig:
https://en.wikipedia.org/wiki/Antiqua%E2%80%93Fraktur_disput...
What font has been more tested for quick pass-through of data than the default system fonts? To me, this simply screams "This is the main body. You can find your information here"
But it's worse than that. What I'm trying to explain is that every typeface, even the most innocuous one gives subtle, subconscious cues to the readers. Every font. The associations can range from some childhood Disney movie to a font you saw at a hospital while you were having a really serious medical problem. But after 30 years of everyone on earth looking at system fonts, readers now get the cue when they see a system font that they are looking at a shitty MS Word document their boss just pinned to the felt board. Or else they assume the author did not bother or did not have the skill to make it look good.
I'm a writer. I've written 6 novels. I love words and ideas, unencumbered by visuals. I've written at least 500k LoC on in my life, maybe double that, I don't know. That's all pure thought and logic. So I get the agitation: All I want to get across to you, my reader, my employer, is the information, my distilled ideas. That's all that's important. Read it or don't, I don't care, it's good and the logic works.
I'm also trained as a designer. My first several jobs were in ad agencies, since I was 14 years old as an intern. How will people subconsciously interpret the ancillary visual aspects of this is something I learned early on: what will they construe? Because bad design can prejudice someone against a great piece of writing, and vice-versa.
No visual thing you can make has zero cultural reference; everything you make that other people will see drags some bundle of pre-understood tropes into it. You can't make one without referencing some aspect of culture that affected you. The job of a designer - what makes a designer different from someone who just has aesthetic chops and can tell if a web page looks good - what constitutes the black arts of design - is to know every single cultural trope you are dragging in front of the customer's target audience and to understand how it will psychologically affect their state while they read the content, so you know how to trigger certain emotional resonances in them while they absorb the information the client is trying to get across.
That's what "giving a shit" means in terms of communicating visually.
Some examples, in no particular order:
NIST’s page [0] on TIME Protocol (RFC868 [0.a]) - as an aside, TIME has to be the simplest (in terms of crude utilities; obviously there exist simpler ways to find the time) and most delightful way to find the current time that exists. See [4].
Great Britain’s National Grid Status [1] - warning, doesn’t render well on mobile.
No Answers In Genesis [2] - a primer on evolution / someone’s personal vendetta against creationism. Good thing it’s Web1.0, because the latency to AUS would be horrible.
Frank’s Compulsive Guide to Postal Addressss [3] - if you have any questions about the address system of any country in the world, it is answered here. An absolute treasure trove of information.
0: https://tf.nist.gov/tf-cgi/servers.cgi
0.a: https://www.rfc-editor.org/rfc/rfc868
1: https://gridwatch.templar.co.uk/
2: https://www.noanswersingenesis.org.au/
3: https://www.columbia.edu/~fdc/postal/
4: Requires GNU coreutils for `od` and `date` - also if you get round-robined onto a server that doesn’t support TIME, try again.
nc -w1 time.nist.gov 37 | od -An -tu4 -N4 --endian=big | awk '{print $1 - 2208988800}' | xargs -I{} date -d @{}
# EDIT: you can further shrink this by doing everything in awk, assuming GNU awk
nc -w1 time.nist.gov 37 | od -An -tu4 -N4 --endian=big | awk '{print strftime("%c", $1 - 2208988800}'When you're experimenting with a new technology, everything looks very different and everything looks new. When you look at the net result of people experimenting with it 30 years later, you can see that they were all constrained by the same limitations, and in aggregate - despite many differences - everything takes on a recognizable aesthetic that was produced by the limitations of the day, the technology, the genre, whatever.
These sites are all wildly different and extremely creative, yet they're all recognizably from the same decade or so.
Okay. Now step back from that. Humans - you, me, everyone - have learned a very complex visual language from birth, where certain cues indicate certain things and trigger certain memories. If you show me a picture of a dude wearing bell bottoms, we're probably in the 70s. If it's a girl with a nose ring and a midriff showing it's probably 2005 - but there are smaller cues within that. 99% of people don't think about this consciously when they see an image, or a website, or whatever. They just associate it with a time or a genre.
In design for the web, we've had decades of constraints come and go - we had Flash with its own weird aesthetics, Java embeds, etc. People remember a time and they associate a design style with that time, without really knowing why. So it's a question of choosing from that historical library and constructing something that makes people see what you want them to see. If you want them to associate something with the early 90s, then totally make it look like one of these pages.
The thing I was taught in design school was to attempt to make design that was timeless. This is always kind of impossible - because you're limited technologically in ways you don't even realize at the time, and because you're always influenced by what's around you. But try to make something that will look, in 20 years, like it was new. Very hard to do. Why do it? Because in 20 years, you can always go and make funny vintage pastiche references to what people did 20 years ago. But it's quite hard to make anything that doesn't show its age.
My favorite comparison of two sites from the same place is HAProxy: haproxy.com is the one meant for the C-Suite to be impressed, and haproxy.org is the one meant for people who are running it. It's also the reason that I suspect it's not just nostalgia that makes me think of text-heavy sites as being more authoritative (unless it's a share delusion by elder millenials, I guess). If you're going there, you probably are interested in finding a specific answer in technical documentation, not a sales pitch.
Zooming out to other industries entirely, look at cars: it's generally pretty easy to guess the decade of a car if you have any interest in them. However, with some, the designers have occasionally managed to blend the different eras together in a way that I would argue borders on timeless. The canonical example, IMO, is the Porsche 911. Before the 996 model, it had a certain look about it that updated, but didn't change. The 996 had the oft-mocked "fried egg headlights" (plus it was water-cooled, which angered purists), but other than that, it started a more gradual shift in the looks of the car. The 997, 991, and 992 all look remarkably similar from many angles, assuming all are wing-less. That's 21 years of models. Also, the 992 changed its rear vents to a vertical rather than horizontal configuration, which hasn't been used since the 911's predecessor, the 356 - a car that ceased production in 1966. That subtle change, along with some typography for the logo, makes it look way older than it is, but in a good way.
I'm a Datsun guy myself, and I like what Nissan did aesthetically with the new Z, because it's not a replica but it's got just enough callbacks in the form.
I think in all types of design, historical reference is a large part of your "color palette". But you don't want to fall into retro nostlgia or pastiche unless that literally is the whole point of the brand (like, Johnny Rockets or something).
One of the most embarrasing things that can happen to a designer (and I know from experience) is to find out that a style they chose or an image they created because they thought it looked good was inadvertently referencing something they either didn't know about, or which they had absorbed subconsciously. When other people get a reference in your work that you didn't intend, that's a mistake. It's why when I interview graphic designers I'm not looking for whether or not their work "looks good" - which is completely subjective. I'm interested in how versatile they are at mimicking and synthesizing a broad array of visual language, and whether they can explain their choices - including their awareness of cultural callbacks and the intentionality that went into choosing them.
So here are the fonts of the Facebook posts listed on a Facebook user's wall:
> Helvetica, Arial, sans-serif
> system-ui, -apple-system, BlinkMacSystemFont, Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif
Observe how there's no custom font, no weird font, and no "associations with some childhood Disney movie" to be found on a page seen and used by 2+ billions of users daily.
My outside opinion is that Meta does not give a shit at all about how Facebook looks at this point. I'm not here to make the case that revolutionizing their design would improve their onboarding rate now or something. I'm making the case that if you are some nobody with no network effects and no billion dollars, you have a better chance at getting people to read your content if you take the time to (a) get it out of system-ui fonts and (b) make a bunch of other aesthetic decisions that trigger certain pleasing feelings in your audience.
I think you’ve gotten mixed up between the system-ui font and the browser default font.
The system-ui font is modern. It was only added to CSS about ten years ago. It’s not Times New Roman. It wasn’t designed for dot matrix printers.
Everybody else here is talking about something that fits in with the rest of the system. You seem to be talking about something from the early 90s.
Leaving it up to your user's system font is also an arguably poor choice.
This couldn't be more wrong. Things have progressed since the '90s.
Apple, Google, Microsoft hired real typographers to create their new fonts. Apple uses San Francisco in their printed materials all the time.
On Apple devices, system-ui is San Francisco, a TrueType variable font with 2937 glyphs, 4 axes and 369 instances. The axes are width, optical size, grade and weight. San Francisco also has all of the goodies someone who cares about typography could want: ligatures, small caps, contextual alternatives, true fractions, etc.
I think this qualifies as "giving a shit". ;-)
BTW, you can see each named instance in the developer tools in Firefox and Chrome on macOS.
An instance is a combination of the 4 axes; the instance of San Francisco compressed thin uses can be specified in CSS as:
font-variation-settings: "wdth" 47, "opsz" 28, "GRAD" 400, "wght" 120.702
So developers/designers get all the features variable fonts have to offer without having to download anything.
Google has done something similar with Noto.
[1]: "WWDC Introducing San Francisco, the New System Fonts" -- https://www.youtube.com/watch?v=OpveNRh-jXU
[2]: "Meet the expanded San Francisco font family" -- https://developer.apple.com/videos/play/wwdc2022/110381
I know someone that is trying to break into this space but doesn’t have the past experience, and it’s almost impossible to catch up. I’d love to provide them with a resource.
In defense of Comic Sans, it’s not just for realtor pages. It can be effective for local, casual communication by appearing friendly and approachable. If I saw a flyer pinned to a corkboard advertising a fish and chips special in Comic Sans in a seaside town, my mouth would be watering, because I’d know that’s a mom and pop place that focuses more on the food and taking care of people than the marketing.
The Elements Of Typographic Style by Robert Bringhurst
"Five minutes to learn, a lifetime to master" kind of thing.
Heh. You absolutely nailed the concept. This is precisely right. Comic Sans is a totally crap font, but it's great if that's the feeling you want to get across! That's exactly how thoughtful design works. Level one is to know your references. Level two is: Use the kitsch when you want it. Use the profane. Use the found art. Then use the "classy" or "expensive" when you want to show a "classy" client. Level 3 and up is knowing how to play with those high and low cultural notes to make a kitschy client still look kitschy but subconsciously implant that the fish is of a slightly better quality; or make your "classy" real estate agent still look "classy" but show that they aren't a stuffy asshole. And do this without either client outright complaining.
Far as books, I'd qualify by saying that I learned the design craft on the job from an early age and was tutored by great art directors who let me experiment and explained these things to me; why what I was communicating with a certain background or certain font was going to negatively affect a consumer in a way I hadn't considered. And I had a couple great professors in college (but I dropped out). Most of the basic theory of the higher level of how to use this stuff to influence people is contained in Marshall McLuhan's "Understanding Media", which is the quintessential work on how one - in a design role - can change perception of the content of a piece by making informed psycho-sociological choices about the way it's presented visually. Lots of master works before and since on the concept of propaganda, but for designers McLuhan helpfully narrows it down to show that presentation is often more important than content, and for designers this means your role is essentially to master content the way an audio engineer masters a band's album. Which is often as important to the final output as the original recording quality itself. This is especially hard to do if you also wrote the content because it requires a certain objectivity about the work. Anyway, McLuhan's theory is timeless and kind of essential to get into the guts of everything: How brands work, how small design choices work, etc.
Being able to explain the difference between what looks good and being able to explain why you chose it (along with all the cultural references, positive and negative, which the choice is intended to trigger in the audience) makes the difference between a $40/hr design job and a $150/hr art direction job, so mastering the technique of selling the technique has a certain benefit as well. But you must come armed to your client with examples. The best way to learn is to look at everything you see around you and question all their design choices, why did they use those colors, those fonts, etc. and also see what trends are developing. Go back to the 1950s, 60s, 70s, 80s, 90s and see what they were using then. Now who is your target audience, and what feeling do you want to give them?
[edit] Just want to add: I was a purely technical child who learned to code and run a BBS way before I knew anything real about design. I came up doing what I thought was cool ANSI art and then "designed" some stuff in Photoshop 3.0 for people when I was 12. I didn't understand anything. When you're a technical person you tend to see design as a problem to solve with programs and with code. You don't realize that design is a programming language that runs on human brains. This was a revelation for me when I was about 15, and it's informed all my choices since. So yes - fonts matter.