-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path58-bytes-of-css-to-look-great-nearly-everywhere.html
30 lines (30 loc) · 9.52 KB
/
58-bytes-of-css-to-look-great-nearly-everywhere.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html><html lang=en-uk><head><script data-goatcounter=https://ruivieira-dev.goatcounter.com/count async src=//gc.zgo.at/count.js></script><script src=https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js></script><script src=https://unpkg.com/[email protected]/dist/cdn.min.js></script><script type=module src=https://ruivieira.dev/js/deeplinks/deeplinks.js></script><link rel=preload href=https://ruivieira.dev/lib/fonts/fa-brands-400.woff2 as=font type=font/woff2 crossorigin=anonymous><link rel=preload href=https://ruivieira.dev/lib/fonts/fa-regular-400.woff2 as=font type=font/woff2 crossorigin=anonymous><link rel=preload href=https://ruivieira.dev/lib/fonts/fa-solid-900.woff2 as=font type=font/woff2 crossorigin=anonymous><link rel=preload href=https://ruivieira.dev/fonts/firacode/FiraCode-Regular.woff2 as=font type=font/woff2 crossorigin=anonymous><link rel=preload href=https://ruivieira.dev/fonts/vollkorn/Vollkorn-Regular.woff2 as=font type=font/woff2 crossorigin=anonymous><link rel=stylesheet href=https://ruivieira.dev/css/kbd.css type=text/css><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>58 bytes of CSS to look great nearly everywhere · Rui Vieira</title>
<link rel=canonical href=https://ruivieira.dev/58-bytes-of-css-to-look-great-nearly-everywhere.html><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content="all,follow"><meta name=googlebot content="index,follow,snippet,archive"><meta property="og:title" content="58 bytes of CSS to look great nearly everywhere"><meta property="og:description" content="The original page seems to have disappeared from the Internet1 (see: link rot), so the original contents are kept here.
When making this website, I wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main { max-width: 38rem; padding: 2rem; margin: auto; } Let’s break this down.
max-width: 38rem It appears that the default font size for most browsers is 16px, so 38rem is 608px."><meta property="og:type" content="article"><meta property="og:url" content="https://ruivieira.dev/58-bytes-of-css-to-look-great-nearly-everywhere.html"><meta property="article:section" content="posts"><meta property="article:modified_time" content="2023-09-02T17:28:34+01:00"><meta name=twitter:card content="summary"><meta name=twitter:title content="58 bytes of CSS to look great nearly everywhere"><meta name=twitter:description content="The original page seems to have disappeared from the Internet1 (see: link rot), so the original contents are kept here.
When making this website, I wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main { max-width: 38rem; padding: 2rem; margin: auto; } Let’s break this down.
max-width: 38rem It appears that the default font size for most browsers is 16px, so 38rem is 608px."><link rel=stylesheet href=https://ruivieira.dev/css/styles.css><!--[if lt IE 9]><script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js></script><script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script><![endif]--><link rel=icon type=image/png href=https://ruivieira.dev/images/favicon.ico></head><body class="max-width mx-auto px3 ltr" x-data="{currentHeading: undefined}"><div class="content index py4"><div id=header-post><a id=menu-icon href=#><i class="fas fa-eye fa-lg"></i></a>
<a id=menu-icon-tablet href=#><i class="fas fa-eye fa-lg"></i></a>
<a id=top-icon-tablet href=# onclick='$("html, body").animate({scrollTop:0},"fast")' style=display:none aria-label="Top of Page"><i class="fas fa-chevron-up fa-lg"></i></a>
<span id=menu><span id=nav><ul><li><a href=https://ruivieira.dev/>Home</a></li><li><a href=https://ruivieira.dev/blog/>Blog</a></li><li><a href=https://ruivieira.dev/draw/>Drawings</a></li><li><a href=https://ruivieira.dev/map/>All pages</a></li><li><a href=https://ruivieira.dev/search.html>Search</a></li></ul></span><br><div id=share style=display:none></div><div id=toc><h4>Contents</h4><nav id=TableOfContents><ul></ul></nav></ul></nav></div></span></div><article class=post itemscope itemtype=http://schema.org/BlogPosting><header><h1 class=posttitle itemprop="name headline">58 bytes of CSS to look great nearly everywhere</h1><div class=meta><div class=postdate>Updated <time datetime="2023-09-02 17:28:34 +0100 BST" itemprop=datePublished>2023-09-02</time>
<span class=commit-hash>(<a href=https://ruivieira.dev/log/index.html#d64c4a5>d64c4a5</a>)</span></div></div></header><div class=content itemprop=articleBody><blockquote><p>The original page seems to have disappeared from the Internet<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup> (see: link rot), so the original contents are kept here.</p></blockquote><p>When making this website, I wanted a simple, reasonable way to make it look good on most displays.
Not counting any minimization techniques, the following 58 bytes worked well for me:</p><div class=highlight><pre tabindex=0 style=background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-css data-lang=css><span style=display:flex><span><span style=color:navy>main</span> {
</span></span><span style=display:flex><span> <span style=font-weight:700>max-width</span>: <span style=color:#099>38</span><span style=color:#458;font-weight:700>rem</span>;
</span></span><span style=display:flex><span> <span style=font-weight:700>padding</span>: <span style=color:#099>2</span><span style=color:#458;font-weight:700>rem</span>;
</span></span><span style=display:flex><span> <span style=font-weight:700>margin</span>: <span style=font-weight:700>auto</span>;
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><p>Let’s break this down.</p><ul><li><p><code>max-width: 38rem</code>
It appears that the default font size for most browsers is <code>16px</code>, so <code>38rem</code> is <code>608px</code>.
Supporting <code>600px</code> displays at a minimum seems reasonable.</p></li><li><p><code>padding: 2rem</code>
If the display’s width goes under <code>38rem</code>, then this padding keeps things looking pretty good until around <code>256px</code>.
While this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.</p></li><li><p><code>margin: auto</code>
This is really all that is needed to center the page, because main is a block element under semantic <code>html5</code>.</p></li></ul><p>A key insight: it took me a surprising number of iterations to arrive at this point.
Perhaps that speaks to the fact that I know nothing about “modern” web development, or, as i’m more inclined to believe, just how hard it is to keep it simple in a world of complication.</p><blockquote><p>[!Update]
Following some discussion (see footer), I’ve since changed the padding to <code>1.5rem</code> for a happier compromise between mobile and desktop displays.</p></blockquote><blockquote><p>[!Update 2]
The <code>ch</code> unit was brought to my attention here, and I quite like it!
I’ve since changed to <code>70ch</code> / <code>2ch</code>, which looks nearly the same with 2 less bytes, except that the padding is a little bit smaller (a good thing for mobile).</p></blockquote><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>A cached version can still be seen, hopefully, at <a href=http://web.archive.org/web/20210318102514/https://jrl.ninja/etc/1/>http://web.archive.org/web/20210318102514/https://jrl.ninja/etc/1/</a> <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p></li></ol></div></div></article><div id=footer-post-container><div id=footer-post><div id=nav-footer style=display:none><ul><li><a href=https://ruivieira.dev/>Home</a></li><li><a href=https://ruivieira.dev/blog/>Blog</a></li><li><a href=https://ruivieira.dev/draw/>Drawings</a></li><li><a href=https://ruivieira.dev/map/>All pages</a></li><li><a href=https://ruivieira.dev/search.html>Search</a></li></ul></div><div id=toc-footer style=display:none><nav id=TableOfContents></nav></div><div id=share-footer style=display:none></div><div id=actions-footer><a id=menu-toggle class=icon href=# onclick='return $("#nav-footer").toggle(),!1' aria-label=Menu><i class="fas fa-bars fa-lg" aria-hidden=true></i> Menu</a>
<a id=toc-toggle class=icon href=# onclick='return $("#toc-footer").toggle(),!1' aria-label=TOC><i class="fas fa-list fa-lg" aria-hidden=true></i> TOC</a>
<a id=share-toggle class=icon href=# onclick='return $("#share-footer").toggle(),!1' aria-label=Share><i class="fas fa-share-alt fa-lg" aria-hidden=true></i> share</a>
<a id=top style=display:none class=icon href=# onclick='$("html, body").animate({scrollTop:0},"fast")' aria-label="Top of Page"><i class="fas fa-chevron-up fa-lg" aria-hidden=true></i> Top</a></div></div></div><footer id=footer><div class=footer-left>Copyright © 2024 Rui Vieira</div><div class=footer-right><nav><ul><li><a href=https://ruivieira.dev/>Home</a></li><li><a href=https://ruivieira.dev/blog/>Blog</a></li><li><a href=https://ruivieira.dev/draw/>Drawings</a></li><li><a href=https://ruivieira.dev/map/>All pages</a></li><li><a href=https://ruivieira.dev/search.html>Search</a></li></ul></nav></div></footer></div></body><link rel=stylesheet href=https://ruivieira.dev/css/fa.min.css><script src=https://ruivieira.dev/js/jquery-3.6.0.min.js></script><script src=https://ruivieira.dev/js/mark.min.js></script><script src=https://ruivieira.dev/js/main.js></script></html>