8 ms·

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

by amanzi 6y ago

This Github repository tracks a whole bunch of these drop-in CSS files: https://github.com/dohliam/dropin-minimal-css 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/ https://dohliam.github.io/dropin-minimal-css/

spyckie2 6y ago
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.
ComodoHacker 6y ago
It's modern MSWord templates.
- metalliqaz 6y ago
  shh
networked 6y ago
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 https://github.com/dbohdan/classless-css. I've just added a link to the drop-in CSS switcher there.
- fouc 6y ago
  Another one here: https://www.cssbed.com https://www.cssbed.com https://github.com/ubershmekel/cssbed https://github.com/ubershmekel/cssbed
- deleted 6y ago
  [deleted]
tudorw 6y ago
Pity I cannot just receive vanilla mark up and pick a client side theme.
- pbhjpbhj 6y ago
  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.
  - JadeNB 6y ago
    I think user.css automatically overrides any remote CSS, doesn't it?—so no need for blocking.
    - pbhjpbhj 6y ago
      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.
- _ZeD_ 6y ago
  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-purpose-of-viewpage-style-in-firefox https://stackoverflow.com/questions/48227413/what-is-the-pur...
  - andai 6y ago
    Oh wow. Does this only work on FF?
  - ancarda 6y ago
    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
hotwire 6y ago
hah, reminds me of http://www.csszengarden.com http://www.csszengarden.com but simpler.
- mathnmusic 6y ago
  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.
  - mlok 6y ago
    This is what I expected too. This one has nav, aside : http://classless.de/#extra http://classless.de/#extra Plus a couple bootstrap classes where HTML5 has no elements : grid and card.
  - awb 6y ago
    I style those elements in MVP.css (https://github.com/andybrewer/mvp/ https://github.com/andybrewer/mvp/)
  - philistine 6y ago
    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.
    - heavyset_go 6y ago
      Have a link to it?
bjarneh 6y ago
That's excellent. It would be funny if that 'LaTeX CSS' moved all images to the end of the web page..
- jacobush 6y ago
  With references, of course. ;-)
  - bjarneh 6y ago
    Of course :-)
deleted 6y ago
[deleted]
elefantastisch 6y ago
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.
- petee 6y ago
  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
  - saagarjha 6y ago
    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.
- _bxg1 6y ago
  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.
  - chongli 6y ago
    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!
    - _bxg1 6y ago
      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.
louismerlin 6y ago
That's very cool ! My microframework is on there and I wasn't even aware.
hanniabu 6y ago
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.
niyazpk 6y ago
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?
- dstroot 6y ago
  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.
  - deleted 6y ago
    [deleted]
lostmsu 6y ago
Do any of them support Dark/Light?

by amanzi 6y ago

spyckie2 6y ago

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.

ComodoHacker 6y ago

It's modern MSWord templates.

metalliqaz 6y ago
shh

networked 6y ago

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 https://github.com/dbohdan/classless-css. I've just added a link to the drop-in CSS switcher there.

fouc 6y ago
Another one here: https://www.cssbed.com https://www.cssbed.com https://github.com/ubershmekel/cssbed https://github.com/ubershmekel/cssbed
deleted 6y ago
[deleted]

tudorw 6y ago

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

pbhjpbhj 6y ago
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.
- JadeNB 6y ago
  I think user.css automatically overrides any remote CSS, doesn't it?—so no need for blocking.
  - pbhjpbhj 6y ago
    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.
_ZeD_ 6y ago
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-purpose-of-viewpage-style-in-firefox https://stackoverflow.com/questions/48227413/what-is-the-pur...
- andai 6y ago
  Oh wow. Does this only work on FF?
- ancarda 6y ago
  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

hotwire 6y ago

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

mathnmusic 6y ago
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.
- mlok 6y ago
  This is what I expected too. This one has nav, aside : http://classless.de/#extra http://classless.de/#extra Plus a couple bootstrap classes where HTML5 has no elements : grid and card.
- awb 6y ago
  I style those elements in MVP.css (https://github.com/andybrewer/mvp/ https://github.com/andybrewer/mvp/)
- philistine 6y ago
  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.
  - heavyset_go 6y ago
    Have a link to it?

bjarneh 6y ago

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

jacobush 6y ago
With references, of course. ;-)
- bjarneh 6y ago
  Of course :-)

deleted 6y ago

[deleted]

elefantastisch 6y ago

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.

petee 6y ago
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
- saagarjha 6y ago
  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.
_bxg1 6y ago
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.
- chongli 6y ago
  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!
  - _bxg1 6y ago
    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.

louismerlin 6y ago

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

hanniabu 6y ago

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.

niyazpk 6y ago

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?

dstroot 6y ago
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.
- deleted 6y ago
  [deleted]

lostmsu 6y ago

Do any of them support Dark/Light?