Hacker News Reader

Comment by amanzi | Hacker News Reader

This Github repository tracks a whole bunch of these drop-in CSS files: https://github.com/dohliam/dropin-minimal-css

And you can use this demo site to switch between them all on the fly: https://dohliam.github.io/dropin-minimal-css/

This is really useful! Thanks for linking to it.

I also have a related repository. It is a gallery of screenshots of classless CSS themes: https://github.com/dbohdan/classless-css. I've just added a link to the drop-in CSS switcher there.

Another one here: https://www.cssbed.com https://github.com/ubershmekel/cssbed

It's a shame how few of these prevent horizontal scroll on mobile. Usually the table and/or video are not probably handled. My take away from this: Simple does not mean easy; check edge cases.

As someone who constantly runs into mobile pages with poorly fitting content yet are still scroll-limited, I see this as a welcome feature.

Most mobile browsers seem to lock the scroll direction while moving anyway, so atleast it isn't sloppy in practice, imho

I use a browser that locks the scroll direction and pages which overflow horizontally drive me mad. If your website does that, I will search for the reading mode button immediately because I cannot really work with handling scrolling in two directions.

As suggested by a sibling comment the key isn't to prevent horizontal scrolling, but to prevent content from overflowing a single screen width. Which isn't hard per se but doesn't have a one-size-fits-all solution.

So many websites overflow a single screen width by a trivial amount. This is just enough to cause accidental horizontal scrolling which disrupts the flow of scrolling the page. Very frustrating!

Yep. The offenders are usually really long un-line-breakable words, images, or videos. In this case we have:

  href="https://newcss.net/theme/terminal.css">

Which is not being allowed to break to a new line because it doesn't contain whitespace. A CSS rule can be used to allow it to break, though that can also have other, unwanted ramifications.

It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/) and the root cause is that the <table> element is not considered to be either a block-level or an inline element. It's special, and because it's special, some browsers support setting max-width on it and some don't. So tables need a container element or some other kind of special handling. It's an easy bug to overlook because the cause is so unexpected.

It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.

I'm probably gonna use your solution. Thanks.

I'm also interested in your tables solution. Also, is there an organized MVP.css community somewhere?

Feel free to ask questions or contribute on GitHub: https://github.com/andybrewer/mvp

That's excellent. It would be funny if that 'LaTeX CSS' moved all images to the end of the web page..

With references, of course. ;-)

Of course :-)

It's a shame that none of these (as far as I can tell with the 60% I clicked though) restrict the page width to 100% to prevent horizontal scrolling on mobile. Simple enough to add yourself, but still.

Pity I cannot just receive vanilla mark up and pick a client side theme.

I doubt it would work well but you could put a theme in user.css (on Firefox) and block all .css files (with uBlock, say). Not sure if uBlock will block <style> tags, but I think it can.

I think user.css automatically overrides any remote CSS, doesn't it?—so no need for blocking.

Yes, I suppose if you use a css reset then you wouldn't need to block .css files; but you could save a little bandwidth if you did.

I'm pretty sure firefox has this feature.

the problem is no website offer custom css.

for an example: https://stackoverflow.com/questions/48227413/what-is-the-pur...

Oh wow. Does this only work on FF?

Seems Firefox doesn't remember the CSS you have selected (i.e. per page? per domain?)

I can think of some uses for this if it were sticky - high contrast and dark mode versions for websites

You can detect css changes and remember/enforce it yourself but yeah, it does remember permission per page so adding this should have been/be easy.

Yeah, that is how it should have worked.

HN is pretty vanilla. I use it with https://userstyles.org/styles/92693/dark-hacker-news-solariz...

Not the standardized approach that we should have had long ago but better than nothing.

Seeing all these styles, I can't help but get the feeling that we're heading towards the aesthetic minimalist ideal of mixed text media.

It's modern MSWord templates.

shh

hah, reminds me of http://www.csszengarden.com but simpler.

I would like these themes to go beyond a simple article view. We have tags like <header>, <nav>, <main>, <aside>, <section> and <footer> now. Should be possible to build a complete app-shell with classless CSS.

This is what I expected too. This one has nav, aside : http://classless.de/#extra

Plus a couple bootstrap classes where HTML5 has no elements : grid and card.

I style those elements in MVP.css (https://github.com/andybrewer/mvp/)

As an exercice, I’m building my neighborhood newspaper website without any classes. It is surprisingly easy. With Grid and min(), I don’t even need media queries. CSS and HTML in 2020 is great, if you take the time to choose only the latest solutions.

Have a link to it?

Thanks! Does anyone know how these stylesheets interact with other frameworks like bootstrap? If I want to use bootstrap in a website, can I still start with one of the above as the base style?

It might be an interesting question to ask why bootstrap couldn’t be mostly classless. I remember learning Bootstrap and thinking it was silly I had to add class=table to a table.

That's very cool ! My microframework is on there and I wasn't even aware.

Do any of them support Dark/Light?

Reply on news.ycombinator.com