mirror of
https://github.com/kognise/water.css.git
synced 2025-10-24 01:46:09 +02:00
364 lines
17 KiB
HTML
364 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head prefix="og: http://ogp.me/ns#">
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Water.css</title>
|
|
<link rel="canonical" href="https://watercss.kognise.dev/" />
|
|
<meta
|
|
name="description"
|
|
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
|
|
/>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
|
|
<link rel="icon" id="icon-16" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
|
|
<link rel="icon" id="icon-32" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
|
|
<link rel="manifest" href="./site.webmanifest" />
|
|
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#5bbad5" />
|
|
<link rel="shortcut icon" id="icon-ico" href="./icons/favicon.ico" />
|
|
<meta name="apple-mobile-web-app-title" content="Water.css" />
|
|
<meta name="application-name" content="Water.css" />
|
|
<meta name="msapplication-TileColor" content="#00aba9" />
|
|
<meta name="msapplication-config" content="./icons/browserconfig.xml" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
|
|
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
|
|
<link rel="preload" as="style" href="./water.css/dark.min.css" />
|
|
<link rel="preload" as="style" href="./water.css/light.min.css" />
|
|
<link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/water.min.css" />
|
|
|
|
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
|
|
<link rel="stylesheet" id="js-stylesheet" />
|
|
|
|
<!-- Custom styles for the documentation / version picker -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://watercss.kognise.dev/" />
|
|
<meta property="og:title" content="Water.css" />
|
|
<meta
|
|
property="og:description"
|
|
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://raw.githubusercontent.com/kognise/water.css/master/assets/logo.png"
|
|
/>
|
|
<meta property="og:image:width" content="1154" />
|
|
<meta property="og:image:height" content="444" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://www.schema.org",
|
|
"@type": "WebSite",
|
|
"name": "Water.css",
|
|
"alternateName": "Water.css",
|
|
"url": "https://watercss.kognise.dev/"
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
// eslint-disable-next-line no-useless-escape
|
|
window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
|
|
</script>
|
|
|
|
<!-- Use bright favicons when the browser is in dark mode. -->
|
|
<script type="module">
|
|
import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
|
|
faviconSwitcher([
|
|
{ element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
|
|
{ element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
|
|
{ element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
|
|
])
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Water.css</h1>
|
|
|
|
<p>
|
|
Water.css is a drop-in collection of CSS styles to make simple websites like this just a
|
|
little bit nicer.
|
|
</p>
|
|
<p>
|
|
Now you can write your simple static site with nice semantic html, and Water.css will manage
|
|
the styling for you.
|
|
</p>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<a href="#installation"><b>Get it already!</b></a>
|
|
<br />
|
|
<a href="https://github.com/kognise/water.css"><b>GitHub</b></a>
|
|
</div>
|
|
|
|
<a
|
|
href="https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<img
|
|
id="product-hunt"
|
|
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
|
|
alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
|
|
style="width: 250px; height: 54px;"
|
|
width="250px"
|
|
height="54px"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<h2>Installation</h2>
|
|
<div id="installation">
|
|
<header class="row">
|
|
<h3 id="link-snippet-headline">
|
|
Paste this into the <code><head></code> of your HTML:
|
|
</h3>
|
|
<button type="button" id="copy-button">
|
|
<span id="copy-button-feedback"></span>
|
|
Copy to clipboard
|
|
</button>
|
|
</header>
|
|
|
|
<div id="link-snippet-container">
|
|
<pre id="link-snippet-auto"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"></code></pre>
|
|
<pre hidden id="link-snippet-dark"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></code></pre>
|
|
<pre hidden id="link-snippet-light"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"></code></pre>
|
|
</div>
|
|
|
|
<h3>Options</h3>
|
|
<form id="theme-form">
|
|
<input type="radio" value="auto" checked name="theme" id="theme-auto" />
|
|
<label for="theme-auto">Automatic 🌙 / ☀</label>
|
|
|
|
<input type="radio" value="dark" name="theme" id="theme-dark" />
|
|
<label for="theme-dark">Dark theme 🌙</label>
|
|
|
|
<input type="radio" value="light" name="theme" id="theme-light" />
|
|
<label for="theme-light">Light theme ☀</label>
|
|
</form>
|
|
|
|
<table id="version-info">
|
|
<caption>
|
|
<h3>Version info</h3>
|
|
</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">File</th>
|
|
<td id="table-file-name"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Size (min + gzip)</th>
|
|
<td id="table-file-size"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Theme</th>
|
|
<td id="table-theme"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2 id="goals">Goals</h2>
|
|
<ul>
|
|
<li>Responsive</li>
|
|
<li>Good code quality</li>
|
|
<li>Good browser support</li>
|
|
<li>Small size (< 2kb)</li>
|
|
<li>Beautiful</li>
|
|
<li>No classes</li>
|
|
</ul>
|
|
|
|
<h2 id="responsive">Is it responsive?</h2>
|
|
<p>
|
|
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
|
|
responsive. Just add the famous
|
|
<a href="https://www.w3schools.com/css/css_rwd_viewport.asp">responsive viewport tag</a> and
|
|
you'll be good to go!
|
|
</p>
|
|
<p>In fact, try resizing this page. Everything flows super nicely as you'll see.</p>
|
|
|
|
<h2 id="bookmarklet">Bookmarklet</h2>
|
|
<p>
|
|
A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar.
|
|
</p>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<strong>
|
|
<a href="javascript:(function()%7Bconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Adocument.head.append(%0A%20%20createElement('link'%2C%20%7B%0A%20%20%20%20rel%3A%20'stylesheet'%2C%0A%20%20%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%0A%20%20%7D)%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20rootElm%20%3D%20document.querySelector(%22%3Aroot%22)%3B%0A%20%20%2F%2F%20var%20rs%20%3D%20getComputedStyle(rootElm)%3B%0A%20%20const%20theme%20%3D%20rootElm.getAttribute(%22theme%22)%3B%0A%0A%20%20if%20(theme%20%3D%3D%3D%20%22dark%22)%20%7B%0A%20%20%20%20rootElm.setAttribute(%22theme%22%2C%20%22light%22)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20rootElm.setAttribute(%22theme%22%2C%20%22dark%22)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20themeCSS%20%3D%20%60%2F*%20*%20light%20theme%20colors%20*%2F%0A%3Aroot%5Btheme%3D%22light%22%5D%20%7B%0A--background-body%3A%20%23fff%3B%0A--background%3A%20%23efefef%3B%0A--background-alt%3A%20%23f7f7f7%3B%0A--selection%3A%20%239e9e9e%3B%0A--text-main%3A%20%23363636%3B%0A--text-bright%3A%20%23000%3B%0A--text-muted%3A%20%2370777f%3B%0A--links%3A%20%230076d1%3B%0A--focus%3A%20rgba(0%2C%20150%2C%20191%2C%200.67)%3B%0A--border%3A%20%23dbdbdb%3B%0A--code%3A%20%23000%3B%0A--animation-duration%3A%200.1s%3B%0A--button-hover%3A%20%23ddd%3B%0A--scrollbar-thumb%3A%20%23d5d5d5%3B%0A--scrollbar-thumb-hover%3A%20%23c4c4c4%3B%0A--form-placeholder%3A%20%23949494%3B%0A--form-text%3A%20%23000%3B%0A--variable%3A%20%2339a33c%3B%0A--highlight%3A%20%23ff0%3B%0A--select-arrow%3A%20url(%0A%20%20data%3Aimage%2Fsvg%20%2B%20xml%3Bcharset%3Dutf-8%2C%0A%20%20%253Csvgxmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22height%3D%2263%22width%3D%22117%22fill%3D%22%2523161f27%22%253E%253Cpathd%3D%22M115%202c-1-2-4-2-5%200L59%2053%207%202a4%204%200%2000-5%205l54%2054%202%202%203-2%2054-54c2-1%202-4%200-5z%22%2F%253E%253C%2Fsvg%253E%0A)%3B%0A%7D%0A%0A%2F*%20*%20dark%20theme%20colors!%20*%2F%0A%3Aroot%5Btheme%3D%22dark%22%5D%20%7B%0A--background-body%3A%20%23202b38%3B%0A--background%3A%20%23161f27%3B%0A--background-alt%3A%20%231a242f%3B%0A--selection%3A%20%231c76c5%3B%0A--text-main%3A%20%23dbdbdb%3B%0A--text-bright%3A%20%23fff%3B%0A--text-muted%3A%20%23a9b1ba%3B%0A--links%3A%20%2341adff%3B%0A--focus%3A%20rgba(0%2C%20150%2C%20191%2C%200.67)%3B%0A--border%3A%20%23526980%3B%0A--code%3A%20%23ffbe85%3B%0A--animation-duration%3A%200.1s%3B%0A--button-hover%3A%20%23324759%3B%0A--scrollbar-thumb%3A%20var(--button-hover)%3B%0A--scrollbar-thumb-hover%3A%20%23415c73%3B%0A--form-placeholder%3A%20%23a9a9a9%3B%0A--form-text%3A%20%23fff%3B%0A--variable%3A%20%23d941e2%3B%0A--highlight%3A%20%23efdb43%3B%0A--select-arrow%3A%20url(%0A%20%20data%3Aimage%2Fsvg%20%2B%20xml%3Bcharset%3Dutf-8%2C%0A%20%20%253Csvgxmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22height%3D%2263%22width%3D%22117%22fill%3D%22%2523efefef%22%253E%253Cpathd%3D%22M115%202c-1-2-4-2-5%200L59%2053%207%202a4%204%200%2000-5%205l54%2054%202%202%203-2%2054-54c2-1%202-4%200-5z%22%2F%253E%253C%2Fsvg%253E%0A)%3B%0A%7D%60%0A%0Adocument.body.append(%0A%20%20createElement('style'%2C%20%7B%0A%20%20%20%20innerText%3A%20themeCSS%0A%20%20%7D)%2C%0A%20%20createElement('button'%2C%20%7B%0A%20%20%20%20innerText%3A%20'toggle%20theme%20!'%2C%0A%20%20%20%20style%3A%20'position%3A%20fixed%20!important%3B%20top%3A%2050px%20!important%3B%20right%3A%20100px'%2C%0A%20%20%20%20onclick%3A%20toggleTheme%0A%20%20%7D)%0A)%7D)()%3B">
|
|
Waterize
|
|
</a>
|
|
</strong>
|
|
|
|
<h2 id="demo">Element demos</h2>
|
|
<p>This is supposed to be a demo page so we need more elements!</p>
|
|
|
|
<h3 id="form-elements">Form elements</h3>
|
|
<form>
|
|
<label for="email">Email</label>
|
|
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
|
|
|
|
<label for="id">User id (read only)</label>
|
|
<input readonly name="id" id="id" value="04D6H89Z" />
|
|
|
|
<label for="disabled">Random disabled input</label>
|
|
<input disabled name="disabled" id="disabled" placeholder="Because why not?" />
|
|
|
|
<label for="about">About me</label>
|
|
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
|
|
|
|
<label>Choose a Doe:</label>
|
|
<div>
|
|
<input type="radio" id="john" name="drone" value="john" checked />
|
|
<label for="john">John Doe</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="jane" name="drone" value="jane" checked />
|
|
<label for="jane">Jane Doe</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="johnny" name="drone" value="johnny" checked />
|
|
<label for="johnny">Johnny Doe</label>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<input type="checkbox" name="remember" id="remember" checked />
|
|
<label for="remember">Remember me</label>
|
|
|
|
<input type="submit" value="Submit" />
|
|
<input type="reset" value="Reset" />
|
|
</form>
|
|
|
|
<h3 id="code">Code</h3>
|
|
<p>
|
|
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>. Did you know,
|
|
<code>alert(1)</code> can show an alert in JavaScript!
|
|
</p>
|
|
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
|
|
|
<h3 id="other">Other</h3>
|
|
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
|
<img src="https://placekitten.com/408/287" alt="Example kitten" />
|
|
<hr />
|
|
|
|
<p>And here's a nicely marked up table!</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Quantity</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Godzilla</td>
|
|
<td>2</td>
|
|
<td>$299.99</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mozilla</td>
|
|
<td>10</td>
|
|
<td>$100,000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Quesadilla</td>
|
|
<td>1</td>
|
|
<td>$2.22</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<details>
|
|
<summary>Some summary/details can't hurt!</summary>
|
|
<p>Lorem ipsum dolor sit blah blah.</p>
|
|
</details>
|
|
|
|
<p>The dialog (form, and menu) tag</p>
|
|
|
|
<div>
|
|
<button type="button" id="dialog-trigger">
|
|
Show me the dialog!
|
|
</button>
|
|
<span id="dialog-result"></span>
|
|
</div>
|
|
|
|
<dialog id="dialog">
|
|
<header>This is a sample dialog</header>
|
|
<form method="dialog">
|
|
<p>What is your favorite pet animal?</p>
|
|
<menu>
|
|
<button value="feline">Cats</button>
|
|
<button value="canine">Dogs</button>
|
|
<button value="other">Others</button>
|
|
</menu>
|
|
</form>
|
|
</dialog>
|
|
|
|
<h3 id="typography">Typography</h3>
|
|
<p>
|
|
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.
|
|
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b>
|
|
<em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
|
|
</p>
|
|
|
|
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
|
|
"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
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes"
|
|
>Notes</a
|
|
>
|
|
for how to change it). A URL for the source of the quotation may be given using the
|
|
<code>cite</code> attribute, while a text representation of the source can be given using the
|
|
<code><cite></code> cite element."
|
|
|
|
<footer>
|
|
<cite>MDN, "The Block Quotation element"</cite>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<ul>
|
|
<li>Unordered list item 1</li>
|
|
<li>Unordered list item 2</li>
|
|
<li>Unordered list item 3</li>
|
|
</ul>
|
|
<ol>
|
|
<li>Ordered list item 1</li>
|
|
<li>Ordered list item 2</li>
|
|
<li>Ordered list item 3</li>
|
|
</ol>
|
|
|
|
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
|
<address>
|
|
<a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
|
|
<a href="tel:778-330-2389">778-330-2389</a><br />
|
|
<a href="sms:666-666-6666">666-666-6666</a><br />
|
|
</address>
|
|
|
|
<br />
|
|
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
|
|
<footer>
|
|
<a href="#">Back to top ⬆</a>
|
|
</footer>
|
|
<script src="script.js" defer></script>
|
|
</body>
|
|
</html>
|