Water.css

Make your tiny website just a little nicer

#3 Product of the DayApril 07, 2019
A just-add-css collection of styles to make tiny static websites just a little bit more pretty.
Discussion
Would you recommend this product?
6 Reviews5.0/5
Maker
Hey developers of Product Hunt! I commonly make tiny static websites for API demos and such, and always run into the same problem: I hate the browser's default styles but don't want to spend time writing my own stylesheet for something so small. Now you can just include Water.css in your and forget about it! Features: - Default dark theme 🌚 - Light theme if you want 🌞 - Tiny and lightweight 💻 - No classes required to make everything pretty ✨ Is this a replacement for Bootstrap and the likes? No, it's not at all. If you want to customize how your website looks, you probably don't want to be using Water! By all means, use Bootstrap or Bulma or whatever CSS framework you like. I'd love to hear some feedback on how to improve Water.css! I've already incorporated some suggestions from users on Reddit.
@felix_mattick Starred on GitHub. A couple of points here. (1) Should it include '58 Bytes of CSS to look great nearly everywhere ' * ? ``` main { max-width: 38rem; padding: 1.5rem; margin: auto; } ``` (2) Can it automatically choose a light or dark theme based on my OS preferences? * https://news.ycombinator.com/ite...
@felix_mattick Use `prefers-color-scheme` media query to allow user switch between dark/light schemes using OS features. https://developer.mozilla.org/en...
Maker
@stas_kulesh (1) Should it? (2) Prefers-color-scheme support is coming soon
@felix_mattick @media The reasoning in the original '58 bytes' posts seem to resonate well with what you've been trying to achieve. Check it out https://jrl.ninja/etc/1/
Hi @felix_mattick I like this direction. I decided to open a "class-less" css gallery at https://www.cssbed.com/ and water-css is currently the best entry :)
Maker
@ubershmekel Ooh, that's a cool project! Thanks for featuring Water.css

All the big css frameworks rely on classes. It makes sense to have better CSS starting points upon which you can build. That means a css framework that's smaller, and does not require learning classes you'll eventually have to reverse engineer.

Pros:

Simple css, looks pretty good.

Cons:

If you're going to do everything from scratch, then you might as well use a css reset instead.

Wow! Super cool idea. Seems perfect for essays or a quick explanations.
@felix_mattick I like this approach. I myself have created something very similar. https://github.com/vasanthv/styl...
Maker
@vsnthv Nice! That's 3.75kb though :\