Show HN: Water.css – A just-add-css collection of styles to make websites nicer
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 &#x27;head&#x27; and a &#x27;body&#x27;. 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 &#x27;header&#x27;, a &#x27;main&#x27; and a &#x27;footer&#x27;. In the &#x27;header&#x27; you are going to want a &#x27;nav&#x27; and the same for the &#x27;footer&#x27;, you are going to want a &#x27;nav&#x27;. 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 &#x27;main&#x27; content, if you believe in structure, you are wanting to have &#x27;article&#x27; or &#x27;section&#x27; with a possible &#x27;aside&#x27; or two.<p>Then there are images. Images don&#x27;t have to be in random &#x27;div&#x27; elements. They should be in &#x27;figure&#x27; or &#x27;picture&#x27; 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 &#x27;header&#x27;&#x2F;&#x27;main&#x27;&#x2F;&#x27;footer&#x27; 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&#x2F;figure elements could be set to be done properly, if in a containing &#x27;figure&#x27; then set to 100% width. If the main has a &#x27;grid&#x27; setup then you could easily have well structured HTML show neatly with anything &#x27;not structured&#x27; evident because it wouldn&#x27;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 &#x27;article&#x27;, &#x27;section&#x27; or &#x27;aside&#x27; 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&#x2F;rems and viewer units all the way. The pixel is outmoded.<p>For your forms you want to think differently and more structured. So &#x27;form&#x27; needs to be &#x27;display: grid&#x27; 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 &#x27;grid gap&#x27;.<p>This means forms can then be a straight list of label&#x2F;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.