> ...it is a best practice to allow users to manually toggle the color-scheme as well.
> 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?
Like, this is a clever enough way to play golf and find an average that works between major browsers and come out with something that should generally be legible. "Look great" is a bit of hyperbole, because it'll always look like shit. Legible shit, probably.
> To make the website more readable, we’ll limit the content width
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, the user, can already control the content width by resizing my browser, thank you very much.
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.
Please don't listen to this. You are in an incredibly small minority with that preference. Most readers prefer a line length of 50-75 characters, similar to a novel. Newspaper columns are even narrower than that for easier scanning. If I have to move my head or resize my browser to read your content, it's poorly formatted.
I wonder why light/dark themes became the norm in a couple of years, but we are still begging for the wide/narrow themes or two or three themes with different font sizes. Those would be very useful as well. And I'm as guilty as the next dev of course.
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.
I, the user on a mobile device, cannot resize my browser. This used to be supported for a very short period of time (I think? I might be remembering the short period of time Firefox and Chrome were available as fullscreen-only Windows 8 Metro apps) but it's not anymore.
I love these websites as they highlight not only the complexity of modern web design but also that the web is made for writing content. There are so many variations on this "motherfuckingwebsite" concept with a lot of different opinions that I would recommend everyone interested in webdesign to google that term and read through a bunch of them.
yknow what's also cool is specifying the font you want, so your website looks the way you want it to. This is generally referred to as "design" and, while considered an antipattern among people who entirely spurn aesthetics, it has something like a 3000 year history of getting people to engage with your content, assuming you have some.
Unfortunately efficient CSS is a lost cause. I love doing this kind of work and making single page efficient product. Unfortunately no one cares how you spend your bytes because it's a battle between sociopaths and everyone tired of their shit.
What are good static site generators (SSGs) to create a simple minimalist academic-like website?
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.
No need for a SSG. Just copy something like this: https://thebestmotherfucking.website and make every page by hand like you are some 80 year old greybeard.
I use github pages with jekyll. It took a bit of time to make a custom theme and setup the custom domain, but its really simple now to just add markdown file and push to github.
So the strongly worded argument is just because on one locale of an unsupported proprietary system, which renders their entire desktop and applications with an abysmal font, you might get your website rendered with an abysmal font?
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.
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.
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;
}
But I doubt that you actually wanted to apply it to main: if you have a site header or footer outside that, you probably still want the same side padding. So it’s probably better to use body margin:
body {
margin: 1rem;
}
main {
max-width: 70ch;
margin-inline: auto;
}
… and I have there decreased it from the wildly-excessive ~40px to the reasonable ~16px.
I don't get it. I mean, yeah I get wanting to make extremely minimal web pages that are readable on every screen. But if that's your goal, the solutions are pretty well understood. Who's the target audience for this, i.e. who are the people who are trying to make a bare bones web page but just struggling with `max-width` - and why's it at the top of HN?
max-width: min(70ch, 100% - 4rem);
Results in one tiny column of text on desktop, both sides are empty margins. Its an interface exclusively for mobile phones.
I still believe there should be a `unset user agent styles` that could be set somewhere in the document. Why make devs ship reset CSS if they are going to be undoing all your pretty janky default styles anyway? Here's a list of arguments and refutations I know this suggestion is going to get:
> 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.
68 comments
[ 4.8 ms ] story [ 80.5 ms ] threadIf you only target modern (5 year window) that one popular reset can be trimmed.
> 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?
Cash money
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.
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.
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.
It's nice of you to consider only your own perspective.
https://motherfuckingwebsite.com/
and
http://bettermotherfuckingwebsite.com/
You hear this, HN?
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.
https://github.com/loldot/loldot.github.io
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.
Sounds like you would enjoy https://mastrojs.github.io – a _minimal_ Astro alternative.
https://infinnie.github.io/blog/2017/systemui.html
This PR to Bluesky has more recent discussion about it and offers workarounds:
https://github.com/bluesky-social/social-app/pull/6139
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.
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 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:
But I doubt that you actually wanted to apply it to main: if you have a site header or footer outside that, you probably still want the same side padding. So it’s probably better to use body margin: … and I have there decreased it from the wildly-excessive ~40px to the reasonable ~16px.* { 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.