339 Bytes of Responsive CSS

[asattarmd]

Good, but I'd replace that font with the default:

`font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif`

It'd remove the unnecessary font and still look good.

[arkokoley]

Default fonts are certainly the best thing to have. I am a sucker for "Fira", so included that!

[saagarjha]

I'd add the standard "system-ui" before all of that.

[crehn]

Nowadays `font-family: system-ui, sans-serif` is good enough.

[jypepin]

That's nice but really, the problem with css (or what's hard difficult about it) is not designing a single page that has a single column of text with some titles. Any large css files that this is supposed to counter will probable have very similar (and as small) css rules for that same thing. It becomes hard when you need a grid, templates, images, and other more complex designs.

[_pmf_]

Lack of server side modularization of HTML strikes again. It makes no sense that we still have no declarative way of modularizing content apart from using IFRAME. Why can I dynamically load parts and merge it in the DOM via JS but not via a declarative HTML feature?

[nailer]

> It becomes hard when you need a grid

CSS includes a grid. It works in every current browser.

[caillou]

There is a small accessibility problem with the CSS presented on this page. The author set `text-decoration: none;` on the links, relying only on color to identify them. This should be avoided.

C.f. https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-st...

[gb]

Also related, the link/background colour combination fails WCAG contrast guidelines.

[arkokoley]

Very interesting point. My thoughts were along the lines of "underlined links look bad". I did not realise this could be an accessibility problem.

[zichy]

1. Please do not import external resources from Google Fonts if you don’t have to. (Hint: You never really have to.)

2. If you want to use as little CSS as possible, simply use `sans-serif`. Otherwise try this font stack: http://markdotto.com/2018/02/07/github-system-fonts/

2. Fira Sans is actually quite nice, but please do not use `font-weight`s below `400` for continuous text. That’s really hard to read.

3. Since only the `300` weight is imported, the entire text will be thin – even headlines and `strong`.

4. Please leave the link text underlines for accessibility: https://webaim.org/techniques/hypertext/link_text#underlinin...

bettermotherfuckingwebsite.com did a better job.

[boomlinde]

339 bytes which load an additional 241 bytes of CSS to load a 53k custom font...

What is the point people are trying to make with titles like this? It's like claiming "50 bytes to make a website" after you figure out that you can just iframe Google.

[tasuki]

The less code you write the less you have to maintain.

Or at least that's how I understood this. Not attempting to save the few kb of network traffic, rather trying to reduce the complexity and the amount of code one has to maintain in the future.

[mad182]

apt-get install wordpress

See - I made a blog in one line of code. I'm a coding genius 8)

[datenwolf]

What is it with all those reduced font/background contrast styles? To me these are terribly hard to read. As a matter of fact a large part of my Stylish/Greasemonkey sets are just there to get back decent contrast on text.

[reustle]

Similar project yesterday

https://news.ycombinator.com/item?id=19607169

[josteink]

I really don’t like that Google font. Too lightweight and hard to read.

And if readability suffers, I’ll rather take the crude original motherfucking website over this.

[ChrisGranger]

You can save three more bytes by making the background color #eee. ^^

[arkokoley]

339 was a more interesting number than 336. I like odd numbers. I'm odd.

[smoyer]

Technically you don't need the linefeed characters either.

[andrepd]

Why such thin grey text? Why sacrifice readability as a matter of principle? What's wrong with black on white, like a regular f*cking book or newspaper?

[arkokoley]

Because paper is paper and screens are different. The white paper is slightly on the grey side compared to white on screen. And that hurts to look at for long.

Thin text is a personal preference that I made here. No principles there.

[vladocar]

Here is something similar: https://github.com/vladocar/Basic-CSS-Typography-Reset

[deftnerd]

This is spectacular, thank you. It's small enough to just inline into the webpage and provides a nice enough experience to just leave it alone for a very basic page.

[arendtio]

Sometimes I wish some of those markdown viewers would come with such an effective CSS. For example, the KDE document viewer Okular can display markdown files but they look just awful.

Once I tried finding the source of the Okular style but ended up creating a custom script to convert Markdown files to PDF files with a custom CSS (via Chromium...).

[new_here]

All this CSS minimalism reminds me of Dan Luu's post about Web Bloat: https://danluu.com/web-bloat/

His website is refreshingly light and fast, but that's still no excuse for Times New Roman. Maybe it's a retro irreverence thing.

[r0bbbo]

Times New Roman is fine - serif fonts are supposedly more readable - it's the line widths that kill me here - figuring out which line you're due to start on next really disrupts flow

[tw20190409mhbcd]

Hardly anyone is writing their styles to set the body text to Times New Roman. Aside from serif typefaces not actually being so bad, if you're seeing Times New Roman on sites like these, it's because you haven't set your default font and your browser is falling back to it on your system.

Fixing this in Firefox is as easy as opening about:preferences in a new window and selecting your preferred sans font. Dan's site will instantly be transformed, and every other site like his (e.g. http://cr.yp.to/ https://motherfuckingwebsite.com etc) will be rendered similarly for all future visits.

[half-kh-hacker]

The website actually uses the default font for your browser. I've always changed this to a sans-serif font.

[bhaak]

This is not CSS minimalism, this is NO CSS.

How that site is rendered on your device is the default look of any website in your browser before any CSS is applied.

This site would actually profit a lot from this minimal CSS as the defaults are bad and on mobile they are even worse.

[andreareina]

There's also the site (can't find it anymore, anyone got a link?) that offered a different metric for how bloated your site is: divide the total page weight by the same page's contents rendered into a jpeg.

[jypepin]

a lot of people would argue that his website is very hard to read

[StreamBright]

Is there anybody here who is deeply in the frontend rabbithole and can recommend a JS free CSS framework that we can use for a project where readability & UX matters a lot? Somebody recommended material.io but is it not JS free. I was wondering if there is a JS free CSS framework that looks great.

[arkokoley]

My personal favorites have been Bulma and Getskeleton.com.

Somebody in the comments recommended tailwind.css

[Cthulhu_]

A nonoffensive version of "better motherfucking website"?

[bru]

A similar rhetoric is actually present on the linked example page: https://blog.koley.in/baserock/

[kristianc]

No, he links to one of those as well for good measure.

[fastbeef]

Ughn, I really thought that this rah-rah pseudo-masculine tough guy aesthetic was something we've collectively moved on from?

[davidhyde]

Is CSS considered responsive if there are no CSS media queries? I didn't see any media queries in the authors css script.

[rchaud]

It's "responsive" in the way a single column of content can be responsive. Really the only gain was that a max-width property was set, so content won't stretch to the edges of your desktop display.

[dxxvi]

Personally, I hate max-width which is a way to waste the screen estate, I think.

[arendtio]

Kinda funny... While I understand your point I feel the opposite. I hate it when people do not include a max-width because then I have to care about it. Yes, the Firefox reader view makes it quite easy, but I still prefer having a ready-to-read layout by default.

But you are right, in this case, it all comes down to personal preference.

[arkokoley]

True. But reading lines longer than 90 char is difficult. Probably multi-column text is the way to go.

[thojest]

Nice, I just would use a brighter black for the font. Try #565656

[arkokoley]

That wouldn't go well with the font I was using. Fira Light is very thin as it is. A lighter shade of black would affect readability on certain screens.

[blissofbeing]

fork of the fork JSFiddle: https://jsfiddle.net/abmnyjdc/1/

[nukeop]

7 CSS declarations and you too can include a Google tracker in your website. No thanks. Host your assets yourself.