mirror of
https://github.com/kognise/water.css.git
synced 2025-10-23 17:36:10 +02:00
198 lines
12 KiB
HTML
198 lines
12 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="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:site_name" 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>
|
|
<header>
|
|
<div class="row">
|
|
<h1>Water.css</h1>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<ul>
|
|
<li>It's responsive</li>
|
|
<li>It's easy to theme</li>
|
|
<li>It has great browser support</li>
|
|
<li>It has a tiny size</li>
|
|
<li>It doesn't require <strong>any</strong> classes</li>
|
|
<li>It looks beautiful</li>
|
|
<li>It encourages semantic code</li>
|
|
</ul>
|
|
<p>
|
|
<b>Go to <a href="/docs.html" target="_blank">element documentation</a></b> or check out the
|
|
<a href="https://github.com/kognise/water.css" target="_blank" rel="nooopener noreferrer">GitHub</a>.
|
|
</p>
|
|
</header>
|
|
|
|
<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="responsive">Is it responsive?</h2>
|
|
<p>
|
|
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's mobile
|
|
responsive by default. Just add the famous
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics">responsive viewport tag</a> and
|
|
you'll be good to go!
|
|
</p>
|
|
<p>In fact, try resizing this page. Everything will flow super nicely.</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()%7B%2F%2F%20Water.css%20Bookmarklet%0A%2F%2F%20---------------------%0A%0Aconst%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%2F%2F%20Remove%20all%20CSS%20stylesheets%2C%20external%20and%20internal%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%2F%2F%20Remove%20all%20inline%20styles%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.min.css'%0A%7D)%0A%0A%2F%2F%20Add%20water.css%20and%20responsive%20viewport%20(if%20necessary)%0Adocument.head.append(%0A%20%20linkElm%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%0A%2F%2F%20Theme%20switching%20icons%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0A%2F%2F%20Theme%20toggling%20logic%0Aconst%20toggleBtn%20%3D%20createElement('button'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20ariaLabel%3A%20'Switch%20theme'%2C%0A%20%20style%3A%20%60%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%2050px%3B%0A%20%20%20%20right%3A%2050px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20line-height%3A%201%3B%0A%20%20%60%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0Aconst%20updateTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'dark')%20%7B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.min.css'%0A%20%20%7D%20else%20%7B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.min.css'%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.addEventListener('click'%2C%20()%20%3D%3E%20%7B%0A%20%20theme%20%3D%20theme%20%3D%3D%3D%20'dark'%20%3F%20'light'%20%3A%20'dark'%0A%20%20localStorage.setItem('water.css-theme'%2C%20theme)%0A%20%20updateTheme()%0A%7D)%0Adocument.body.append(toggleBtn)%0A%0Aconst%20saved%20%3D%20localStorage.getItem('water.css-theme')%0Aif%20(saved)%20%7B%0A%20%20theme%20%3D%20saved%0A%20%20updateTheme()%0A%7D%20else%20if%20(window.matchMedia('(prefers-color-scheme%3A%20dark)').matches)%20%7B%0A%20%20theme%20%3D%20'dark'%0A%20%20updateTheme()%0A%7D%20else%20if%20(window.matchMedia('(prefers-color-scheme%3A%20light)').matches)%20%7B%0A%20%20theme%20%3D%20'light'%0A%20%20updateTheme()%0A%7D%7D)()%3B">
|
|
Waterize
|
|
</a>
|
|
</strong>
|
|
|
|
<script src="scripts/themer.js" defer></script>
|
|
<script src="scripts/index.js" defer></script>
|
|
</body>
|
|
</html>
|