Show HN: Water.css – A just-add-css collection of styles to make websites nicer
github.com
github.com
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
[0] https://www.w3.org/StyleSheets/Core/
[1] https://web.archive.org/web/19980703153940/https://www.w3.or...
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
} * {
transition: all 0.2s ease-out;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
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.
I'm a 13yo developer, wannabe designer, and cellist.
How awesome! Makes me feel hopeful about the future.
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
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.
I don't see any linebreaks in the source, but there is this:
input:not([type='checkbox']), select {
display: block;
}
Alternatively: the defaults are poor.
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.
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.
A bit from this discussion https://news.ycombinator.com/item?id=19607169
You only have to set the margins/width of your document and maybe some sort of header & footer and you're done with the CSS your very basic but also very readable website.
edit: aside from the new list of "classless CSS frameworks/themes" mentioned in @networked's post.
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
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
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 went with this design: https://i.imgur.com/7z9wTe9.png
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.
Here's my attempt: https://www.cssbed.com/
Feel free to add options at https://github.com/ubershmekel/cssbed
Also, some of these projects have restrictions about publicly releasing documentation (even hosted privately on third party servers).
how does it make any sense for him or for you?
Most popular libraries (Bootstrap) or fonts are hosted on at least one CDN.
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!
(EDIT: Typo)
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.
I'm genuinely asking, because my CSS "awareness" is so terrible, despite years of web development experience. I just can't figure CSS out.
Kudos on a great project and thanks for sharing it with the world!
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?
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.
Tacit is behind the times when it comes to CSS Grid, I don't see the point in jiggling with floats, again it is one of those things that constrains how you think. With CSS Grid you can write content in a natural order and then position blocks of it according to design and, with a few CSS variables get it working in all viewports.
Interesting that tacit does not show default styles with structural elements. Maybe the HTML5 spec has been worked through rather than the starting point assumed to be structured content.
I can remember the days of Microsoft Word when some people would use templates and styles. Some people just did not get it and would make a title a title by hitting the 'bold' button and pushing the font size up, maybe using blank lines for spacing. I feel that the web is full of people who never understood styles in Word and didn't have a clue as to why you might need them.
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?
---
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.
---
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.
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 :)
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!
Sadly, HTML5 offers virtually all of this out of the box, but it's not seen or understood by most. Mark Pilgrim's Dive Into HTML5 is itself mostly a demonstration of this (it lacks article and section tags, though is otherwise lean), and the page source itsel is very highly readable:
view-source:https://diveintohtml5.info/introduction.html
https://diveintohtml5.info/introduction.html
There are also notions such as microformats and standard templates, which smoth the way to standard and substitutable stylesheets as well as parsing, search, bibliographic, and archival tools.
http://microformats.org/wiki/get-started
All of which start from document structure.
Same as my previous comment, no 'main' or 'nav' or all that stuff. There are these microformat things which are okay if you want to get your product info or book into Google in an sku/price/ISBN type of schema. But we conflate that with weird 'aria' accessibility things. Properly structured HTML just does that out the box.
So why use 'main'? Well, if you do reader mode in Firefox or Safari then it cuts the cruft out and just shows you the stuff you want to read. Or that you want others to read. It is not rocket science and you don't need any Wordpress style 'skip to main content' link hidden at the top or 'role=main', just the 'main' element will do.
But who knows that?
Everyone in the game should.
I checked the Apple site for HTML recently and they sell billions from that site. But none of the links in the footer are in a 'nav' element. I know people don't care and that I am the only person in the world that has noticed their 'poor HTML' but you would think they would be able to get that bit of structure right. Their site is pretty awesome, they have 'main' done but didn't do very well with the navigation links. I am not being a pedant for thinking that is odd but for people who only care about the latest frameworks and 'technologies' content is just data not something that needs to be structured. I don't care about 'technologies', to me content has to be structured right if it is to be taken seriously.
What I also find odd is that structure and HTML5 elements are easy. There are vastly less elements than there are random Bootstrap classes but nobody cares to learn the elements.
> Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
You can argue that what Apple has here is comprehensive enough to warrant being called out as a navigation, especially since the structure there doesn't appear to be immediately accessible from other page sections, but it's not clear cut, and it's likely a predictable pattern for a user of assistive technologies that company homepages have such footers.
According to MDN:
Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.
They also have the breadcrumbs for the page in the footer. I approve of breadcrumbs but there is a place for them and that is in the 'main' content. Whether you show them on visually pretty pages or not is another matter, but a global footer isn't the specific content the breadcrumbs refer to, that is in 'main'.
Now Apple clearly care a lot about their page but it also has to look great on those 32 bit ipads that don't have the latest Safari on them. So they cannot use grid layout.
If they were able to use grid layout then they would be able to have a fraction of the markup plus they could have the breadcrumbs in main at the top of the document with them appearing at the top of the footer. The visual layout could be solved with the document structure being less of a hack.
They also load images as background images when I feel they are content images, not mere decoration. By doing so they are not able to use things like srcsets and make use of data saving on phones that request that mode due to low bandwidth.
I do find these design decisions most interesting. I also appreciate that they do have to have the site work for old 32 bit ipads - particularly if those users are to buy a 64 bit ipad! Their site is undoubtedly working well and they have gone the extra mile for accessibility. However, the more you look into it, even if first assumptions are wrong (me not seeing the 'nav') the more curious it gets. I didn't spot the 'nav' elements for the sea of divs with untold class tags, labels with headings in them and 'aria' markup. If it was true design elegance then it would be simpler markup and the assistive technologies could work it all out due to clear document structure. Plus I would spot the 'nav' elements first time.