[HN Gopher] "58 bytes of CSS to look great nearly everywhere" mk...
___________________________________________________________________
"58 bytes of CSS to look great nearly everywhere" mkws theme
Author : todsacerdoti
Score : 85 points
Date : 2022-10-01 13:07 UTC (9 hours ago)
(HTM) web link (t.mkws.sh)
(TXT) w3m dump (t.mkws.sh)
| antics9 wrote:
| I played around with this the last time it was posted here and
| this is my take. 50 bytes and looks great everywhere:
|
| html{margin:0 auto;max-width:80ch;line-height:1.6}
|
| Example: https://chai.guru/www/
| chrismorgan wrote:
| <link rel=stylesheet href=s.css?2020-12-12T18:42:29Z>
|
| Um... did you really just spend 53 bytes on loading a 62-byte
| (plus HTTP overhead) external stylesheet?
|
| Here, let me fix that with these 61 bytes:
| <style>main{max-width:38rem;padding:2rem;margin:auto}</style>
| adriangrigore wrote:
| Yeah, I'm considering inlining styles by default in `mkws`.
| Currently, they're not.
| gennarro wrote:
| I'm getting a lot of side to side scroll on mobile. That kills it
| for me
| Waterluvian wrote:
| Same. Nothing makes a webpage uglier than when it is irritating
| to perform basic navigation. I have to imagine the majority of
| websites are visited on mobile these days.
| adriangrigore wrote:
| That's just the <pre> tags, the original CSS doesn't cover
| <pre> tags. I kept the original intact! You could simply do a
| pre { overflow-x: auto; }
|
| to solve the side scroll.
| e12e wrote:
| Seems this could use a hyphenation-fix - it's pretty
| terrible ragged right as is. This should now be possible to
| fix reasonably with plain css3.
|
| https://stackoverflow.com/questions/8937591/is-it-
| possible-t...
| [deleted]
| peanut_worm wrote:
| looks terrible and scrolling is broken on mobile lol what is
| this?
| yieldcrv wrote:
| junior developers with a megaphone
| bArray wrote:
| Here you go: https://coffeespace.org.uk/tools/css-64.htm
|
| A 64 byte CSS dark theme with a monospace font based on the 58
| byte CSS theme [1] and a page that could be an entry for the 1kB
| club [2].
|
| [1]
| https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
|
| [2] https://1kb.club/
| sphars wrote:
| Just took a look at your site, doesn't seem to be working (on
| Bromite, with dark theme on device enabled):
| https://ibb.co/YfLzzLs
| tipsytoad wrote:
| Anyone got recommendations for a "minimal" CSS template?
| yoyohello13 wrote:
| MVP.css: https://andybrewer.github.io/mvp/
| sphars wrote:
| I've come to enjoy using Simple.css: https://simplecss.org/
| adriangrigore wrote:
| I personally would go with https://oxal.org/projects/sakura/
| j-krieger wrote:
| Nothing about this looks great. Margins and Paddings feel "off".
| Heading 6 is too small to read comfortably on desktop (even worse
| on mobile). The text font is too thin and the entire site feels
| tiring to read in contrast with the white background. The entire
| content column is only 600 pixels wide on my 1080p monitor, so
| you'd need to scroll a lot for long texts. It's also weirdly off-
| center.
|
| This entire idea is about size first and second, accessibility
| and look go dead last.
|
| There is no advantage to using 58 bytes only. Just use 14KB if
| you care that much, which is the size the first 10 TCP packets
| that your server sends to the client before the first ACK anyway
| [1].
|
| [1]: https://www.tunetheweb.com/blog/critical-resources-and-
| the-f...
| markdown wrote:
| > It's also weirdly off-center.
|
| It isn't. Just looks that way because the first few sentences
| are short.
| kbenson wrote:
| > The entire content column is only 600 pixels wide on my 1080p
| monitor
|
| Hot take - we need to get over maximizing browser windows. We
| aren't often using 14" screens anymore, and neither are we
| browsing at 480p. We're rapidly approaching the point where it
| just makes no sense, yet people persist in old habits and then
| can't see that their (now) counterproductive behaviors are
| causing some of their problems.
|
| I switched to a 40" 4k TV a few years back. It took me a while
| to break myself of wanting to maximize things, but I had to
| because the screen is on a desk in front of me, and it's close
| enough that it's impossible to focus on all at once. I often
| use a quarter of it for an equivalent 1080p screen, but far
| more often I'm just throwing windows where I want sized for
| what I want, zoomed to appropriate comfort, because it's a wall
| of screen in front of me and ignoring that is
| counterproductive.
|
| If you have a small screen and you want to maximize windows
| because of that and the website you're looking at isn't using
| the space effectively, zoom it. All the browsers support zoom
| now. Stop trying to fit square pegs into round holes.
| croes wrote:
| So you are saying the user should adapt to the style and not
| the content to the user.
| cantSpellSober wrote:
| That's a really tired take, developer-centricity instead of
| user-.
|
| Line length too long in the current container width? Divide
| the text into columns.
| kbenson wrote:
| > developer-centricity instead of user
|
| Hardly. The user centric take is _mobile_ , is the majority
| of all website traffic and I'm not even addressing at all.
|
| What I'm doing is making a case that desktop users actually
| make better use of their monitors that have gotten larger
| over time, and not just maximizes windows, and for
| developers to _not_ assume everyone else maximizes windows.
|
| Most people browse using a mobile device now, so really
| this is about the dwindling few left that have a personal
| desktop computer they use. That's gamers, professionals and
| office workers. I think most of those have already learnt
| this lesson, that when you need to have multiple programs
| opened at once, maximizing one isn't super effective.
|
| > Line length too long in the current container width?
| Divide the text into columns.
|
| Or just maximize for no reason and have room for other
| windows if you want, or zoom the content, whichever makes
| the most sense for your current situation. Requiring
| someone design their site around being able to dynamically
| expand to multiple columns, and figure out how to make that
| work well with what may be side menus and any number of
| other design choices all because a minority (probably a
| minority of a minority) set of users wants to maximize to
| their own detriment seems kind of ridiculous.
|
| People know how to zoom. They do it all the time on sites
| that are legitimately hard to read or when they are having
| problems (if I happen to be without my glasses I zoom the
| shit out of sites). The only people I hear complaining
| about this are developers who expect maximizing to continue
| to have the same benefit it did a decade or two ago even
| though everything else has changes, which is why I think
| it's rich that this is being called developer centric.
| mattl wrote:
| I can't understand maximized windows on desktop at all.
| Dylan16807 wrote:
| Half a 1080p monitor is still 960 pixels wide.
| kbenson wrote:
| So zoom a little if it's a problem? It's a few clicks, or
| holding a keyboard button and scrolling in most browsers.
| If it's still easily readable without zooming,
| congratulations, you've found a site that is easy to have
| open along side other things. In the meantime, I bet it
| works well for mobile, which is likely the majority of
| traffic they'll see, and is often harder to zoom
| effectively and still retain an effective overall
| readability experience, since mobile platforms often don't
| re-flow but just magnify on zoom.
| SoftTalker wrote:
| I find tiling window managers help with big monitors. Windows
| still feel "maximized" but don't take up the whole screen.
| nmilo wrote:
| If it's 58 bytes it can fit inline into your 14kB HTML file.
| IncRnd wrote:
| So can 5,800 or 13,580 bytes, which seemed to be the point.
| peanut_worm wrote:
| youd be better off using default browser styling than this
| TheRealPomax wrote:
| You're arguing over 58 bytes. If someone just wants a
| minimalistic page, setting a centered body with max-width
| is step 1. If you stop after step 1, cool. If not: your
| page is probably going to look better.
|
| However, there is a marked difference between "the content
| is centered in the browser with whitespace on the sides"
| and the browser default "it's on the left with all the
| whitespace on the right". The first one wins. That _should_
| have been the browser default in absence of a stylesheet
| rel, but CSS was born when screens were majestically tiny
| and the idea of a 24" widescreen was literally a vapourware
| joke, so it wasn't, and so it never will.
| bhaak wrote:
| Default browser styling sucks tremendously for mobile
| browsers.
| neogodless wrote:
| As per the linked content, this is based on a recent submission
|
| 6 days ago (242 comments)
|
| https://news.ycombinator.com/item?id=32972004 (gist.github.com)
|
| This older submission with the same title links to a 404[0]!
|
| https://news.ycombinator.com/item?id=19607169 (jrl.ninja)
|
| 3 years ago (255 comments)
|
| [0] Web Archive link
| https://web.archive.org/web/20210318102514/https://jrl.ninja...
| denton-scratch wrote:
| Title is misleading. There is zero CSS in the article, which is
| about a static site generator based on shell script.
|
| The CSS fragment referred to can be found here:
| https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
| throw_m239339 wrote:
| It reminds me the whole "you don't need jquery/vanilla.js". 10+
| years after that, it seems that movement went nowhere given how
| framework heavy webpages have become.
| adriangrigore wrote:
| It says "mkws theme" in the title.
| denton-scratch wrote:
| I had no idea what "mkws" is; I did know what CSS is. I was
| expecting a CSS "theme".
___________________________________________________________________
(page generated 2022-10-01 23:01 UTC)