mirror of
https://github.com/kognise/water.css.git
synced 2025-10-29 11:16:16 +01:00
354 lines
13 KiB
HTML
354 lines
13 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/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>
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || []
|
|
// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
|
|
const gtag = function () {
|
|
window.dataLayer.push(arguments)
|
|
}
|
|
gtag('js', new Date())
|
|
gtag('config', 'UA-116663597-6')
|
|
</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/dist/water.css"></code></pre>
|
|
<pre hidden id="link-snippet-dark"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/dark.css"></code></pre>
|
|
<pre hidden id="link-snippet-light"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/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:void%20function(){const%20a=a=%3Edocument.querySelectorAll(a),b=(a,b)=%3EObject.assign(document.createElement(a),b);a(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),a(%22*%22).forEach(a=%3Ea.style=%22%22),document.head.append(b(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/npm/water.css%402/dist/water.css%22}),!a(%22meta[name=\%22viewport\%22]%22).length%26%26b(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))}();">
|
|
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" />
|
|
</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>
|
|
|
|
<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>
|