From 44e5a55736c4ff99d404441936b055483ed9c42d Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sat, 14 Feb 2026 12:39:43 -0500 Subject: fork: initial commit, derived from water.css (d950cbc) --- docs/index.html | 363 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 363 insertions(+) create mode 100644 docs/index.html (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..d9ec359 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,363 @@ + + + + + + Water.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Water.css

+ +

+ Water.css is a drop-in collection of CSS styles to make simple websites like this just a + little bit nicer. +

+

+ Now you can write your simple static site with nice semantic html, and Water.css will manage + the styling for you. +

+ +
+
+ Get it already! +
+ GitHub +
+ + + Water.css - Make your tiny website just a little nicer | Product Hunt Embed + +
+ +

Installation

+
+
+ + +
+ + + +

Options

+
+ + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+

Version info

+
File
Size (min + gzip)
Theme
+
+ +

Goals

+ + +

Is it responsive?

+

+ Heck yeah! It doesn't include any fancy styles so it's easily mobile + responsive. Just add the famous + responsive viewport tag and + you'll be good to go! +

+

In fact, try resizing this page. Everything flows super nicely as you'll see.

+ +

Bookmarklet

+

+ A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar. +

+

+ The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar: +

+ + + Waterize + + + +

Element demos

+

This is supposed to be a demo page so we need more elements!

+ +

Form elements

+
+ + + + + + + + + + + + + +
+ + +
+
+ + +
+
+ + +
+ +
+ + + + + + +
+ +

Code

+

+ Below is some code, you can copy it with Ctrl-C. Did you know, + alert(1) can show an alert in JavaScript! +

+ 
// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')
+ +

Other

+

Here's a horizontal rule and image because I don't know where else to put them.

+ Example kitten +
+ +

And here's a nicely marked up table!

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
+ +
+ Some summary/details can't hurt! +

Lorem ipsum dolor sit blah blah.

+
+ +

The dialog (form, and menu) tag

+ +
+ + +
+ + +
This is a sample dialog
+
+

What is your favorite pet animal?

+ + + + + +
+ + +

Typography

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis + ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis + ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu + felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui + aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos himenaeos. + This is strong, this is normal, this is just bold, + and this is emphasized! And heck, here's a link. +

+ +
+ "The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed + text is an extended quotation. Usually, this is rendered visually by indentation (see + Notes + for how to change it). A URL for the source of the quotation may be given using the + cite attribute, while a text representation of the source can be given using the + <cite> cite element." + + +
+ + +
    +
  1. Ordered list item 1
    2. +
  2. Ordered list item 2
    3. +
  3. Ordered list item 3
    4. +
+ +

Addresses are also styled to be awesome!

+
+ john.doe@example.com
+ 778-330-2389
+ 666-666-6666
+
+ +
+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ + + + + -- cgit v1.2.3