{"id":5529,"date":"2019-04-30T21:41:01","date_gmt":"2019-04-30T19:41:01","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5529"},"modified":"2019-04-30T16:41:30","modified_gmt":"2019-04-30T14:41:30","slug":"58-bytes-of-css-to-look-great-nearly-everywhere","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/04\/30\/58-bytes-of-css-to-look-great-nearly-everywhere\/","title":{"rendered":"58 bytes of css to look great nearly everywhere"},"content":{"rendered":"

58 bytes of css to look great nearly everywhere<\/a><\/em><\/h1>\n

<\/p>\n

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>\n

main {\n  max-width: 38rem;\n  padding: 2rem;\n  margin: auto;\n}\n<\/pre>\n
let’s break this down.<\/p>\n
max-width: 38rem<\/code><\/h3>\n
it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.<\/p>\n
padding: 2rem<\/code><\/h3>\n
if the display’s width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone – the padding also provides sorely-needed top and bottom whitespace.<\/p>\n
margin: auto<\/code><\/h3>\n
this is really all that is needed to center the page, because main is a block element under semantic html5.<\/p>\n
\n
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>\n
update: <\/b>following some discussion (see footer), i’ve since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays.<\/p>\n
update 2: <\/b>the ch<\/code> unit was brought to my attention here<\/a>, and i quite like it! i’ve since changed to 70ch\/2ch, 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>\n","protected":false},"excerpt":{"rendered":"
58 bytes of css to look great nearly everywhere<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,127],"tags":[],"class_list":["post-5529","post","type-post","status-publish","format-link","hentry","category-documentations","category-html","post_format-post-format-link"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1rb","jetpack-related-posts":[{"id":6310,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":5529,"position":0},"title":"Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font. Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8400,"url":"https:\/\/monodes.com\/predaelli\/2021\/05\/04\/5-awesome-css-tricks\/","url_meta":{"origin":5529,"position":1},"title":"5 Awesome CSS tricks","author":"Paolo Redaelli","date":"2021-05-04","format":false,"excerpt":"Do awesome things in fewer code lines with CSS Source: 5 Awesome CSS tricks every developer should know | by FAM | Apr, 2021 | Level Up Coding Smooth scrolling: html { scroll-behavior: smooth; } Resize images to fit img { max-width:100%; height:auto; } #3: Setting an image as cursor\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10482,"url":"https:\/\/monodes.com\/predaelli\/2023\/05\/25\/a-c-compiler-that-fits-within-the-512-byte-boot-sector\/","url_meta":{"origin":5529,"position":2},"title":"A C compiler that fits within the 512 byte boot sector","author":"Paolo Redaelli","date":"2023-05-25","format":false,"excerpt":"SectorC (github) is a C compiler written in x86-16 assembly that fits within the 512 byte boot sector of an x86 machine. It supports a subset of C that is large enough to write real and interesting programs. It is quite likely the smallest C compiler ever written. Source: xorvoid\u2026","rel":"","context":"In "Fun"","block_context":{"text":"Fun","link":"https:\/\/monodes.com\/predaelli\/category\/fun\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10748,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","url_meta":{"origin":5529,"position":3},"title":"My little printer-friendly CSS","author":"Paolo Redaelli","date":"2023-08-30","format":false,"excerpt":"Here is my little \"Printer friendly CSS\" that I add to each and every page using Simple Custom CSS and JS \/* override styles when printing *\/ @media print { @page { margin: 2cm; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } \/* target the first\u2026","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11412,"url":"https:\/\/monodes.com\/predaelli\/2024\/03\/05\/css-for-printing-to-paper\/","url_meta":{"origin":5529,"position":4},"title":"CSS for printing to paper","author":"Paolo Redaelli","date":"2024-03-05","format":false,"excerpt":"CSS for printing to paper I do like articles explaining how to use CSS for printing! CSS for printing to paper Introduction Sample files @page @media print Width, height, margin, and padding Element positioning Multi-page documents with repeating elements Portrait \/ Landscape mode Data source Essentials cheatsheet Introduction At work,\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4923,"url":"https:\/\/monodes.com\/predaelli\/2018\/11\/17\/css-the-perfect-print-stylesheet-the-jotform-blog\/","url_meta":{"origin":5529,"position":5},"title":"CSS: The Perfect Print Stylesheet | The JotForm Blog","author":"Paolo Redaelli","date":"2018-11-17","format":false,"excerpt":"Here's something I shall add to my themes, expecially \"bollettino\" and \"qualita\": CSS: The Perfect Print Stylesheet | The JotForm Blog CSS: The Perfect Print Stylesheet by Andreas Hecht Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"a4-print","src":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=5529"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5529\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=5529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=5529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=5529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}