
Show HN: Water.css – A just-add-css collection of styles to make websites nicer - archmaster
https://github.com/kognise/water.css
======
archmaster
__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

~~~
peter_l_downs
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/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

~~~
z3t4
I investigated this a few months ago and no browser, not even Safari supported
it. Hopefully more platforms will start to support it.

~~~
onion2k
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.

------
helloworld
I just noticed this biographical detail about the author:

 _I 'm a 13yo developer, wannabe designer, and cellist._

How awesome! Makes me feel hopeful about the future.

~~~
amasad
I know @Kognise from the Repl.it community -- he's super talented!
[https://repl.it/@kognise](https://repl.it/@kognise)

He once reversed engineered Repl.it'sb API and created a library that creates
containers programmatically and run code heedlessly without a browser.
[https://repl.it/talk/announcements/Replit-Node-
API/11173](https://repl.it/talk/announcements/Replit-Node-API/11173)

~~~
thanatropism
Oh man. I hope he has a good family situation and great mentors in the
programming communities so he can develop to his full potential.

------
mekoka
Thank you for this. There's a bunch of us who, once in a while, think of
finally putting up that simple website or blog, with a minimalist touch. But
then we have to think of how it'll actually look and we go into analysis
paralysis. That's where the weekend project usually goes back to snooze. This
kind of initiatives helps to at least get to the next hurdle.

~~~
enriquto
The default style for browsers (if you do not put _any_ css) looks rather good
to me. I do not honestly understand what is the problem.

~~~
dredmorbius
[https://www.motherfuckingwebsite.com/](https://www.motherfuckingwebsite.com/)

[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

[https://evenbettermotherfucking.website/](https://evenbettermotherfucking.website/)

[https://bestmotherfucking.website/](https://bestmotherfucking.website/)

[https://thebestmotherfucking.website/](https://thebestmotherfucking.website/)

[https://perfectmotherfuckingwebsite.com/](https://perfectmotherfuckingwebsite.com/)

[https://codepen.io/dredmorbius/pen/KpMqqB](https://codepen.io/dredmorbius/pen/KpMqqB)

~~~
dredmorbius
Which is to say: the defaults can be improved on, greatly, with very modest
styling.

Alternatively: the defaults are poor.

~~~
enriquto
This is rather subjective. Looking at this collection of pages, I have no
doubt that the first one looks much, much better than any of the others.

~~~
dredmorbius
On wide screens, and with different pixel densities, defaults start to
manifestly suck rapidly.

Fonts which are too small or large, or text lines which are too long, are
objectively harder to read. Other design choices similarly have measurable
impacts.

Jakob Nielsen's methodology of timing task completion and measuring completion
accuracy is a UI/UX testing methodology which removes subjectivity.

~~~
enriquto
> Fonts which are too small or large, or text lines which are too long, are
> objectively harder to read.

I compulsively CTRL+wheel-up and CTRL+wheel-down all the websites that I read
until the "right" size appears, so I do not really care about the font size
setup by the author of the site. But probably my behavior is not very
representative.

------
networked
This is nice and useful. You have inspired me to start a list of classless
themes: [https://github.com/dbohdan/classless-
css](https://github.com/dbohdan/classless-css). I used part of your demo page
as the basis for the comparison screenshots.

------
bhaak
That looks pretty neat.

The table layout is ugly, though. As this is a pretty basic HTML table, you
can't do much but you can certainly do better than a table with all borders.

I thought I learned about web table design in a very concise article but I
couldn't find it. The best my google-fu provided is this article:
[https://alistapart.com/article/web-typography-
tables](https://alistapart.com/article/web-typography-tables)

Some quotes:

"As a starting point, avoid any border or frame surrounding the table. This is
a Victorian embellishment which is entirely unnecessary as text alignment will
shape the table just fine."

"Tables should not be set to look like nets with every number enclosed. Try to
do without rules altogether. They should be used only when they are absolutely
necessary. Vertical rules are needed only when the space between columns is so
narrow that mistakes will occur in reading without rules. Tables without
vertical rules look better. Thin rules are better than thick ones."

Edit: Here is a quick design I tried:
[https://i.imgur.com/xgKsNvy.png](https://i.imgur.com/xgKsNvy.png)

I didn't do any color striping, this would also be an improvement to
distinguish the table head from the table rows but I didn't find quickly any
coloring I liked.

~~~
archmaster
Hmm, interesting... wanna make a pull request with suggested changes?

~~~
bhaak
PR done.

I went with this design:
[https://i.imgur.com/7z9wTe9.png](https://i.imgur.com/7z9wTe9.png)

------
bArray
I happen to end up creating a lot of static web pages when building simple
websites or documentation (for internal and external use) - is there a
collection of lightweight CSS resources like this?

For example, some things I would want to be able to select/tweak:

* Colour scheme/theme

* Responsiveness to mobile devices (i.e. changing fonts/layout, etc)

* Navigation bar

* Transition effects

* Support for older browsers (but still look okay (yes this is still a requirement in 2019))

* Support for IE (which seems to be hilariously harder than it should be)

* Toggle/select use of fonts

If not then it might be useful to build out a tool to dynamically create such
a thing.

~~~
ubershmekel
That's a good idea. Sort of like the good old css zen garden, but with simple,
not ugly, css resets.

Here's my attempt: [https://www.cssbed.com/](https://www.cssbed.com/)

Feel free to add options at
[https://github.com/ubershmekel/cssbed](https://github.com/ubershmekel/cssbed)

~~~
z3t4
Sweet. I really liked the idea of ccs zen garden. But the designs where mostly
absolute positioned images and css hacks. _a lot_ have happened to css since
...

------
pradn
If your aim is to help people snazz up quick HTML pages, it would be helpful
to have as simple URL to include the CSS. Something like
watercss.com/light.css. This way, we don't even have to visit your GitHub to
get the CDN URL. It'd save some time and make water.css the go-to for quick
styling.

~~~
Myrth
you want him to be responsible for hosting parts of your site on his server?

how does it make any sense for him or for you?

~~~
vntok
It is in fact a common business model, known as a CDN (Content Delivery
Network). A quick Google search will return many examples.

Most popular libraries (Bootstrap) or fonts are hosted on at least one CDN.

~~~
bigzyg33k
Business being the key term here - this kid is 13, and from what I can tell,
doesn't make any money from this. How would it make sense for him to pay to
have this available via CDN?

------
another-dave
Looks really good! Definitely would use something like this for some quick
pages alright.

Two minor pieces of feedback — when I click "Switch theme", it seems to take
you to non-styled rather than the light theme, not sure if that's what was
intended or not? Could be good to have buttons for both.

Also, you seem to be getting an SSL mixed content warning, purely because of
the Kitten pic. Know that it's not a big deal for a demo page, but if you
wanted to get rid of it, you could use something like LoremPixel.com — they
support switching URLs to HTTPS and have a 'cat' category!

~~~
archmaster
A pull request fixed the mixed content thing - not sure what you mean about no
light theme?

~~~
another-dave
Cool! Previously when I hit "Switch theme" it was loading unstyled, but
double-checking it now & it's working for me correctly — might have been some
plugin on the browser I was looking at it with causing interference with
loading the 2nd stylesheet.

(EDIT: Typo)

------
arosier
He has a product hunt scheduled for tomorrow. Didn’t know you could schedule
product hunt posts.

[https://www.producthunt.com/posts/water-
css](https://www.producthunt.com/posts/water-css)

------
fock
What's so bad about black-on-white text, sans-serif headers, serif texts and
monotype blockquotes? Just because this theme set's specific colors and
fonts/sizes, I'm not quite sure, how this automatically makes it any more
beautiful than the standard (which generally is really responsive too)?

~~~
mekoka
Beauty is indeed in the eye of the beholder, but although subjective, there
seems to be a _popular_ consensus that the browser's defaults can be improved.
And apparently it doesn't take much to get to another popular consensus of
what is acceptable. That's where a project like this takes us.

------
dlbucci
I like this! More and more, I think about making my CSS sheets element only
and moving more complex "component" styles into JavaScript. This makes me
attempt to find semantic HTML representations of components before coming up
with new styles and entering append-only CSS prison. So something like this
would work great for me (even for more dynamic sites, really!).

~~~
etatoby
Append-only CSS. That's a great definition!

------
gingerlime
Is it similar to milligram[0] ?

I'm genuinely asking, because my CSS "awareness" is so terrible, despite years
of web development experience. I just can't figure CSS out.

[0] [https://milligram.io/](https://milligram.io/)

~~~
roryokane
Water is similar, but simpler and lighter. Milligram defines styles for
generic HTML elements like Water does, but Milligram also has features that
make some of your HTML specific to Milligram (such as button styles and grid
layout), and it comes with the Roboto font, which increases download size.

------
bachmeier
The need for something like this - basic styling because the default display
is so bad for raw html - suggests that there's something missing from our
browsers. Of course everyone has their own preferences, but being able to add
<theme "foo"> at the top of an html page would be very helpful. In many
instances the exact styling isn't important as long as there's _some_ styling.
It would, among other things, minimize on bandwidth while providing a
comfortable experience.

~~~
badsectoracula
What is the difference between <theme "foo"> and <link rel="stylesheet"
href="foo"> ?

~~~
bachmeier
The former would be provided by the browser, whereas the latter is a link to a
stylesheet that you're providing.

------
kej
This reminds me of picnic.css [0], which uses the same technique of styling
everything nicely by default, but adds some options for changing things when
you want.

[0] [https://picnicss.com/](https://picnicss.com/)

------
whouweling
This looks really nice, clean & functional. I'm integrating this into my
personal website at this moment. Thanks!

------
beefhash
I've been wondering where this trend to use the system font came from. I
understand that web applications want to use a system font for common
operating systems so that they look a bit more native. But that doesn't
necessarily make it a good choice for body text.

~~~
fiddlerwoaroof
My main issue with web apps is that they ignore the choices I make for how
applications look on my computer. We shouldn’t generally be changing fonts,
picking colors and styling form components in apps like Slack: rather we
should use the default look and feel of the operating system the user is
running and use semantic color and font names so our apps fit in to the user’s
computing environment.

------
xrd
Can you start another thread on how you got to this point in your life as a 13
yr old? I want my three kids (oldest 6) to be doing what you are doing in
another seven or so years.

Kudos on a great project and thanks for sharing it with the world!

~~~
archmaster
I've been considering doing something like this on r/iama, but I'm worried
it's too egotistical.

~~~
xrd
I love that you are considering how egotistical you are at 13. You seem like a
really emotionally intelligent person which will serve you, by the way, so
well in the software industry. Make sure to never neglect learning about who
you are as a person emotionally; its an investment that will take you much
further than just technical skills.

------
ujuj
Reminds me of
[https://oxal.org/projects/sakura/](https://oxal.org/projects/sakura/) in a
nice way.

------
ngold
This looks really fun. Thanks for showing. Look forward to trying it.

------
bastawhiz
It seems to support check boxes but not radio buttons.

------
marmshallow
Anyone have a screenshot or before/after?

------
crushcrashcrush
This is wonderful! Thank you.

------
andreareina
Mixed content warning due to the cat picture.

------
Theodores
I would like to see a version for those of us that structure our documents.

What is this structure you speak of?

Most people assume HTML has a 'head' and a 'body'. The head has script and tag
things in it, the body is just free-form open-fire zone of content.

But there is more to it than this.

The body should have some structure to it. That means a 'header', a 'main' and
a 'footer'. In the 'header' you are going to want a 'nav' and the same for the
'footer', you are going to want a 'nav'. Even if the links are to your social
media sites there is still something to go in the respective areas.

Then when it comes to your 'main' content, if you believe in structure, you
are wanting to have 'article' or 'section' with a possible 'aside' or two.

Then there are images. Images don't have to be in random 'div' elements. They
should be in 'figure' or 'picture' elements.

Anyone who is not writing HTML this way, using the structural elements and
structuring their document might as well just be writing in .txt format or
posting jpgs of their pages to the internet. You have got to be organised.
Ignorance of the HTML elements is not helpful, knowing them is. They shape how
you think and how you organise your code.

A default stylesheet for people that write this way - structured - could have
many useful touches. So CSS grid for the 'header'/'main'/'footer' could
include the best way to ensure a sticky footer with the row definitions and
align-self: end for the footer bit.

Images in picture/figure elements could be set to be done properly, if in a
containing 'figure' then set to 100% width. If the main has a 'grid' setup
then you could easily have well structured HTML show neatly with anything 'not
structured' evident because it wouldn't be fitting in the boxes.

Document outline is important and a basic stylesheet needs to do badly at
styling things that are not going to outline well. So the headings styles
should only apply to headings that are in 'article', 'section' or 'aside'
blocks.

There is also a small matter of pixels. When was the last time a pixel meant
anything? 2007? Nowadays pixels are virtual. So it really has to be em/rems
and viewer units all the way. The pixel is outmoded.

For your forms you want to think differently and more structured. So 'form'
needs to be 'display: grid' and then your labels be column 1 with inputs on
column 2. Then have a css variable in the responsive media query to set the
inputs to column 1 if on mobile. Done this way you can get rid of the hacky
margins and paddings on the buttons and just use 'grid gap'.

This means forms can then be a straight list of label/input pairs in well
organised structured code that looks fantastic and is fully mobile out the
box.

As it is the stylesheet is a good idea but it does not really bring any
benefits to structured documents in the post-pixel world where CSS grid does
all the heavy lifting of simple layout tasks.

~~~
vertis
What could have been good feedback is ruined by tone. This is someone who has
in good faith decided to show the HN community. The fact that he's 13 doesn't
even really enter into it.

Here is someone who has created something new and has come to share and the
first thing you say is:

    
    
      > I would like to see a version for those of us that structure our documents.
      > What is this structure you speak of?
    

Let's try:

\---

I love what you've done. I know that this is still new but I would really love
to see some additional support for more structured documents.

<Insert more details about what you mean about structure>

I will try, if time allows, to create a pull request for these features.

\---

~~~
Theodores
You are right.

In fact tips like yours are what is most useful to learn for me from here.

However, in primary school I learned a little bit about content sectioning.
Stories had to have a beginning, a middle and an end. Titles were important
too.

These concepts of 'header', 'main' and 'footer' with 'sections' are not a
million miles away from how writing was taught in the olden days to primary
school kids.

Just because the grown ups can't be bothered to structure their HTML as per
the spec with these logical groupings I don't see why 13 year olds should get
a free pass. I don't want the web to be stuck in a sea of div tags styled with
floats forever.

~~~
archmaster
Thanks for the feedback, although I would like to make the point: Water.css
_does_ style structured websites and doesn't involve any floats or div tags
anywhere. If not for semantic html Water.css wouldn't work at all because
that's what enables the classless approach.

And I'm purposely not including support for navbars and such as this is meant
more for article pages and tiny demos and the sorts. If you're interested in
adding a footer, though, I'm accepting PRs :)

~~~
Theodores
Sorry we got off on a bad meeting of minds!!!

However, I think you have the makings of something quite brilliant. Most of
the web 'div soup industry' is stuck in the past, the tools are there and the
world actually needs a really good HTML5 + CSS Grid starting kit for one off
pages.

I think you can make some skeleton templates in HTML5 with what you are
working with on the CSS. So no classes, a template with a header, main, aside
and footer at the top level, then in the main the page title as h1, then an
article with its own header in h2 with sections with their own h3 titles. Then
in the aside a basic form. People can delete it but if they want a contact us
then it is good to go. Then in the footer have a nav. Put social media links.
Also an address tag in the footer for the copyright notice. Yep, address tag.

If you also add a figure and an image with a couple of srcsets in a section
then it is all done for people.

Next, styling. So no ids or classes. Basically a reset.css that uses css
variables with fallbacks. The variables default to mobile and the fallbacks
are for desktop. Do it all in ems.

Also add in a details/summary. These are not being used enough and they come
with default styling that few know how to do. The arrow and the blue focus box
need addressing.

The form, that needs to be simple label/input pairs with the css grid with the
css variables and fallbacks making it responsive.

The aside is also responsive. It falls below the main content in the document
structure and on desktop it turns into a sidebar, left of the main content.

It might take a week or two to put that together but it will put you far ahead
of everyone out there who has been floating divs into 'responsive designs'
with 5000 class tags for the last five years. Forget frameworks, forget divs
and spans. Invent some new rules for classes, so in the template you have one
article with class 'blog entry' and another with something like 'recipe'. Put
the CSS together for some styling so that the whole component just needs the
one class on the parent and element selectors do the rest.

If you build this out then there won't be a finer educational material out
there for people wanting to learn to code. All the lessons can be applied to
any other 'big project', the sort that have 500 div per page in them,
needlessly.

If you use a small handful of css variables for 'color', 'background-color',
'font' and main document font size, perhaps with another for main content
width then you can also have a 'night mode' button on there to swap these
variables around to demonstrate however many themes you want, all achievable
with a few variables instead of some compiled CSS bloat.

As mentioned, sorry to get off on the wrong footing but you are the greatest
hope for sensible CSS I have come across yet.

There are many, many people who are using website builder things such as Wix
to build simple sites. You can build something easier than those things for
people wanting just a simple web presence on a page.

Structure in a web page does matter but nobody has it now as the world wide
web is a sea of divs and spans. Search engines don't have structure as a
metric but sometimes we do things because we want accessible, maintainable,
simple quality design and not just hacks to game search engines.

You have made a great start, I think that you are green enough to be able to
create something that really does make the web dev world think again as well
as bring something that scratches not just your itch for a simple page well
themed but for a lot of people who need a really good starting point for their
own 'simple' pages. Simple sounds stupid in some contexts, I assure you that
'simple' is a virtue, any fool can make a complicated bloat of a web page,
simple and elegant needs thinking. You can do it!

