9 ms·

Show HN: Water.css – A just-add-css collection of styles to make websites nicer

501 points by archmaster 8y ago

archmaster 8y ago
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 8y 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.
bastawhiz 8y ago
It seems to support check boxes but not radio buttons.
dlbucci 8y ago
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 8y ago
  Append-only CSS. That's a great definition!
pradn 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      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?
    - Myrth 7y ago
      he already provides link to cdn. it seems that the parent didn't like that it was too long.
  - slim 8y ago
    it could be a http redirect to the cdn
    - Myrth 7y ago
      so he will be responsible to maintain the domain name and server for perpetuity, just for short link
  - 8y ago
andreareina 8y ago
Mixed content warning due to the cat picture.
Theodores 8y ago
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.
helloworld 8y ago
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.
- skilled 8y ago
  Yay! Can't wait for developers to fix the future! Right on, brother!
- ksahin 8y ago
  His project list on his personal website is impressive too!
- guilhas 8y ago
  Although this is impressive. A lot of things worry me about the future, and lack of developers is not one of them.
- amasad 8y ago
  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 8y ago
    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.
arosier 8y ago
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
mekoka 8y ago
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.
- Vicfred 8y ago
  this is exactly me
- enriquto 8y ago
  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.
  - saagarjha 8y ago
    It's a bit too brutalist. A small touch of CSS can go a long way to making a website more pleasant to use.
    - enriquto 8y ago
      Maybe, but I have come to like it and find it very pleasant. When I activate full css for some sites, the web looks a bit phony to me.
      - saagarjha 8y ago
        I guess? I find that I prefer the web being a bit (but not excessively) "dressed up"…
  - albedoa 8y ago
    Here is a section of the OP in Chrome on macOS with no CSS applied: https://i.imgur.com/AGzy98D.png https://i.imgur.com/AGzy98D.png I am not in a position to doubt your stated preference, but certainly "it looks rather good to me" does not block you from understanding why others would would want some basic styles applied to the sites they create and visit.
bArray 8y ago
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 8y ago
  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 8y ago
    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 ...
- blinky1456 8y ago
  For documentation you could alsways try https://readthedocs.org/ https://readthedocs.org/
  - bArray 8y ago
    I've heard of this before and it's a nice idea - yet something still feels better about keeping the docs version controlled and with the project itself. Also, some of these projects have restrictions about publicly releasing documentation (even hosted privately on third party servers).
- onion2k 8y ago
deleted 8y ago
[deleted]
marmshallow 8y ago
Anyone have a screenshot or before/after?
deleted 8y ago
[deleted]
whouweling 8y ago
This looks really nice, clean & functional. I'm integrating this into my personal website at this moment. Thanks!
gingerlime 8y ago
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 7y ago
  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.
ngold 8y ago
This looks really fun. Thanks for showing. Look forward to trying it.
fock 8y ago
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 8y ago
  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.
- badsectoracula 8y ago
  Beauty is subjective, some people like the style in the linked page, others not. Personally i like the default fonts and colors (at least on Windows, i think on Linux the default font sizes are a bit large) but not everyone does. Besides this is just fashion, the defaults were chosen because at some point people found them beautiful, but over time they simply fell out of fashion. Nowadays they're there mainly to avoid breaking sites that do not override them.
networked 8y ago
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.
crushcrashcrush 8y ago
This is wonderful! Thank you.
beefhash 8y ago
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.
- yellowapple 8y ago
  I'd say it's a sensible default (in fact, it's the only sensible default beyond simply not specifying a font at all).
- fiddlerwoaroof 8y ago
  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.
bachmeier 8y ago
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 8y ago
  What is the difference between <theme "foo"> and <link rel="stylesheet" href="foo"> ?
  - bachmeier 8y ago
    The former would be provided by the browser, whereas the latter is a link to a stylesheet that you're providing.
another-dave 8y ago
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 8y ago
  A pull request fixed the mixed content thing - not sure what you mean about no light theme?
  - another-dave 7y ago
    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)
ujuj 8y ago
Reminds me of https://oxal.org/projects/sakura/ https://oxal.org/projects/sakura/ in a nice way.
bhaak 8y ago
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 8y ago
  Hmm, interesting... wanna make a pull request with suggested changes?
  - bhaak 8y ago
    PR done. I went with this design: https://i.imgur.com/7z9wTe9.png https://i.imgur.com/7z9wTe9.png
deleted 8y ago
[deleted]
kej 8y ago
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/
xrd 8y ago
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!
- artemisbot 8y ago
  Not OP, but my dad was in a similar situation to yourself - when I was 12 he bought me an Arduino kit for Christmas and we spent the holidays building projects together. When I was 13-14 he started taking my sister and I to CoderDojos. I'm not saying this will work for every kid and I was nowhere near as advanced as this guy at his age but it has given me a what seems to be a great career path post-university and a good background in open-source software.
- archmaster 8y ago
  I've been considering doing something like this on r/iama, but I'm worried it's too egotistical.
  - xrd 8y ago
    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.
  - xrd 8y ago
    How about writing a blog? You are clearly already a good writer. I'm an author and writing helps me clarify my thoughts and has spurred my growth in ways that is complementary to my technical development. I wondered when I checked out your profile and involvement on repl.it if you didn't have a blog and/or didn't host things on your own servers if this is because this is challenging for a 13 year old who does not have access to credit cards, etc?

