<i></i>Why?<i></i><p>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.<p>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.<p><i></i>Who?<i></i><p>Let me quote the GitHub repository:<p>> 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.<p>> 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.<p>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
I just noticed this biographical detail about the author:<p><i>I'm a 13yo developer, wannabe designer, and cellist.</i><p>How awesome! Makes me feel hopeful about the future.
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.
This is nice and useful. You have inspired me to start a list of classless themes: <a href="https://github.com/dbohdan/classless-css" rel="nofollow">https://github.com/dbohdan/classless-css</a>. I used part of your demo page as the basis for the comparison screenshots.
That looks pretty neat.<p>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.<p>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: <a href="https://alistapart.com/article/web-typography-tables" rel="nofollow">https://alistapart.com/article/web-typography-tables</a><p>Some quotes:<p>"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."<p>"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."<p>Edit: Here is a quick design I tried: <a href="https://i.imgur.com/xgKsNvy.png" rel="nofollow">https://i.imgur.com/xgKsNvy.png</a><p>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.
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?<p>For example, some things I would want to be able to select/tweak:<p>* Colour scheme/theme<p>* Responsiveness to mobile devices (i.e. changing fonts/layout, etc)<p>* Navigation bar<p>* Transition effects<p>* Support for older browsers (but still look okay (yes this is still a requirement in 2019))<p>* Support for IE (which seems to be hilariously harder than it should be)<p>* Toggle/select use of fonts<p>If not then it might be useful to build out a tool to dynamically create such a thing.
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.
Looks really good! Definitely would use something like this for some quick pages alright.<p>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.<p>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!
He has a product hunt scheduled for tomorrow. Didn’t know you could schedule product hunt posts.<p><a href="https://www.producthunt.com/posts/water-css" rel="nofollow">https://www.producthunt.com/posts/water-css</a>
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)?
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!).
Is it similar to milligram[0] ?<p>I'm genuinely asking, because my CSS "awareness" is so terrible, despite years of web development experience. I just can't figure CSS out.<p>[0] <a href="https://milligram.io/" rel="nofollow">https://milligram.io/</a>
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 <i>some</i> styling. It would, among other things, minimize on bandwidth while providing a comfortable experience.
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.<p>[0] <a href="https://picnicss.com/" rel="nofollow">https://picnicss.com/</a>
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.
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.<p>Kudos on a great project and thanks for sharing it with the world!
Reminds me of <a href="https://oxal.org/projects/sakura/" rel="nofollow">https://oxal.org/projects/sakura/</a> in a nice way.
I would like to see a version for those of us that structure our documents.<p>What is this structure you speak of?<p>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.<p>But there is more to it than this.<p>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.<p>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.<p>Then there are images. Images don't have to be in random 'div' elements. They should be in 'figure' or 'picture' elements.<p>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.<p>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.<p>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.<p>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.<p>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.<p>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'.<p>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.<p>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.