mirror of
https://github.com/kognise/water.css.git
synced 2025-10-24 09:56:10 +02:00
e81b5d1606
Add files via upload Delete docs.html Delete sheets.css Add files via upload Delete docs.html Delete scr.js Delete sheets.css Add files via upload Add description list styles Misc. style changes Add documentation Create swift-dots-run.md
198 lines
11 KiB
HTML
198 lines
11 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.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%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light')%20%7B%0A%20%20%20%20theme%20%3D%20'dark'%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.css'%0A%20%20%7D%20else%20%7B%0A%20%20%20%20theme%20%3D%20'light'%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.css'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.addEventListener('click'%2C%20toggleTheme)%0Adocument.body.append(toggleBtn)%7D)()%3B">
|
|
Waterize
|
|
</a>
|
|
</strong>
|
|
|
|
<script src="scripts/themer.js" defer></script>
|
|
<script src="scripts/index.js" defer></script>
|
|
</body>
|
|
</html>
|