501 points by archmaster 8y ago

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 8y 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.

bastawhiz 8y ago

It seems to support check boxes but not radio buttons.

dlbucci 8y ago

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 8y ago
Append-only CSS. That's a great definition!

pradn 8y ago

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 8y ago
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 8y ago
  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 8y ago
    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?
  - Myrth 7y ago
    he already provides link to cdn. it seems that the parent didn't like that it was too long.
- slim 8y ago
  it could be a http redirect to the cdn
  - Myrth 7y ago
    so he will be responsible to maintain the domain name and server for perpetuity, just for short link
- 8y ago

andreareina 8y ago

Mixed content warning due to the cat picture.

Theodores 8y ago

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.

helloworld 8y ago

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.

skilled 8y ago
Yay! Can't wait for developers to fix the future! Right on, brother!
ksahin 8y ago
His project list on his personal website is impressive too!
guilhas 8y ago
Although this is impressive. A lot of things worry me about the future, and lack of developers is not one of them.
amasad 8y ago
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 8y ago
  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.

arosier 8y ago

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

mekoka 8y ago

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.

Vicfred 8y ago
this is exactly me
enriquto 8y ago
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.
- saagarjha 8y ago
  It's a bit too brutalist. A small touch of CSS can go a long way to making a website more pleasant to use.
  - enriquto 8y ago
    Maybe, but I have come to like it and find it very pleasant. When I activate full css for some sites, the web looks a bit phony to me.
    - saagarjha 8y ago
      I guess? I find that I prefer the web being a bit (but not excessively) "dressed up"…
- albedoa 8y ago
  Here is a section of the OP in Chrome on macOS with no CSS applied: https://i.imgur.com/AGzy98D.png https://i.imgur.com/AGzy98D.png I am not in a position to doubt your stated preference, but certainly "it looks rather good to me" does not block you from understanding why others would would want some basic styles applied to the sites they create and visit.

bArray 8y ago

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 8y ago
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 8y ago
  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 ...
blinky1456 8y ago
For documentation you could alsways try https://readthedocs.org/ https://readthedocs.org/
- bArray 8y ago
  I've heard of this before and it's a nice idea - yet something still feels better about keeping the docs version controlled and with the project itself. Also, some of these projects have restrictions about publicly releasing documentation (even hosted privately on third party servers).
onion2k 8y ago

deleted 8y ago

[deleted]

marmshallow 8y ago

Anyone have a screenshot or before/after?

deleted 8y ago

[deleted]

whouweling 8y ago

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

gingerlime 8y ago

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 7y ago
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.

ngold 8y ago

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

fock 8y ago

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 8y ago
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.
badsectoracula 8y ago
Beauty is subjective, some people like the style in the linked page, others not. Personally i like the default fonts and colors (at least on Windows, i think on Linux the default font sizes are a bit large) but not everyone does. Besides this is just fashion, the defaults were chosen because at some point people found them beautiful, but over time they simply fell out of fashion. Nowadays they're there mainly to avoid breaking sites that do not override them.

networked 8y ago

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.

crushcrashcrush 8y ago

This is wonderful! Thank you.

beefhash 8y ago

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.

yellowapple 8y ago
I'd say it's a sensible default (in fact, it's the only sensible default beyond simply not specifying a font at all).
fiddlerwoaroof 8y ago
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.

bachmeier 8y ago

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 8y ago
What is the difference between <theme "foo"> and <link rel="stylesheet" href="foo"> ?
- bachmeier 8y ago
  The former would be provided by the browser, whereas the latter is a link to a stylesheet that you're providing.

another-dave 8y ago

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 8y ago
A pull request fixed the mixed content thing - not sure what you mean about no light theme?
- another-dave 7y ago
  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)

ujuj 8y ago

Reminds me of https://oxal.org/projects/sakura/ https://oxal.org/projects/sakura/ in a nice way.

bhaak 8y ago

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 8y ago
Hmm, interesting... wanna make a pull request with suggested changes?
- bhaak 8y ago
  PR done. I went with this design: https://i.imgur.com/7z9wTe9.png https://i.imgur.com/7z9wTe9.png

deleted 8y ago

[deleted]

kej 8y ago

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/

xrd 8y ago

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!

artemisbot 8y ago
Not OP, but my dad was in a similar situation to yourself - when I was 12 he bought me an Arduino kit for Christmas and we spent the holidays building projects together. When I was 13-14 he started taking my sister and I to CoderDojos. I'm not saying this will work for every kid and I was nowhere near as advanced as this guy at his age but it has given me a what seems to be a great career path post-university and a good background in open-source software.
archmaster 8y ago
I've been considering doing something like this on r/iama, but I'm worried it's too egotistical.
- xrd 8y ago
  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.
- xrd 8y ago
  How about writing a blog? You are clearly already a good writer. I'm an author and writing helps me clarify my thoughts and has spurred my growth in ways that is complementary to my technical development. I wondered when I checked out your profile and involvement on repl.it if you didn't have a blog and/or didn't host things on your own servers if this is because this is challenging for a 13 year old who does not have access to credit cards, etc?