Water.css

Make your tiny website just a little nicer

#3 Product of the DayApril 07, 2019
Featured Embed
A just-add-css collection of styles to make tiny static websites just a little bit more pretty.
Reviews
  • 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.

    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.

    Yuval Greenfield has used this product for one day.
  • Pros: 

    Quick hacks, e.g. when trying out a new platform, look far less awful.

    Cons: 

    You don't get much.

    radio buttons work but look odd, e.g. click state isn't always visible

    Daniel Nachbar has used this product for one day.
Discussion
Hunter
Makers
You need to become a Contributor to join the discussion.
Kognise
KogniseMaker@felix_mattick
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.
Stas Kulesh
Stas Kulesh@stas_kulesh · Creative Director @ Karmabot.chat
@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...
Stas Kulesh
Stas Kulesh@stas_kulesh · Creative Director @ Karmabot.chat
@felix_mattick Use `prefers-color-scheme` media query to allow user switch between dark/light schemes using OS features. https://developer.mozilla.org/en...
Kognise
KogniseMaker@felix_mattick
@stas_kulesh (1) Should it? (2) Prefers-color-scheme support is coming soon
Stas Kulesh
Stas Kulesh@stas_kulesh · Creative Director @ Karmabot.chat
@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/
Yuval Greenfield
Yuval Greenfield@ubershmekel
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 :)
Kognise
KogniseMaker@felix_mattick
@ubershmekel Ooh, that's a cool project! Thanks for featuring Water.css
Anna Filou
Anna Filou@anna_0x · Tech Geek, Web Designer, Illustrator
Wow! Super cool idea. Seems perfect for essays or a quick explanations.
vasanthv
vasanthv@vsnthv · I turn ☕️ to JS code.
@felix_mattick I like this approach. I myself have created something very similar. https://github.com/vasanthv/styl...
Kognise
KogniseMaker@felix_mattick
@vsnthv Nice! That's 3.75kb though :\