
339 Bytes of Responsive CSS - arkokoley
https://blog.koley.in/2019/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!

------
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.

~~~
nailer
> It becomes hard when you need a grid

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

~~~
notahacker
Sure, but that's only easy if you choose to ignore the 1 in 10 users that it
doesn't work for, which is too many for most real world use cases, especially
for something as fundamental as the layout of the page.

~~~
extra88
Not everyone needs to have the same experience. A common pattern is to make a
responsive layout where CSS Grid isn't used on the smallest screens and that's
the default. Many of the browsers that don't support CSS Grid are mobile ones
anyway but even in a desktop browser they can get a not-ideal but usable
layout.

~~~
jypepin
you are right, and that is a great solution if you don't care about offering
the actual experience to all users. If the original problem you need to solve
is "using css to style a website so all users have the expected experience"
then you need more than 5 lines of css.

~~~
extra88
"The" actual experience is a myth, all users are not going to have the same
experience no matter what, that's one of the points behind responsive design.
What I was presenting was an alternative to ignoring CSS Grid because someone
thinks it doesn't have sufficient browser adoption.

------
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...](https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-
state/developers/accessibility-handbook/mouse-and-keyboard-events/links/do-
not-remove-the-underline-from-links/)

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

------
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/](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...](https://webaim.org/techniques/hypertext/link_text#underlining)

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.

~~~
boomlinde
That may be true, but in this case simply listing a few system fonts in their
order of precedence resulted in less code to maintain since you lose the
import directive. See the updated article.

In general, the way I see it, relying on code and data from a third party at
run-time is a liability. The code and data you no longer have to maintain is
now impossible to audit because the vendor may replace it, stop providing the
service, start using it for tracking etc. at any moment. It's code that you
_should_ be maintaining but _can 't_.

------
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](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.

------
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.

~~~
kstenerud
It becomes an accessibility problem, because the contrast is too low, and not
all eyeballs are the same. Low contrast combined with a thin font makes it
very difficult to read.

------
vladocar
Here is something similar: [https://github.com/vladocar/Basic-CSS-Typography-
Reset](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/](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

~~~
DanBC
You can resize the window and the text flows to fit, which is something a
weird amount of websites prevent you doing. You can ctrl+ to increase font
size if it's too small, or ctrl- if it's too big.

I dislike the white background, but otherwise it's very readable for the way I
use web browsers -- one of some open windows.

~~~
boomlinde
Browsing the web using half of 1600 pixels in width is a surprising amount of
pain in the ass, but perfect for CSS-free sites. It seems that designers tend
to design for full screen, which I guess reflects their own workflow, but not
at all mine as a programmer.

------
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"?

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

~~~
xvector
it's obvious satire and a lighthearted joke with a kernel of truth. chill :)

------
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.

------
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/](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.

------
onion2k
It's ironic that the author chose to use a page that loads 1.5Mb of data,
including 12 separate stylesheets, to write about a minimal stylesheet.

~~~
smoyer
Yep ... the first thing I did was to see if he was "eating his own dog-food".
As an aside, I'd recommend against putting the linked site on a projector at
work (or at least look at it first to determine whether it fits your
organization's culture).

~~~
arkokoley
> I'd recommend against putting the linked site on a projector at work

Is it because of the linked site?

~~~
arkokoley
@purerandomnesss OP here. Copied that from
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

I think, I should probably change the text.

