41 ms·

Why? I make a bunch of tiny static websites for API demos and such, and always run against the same problem: I hate the browser's default styles but don't want

Why? I make a bunch of tiny static websites for API demos and such, and always run against the same problem: I hate the browser's default styles but don't want to spend time writing my own stylesheet for such a tiny app. Now I can just include Water.css in my `<head>` and forget about it. The demo app will still work, it'll look good, and I won't have spent any time making a stylesheet. Who? Let me quote the GitHub repository: > You might want to use Water.css if you're making a simple static or demo website that you don't want to spend time styling. > You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content. Water.css has a dark theme by default, but some users wanted a light theme so I added one. Think it's ugly? Feel free to create a pull request :D

arkitaip 8y ago
Cool. Reminds me of the original W3C Core Styles [0]. Created long before Boostrap, YUI or Eric Meyer's CSS [1], the stylesheets providing the web with free stylesheets and looked great back in the day. Simpler times when you could understand most web dev by reading a spec or two. [0] https://www.w3.org/StyleSheets/Core/ https://www.w3.org/StyleSheets/Core/ [1] https://web.archive.org/web/19980703153940/https://www.w3.org/StyleSheets/Core/ https://web.archive.org/web/19980703153940/https://www.w3.or...
_bxg1 8y ago
Great idea (and cute name). Default browser styles are hideous; honestly just this makes a world of difference: body { font-family: sans-serif; max-width: 800px; margin: 0 auto; }
- _bxg1 8y ago
  Another idea (you have some default transitions in there already, but I like this one): * { transition: all 0.2s ease-out; } It's bold, but quite effective. Suddenly literally every property change looks natural.
  - SahAssar 8y ago
    It's a pain on the CPU though if you have a lot of non-transform/opacity changes though. It's much better to just animate the elements that you want animated and leave the rest alone.
    - _bxg1 8y ago
      I hadn't considered that, although it shouldn't create waste, right? Presumably, unchanging properties with transitions enabled don't add any work to be done. If it's only the ones that change, and if I really do want all of those to transition, there's no problem.
      - SahAssar 7y ago
        Right, but a lot of properties you probably don't want animated, and modern frameworks also reuse dom elements sometimes, so it might create a lot of lag and weird transitions between elements that you didn't foresee.
peter_l_downs 8y ago
You should consider shipping a combined css file that uses the prefers-color-scheme media query to show dark or light as appropriate! https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- tobyhinloopen 8y ago
  I didn’t know this feature but I love it! I’ll try to use it in all future projects
- portroyal 8y ago
  Also chiming in to say thanks. I hadn't seen this gem in my MDN browsing either.
- z3t4 8y ago
  I investigated this a few months ago and no browser, not even Safari supported it. Hopefully more platforms will start to support it.
  - stephenr 8y ago
    Safari supports it as of 12.1 (It was available in the Tech Preview prior to 12.1)
  - onion2k 8y ago
    It sounds backwards, but this is why you should use this feature. It sends a message to browser vendors (via Chrome Status eg https://www.chromestatus.com/features/5109758977638400 https://www.chromestatus.com/features/5109758977638400) that developers want to use those features, which helps the Chrome team (and other vendors) prioritize what to work on. Build sites to be standards compliant and accessible first, and then progressively enhance them using new browser features to give the user a better experience. It's absolutely the best way to build for the web.
  - felixfbecker 8y ago
    It's also supported already in Firefox Nightly (macOS and Windows) and WIP in Chrome
zzo38computer 7y ago
I happen to prefer the browser's default styles. I only ever need to tamper with them if the browser's default styles are not used.

arkitaip 8y ago

Cool. Reminds me of the original W3C Core Styles [0]. Created long before Boostrap, YUI or Eric Meyer's CSS [1], the stylesheets providing the web with free stylesheets and looked great back in the day. Simpler times when you could understand most web dev by reading a spec or two. [0] https://www.w3.org/StyleSheets/Core/ https://www.w3.org/StyleSheets/Core/ [1] https://web.archive.org/web/19980703153940/https://www.w3.org/StyleSheets/Core/ https://web.archive.org/web/19980703153940/https://www.w3.or...

_bxg1 8y ago

Great idea (and cute name). Default browser styles are hideous; honestly just this makes a world of difference: body { font-family: sans-serif; max-width: 800px; margin: 0 auto; }

_bxg1 8y ago
Another idea (you have some default transitions in there already, but I like this one): * { transition: all 0.2s ease-out; } It's bold, but quite effective. Suddenly literally every property change looks natural.
- SahAssar 8y ago
  It's a pain on the CPU though if you have a lot of non-transform/opacity changes though. It's much better to just animate the elements that you want animated and leave the rest alone.
  - _bxg1 8y ago
    I hadn't considered that, although it shouldn't create waste, right? Presumably, unchanging properties with transitions enabled don't add any work to be done. If it's only the ones that change, and if I really do want all of those to transition, there's no problem.
    - SahAssar 7y ago
      Right, but a lot of properties you probably don't want animated, and modern frameworks also reuse dom elements sometimes, so it might create a lot of lag and weird transitions between elements that you didn't foresee.

peter_l_downs 8y ago

You should consider shipping a combined css file that uses the prefers-color-scheme media query to show dark or light as appropriate! https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

tobyhinloopen 8y ago
I didn’t know this feature but I love it! I’ll try to use it in all future projects
portroyal 8y ago
Also chiming in to say thanks. I hadn't seen this gem in my MDN browsing either.
z3t4 8y ago
I investigated this a few months ago and no browser, not even Safari supported it. Hopefully more platforms will start to support it.
- stephenr 8y ago
  Safari supports it as of 12.1 (It was available in the Tech Preview prior to 12.1)
- onion2k 8y ago
  It sounds backwards, but this is why you should use this feature. It sends a message to browser vendors (via Chrome Status eg https://www.chromestatus.com/features/5109758977638400 https://www.chromestatus.com/features/5109758977638400) that developers want to use those features, which helps the Chrome team (and other vendors) prioritize what to work on. Build sites to be standards compliant and accessible first, and then progressively enhance them using new browser features to give the user a better experience. It's absolutely the best way to build for the web.
- felixfbecker 8y ago
  It's also supported already in Firefox Nightly (macOS and Windows) and WIP in Chrome

zzo38computer 7y ago

I happen to prefer the browser's default styles. I only ever need to tamper with them if the browser's default styles are not used.