2019-05-30 22:13:57 +02:00
<!DOCTYPE html>
< html lang = "en" >
2019-06-09 22:52:55 +02:00
< head prefix = "og: http://ogp.me/ns#" >
< meta charset = "utf-8" / >
2019-05-30 22:13:57 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2019-06-09 22:52:55 +02:00
< title > Water.css< / title >
2020-05-28 17:50:33 -05:00
< link rel = "canonical" href = "https://watercss.kognise.dev/" / >
2019-06-09 22:52:55 +02:00
< meta
name="description"
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
/>
2019-06-08 21:31:00 +02:00
2019-05-30 22:13:57 +02:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "./icons/apple-touch-icon.png" / >
2019-06-09 15:27:36 +02:00
< 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" / >
2019-06-09 15:30:02 +02:00
< link rel = "manifest" href = "./site.webmanifest" / >
2019-05-30 22:13:57 +02:00
< link rel = "mask-icon" href = "./icons/safari-pinned-tab.svg" color = "#5bbad5" / >
2019-06-09 15:27:36 +02:00
< link rel = "shortcut icon" id = "icon-ico" href = "./icons/favicon.ico" / >
2019-05-30 22:13:57 +02:00
< 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" / >
2019-06-08 21:31:00 +02:00
2019-06-07 21:21:59 +02:00
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
2020-05-28 14:40:02 -05:00
< link rel = "stylesheet" id = "js-startup-stylesheet" href = "./water.css/water.min.css" / >
2019-06-08 21:31:00 +02:00
2019-06-07 21:21:59 +02:00
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
2019-05-30 22:13:57 +02:00
< link rel = "stylesheet" id = "js-stylesheet" / >
2020-05-28 14:40:02 -05:00
2019-05-30 22:13:57 +02:00
<!-- Custom styles for the documentation / version picker -->
< link rel = "stylesheet" href = "style.css" / >
2019-06-09 22:52:55 +02:00
< meta name = "twitter:card" content = "summary_large_image" / >
< meta property = "og:type" content = "website" / >
2020-05-28 17:50:33 -05:00
< meta property = "og:url" content = "https://watercss.kognise.dev/" / >
2019-06-09 22:52:55 +02:00
< meta property = "og:title" content = "Water.css" / >
2022-01-21 13:07:13 -06:00
< meta property = "og:site_name" content = "Water.css" / >
2019-06-09 22:52:55 +02:00
< 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"
2020-10-01 14:09:54 -04:00
content="https://raw.githubusercontent.com/kognise/water.css/master/assets/logo.png"
2019-06-09 22:52:55 +02:00
/>
< 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",
2020-05-28 17:50:33 -05:00
"url": "https://watercss.kognise.dev/"
2019-06-09 22:52:55 +02:00
}
< / script >
2020-05-30 04:27:57 +02:00
< 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" > < \ / s c r i p t > ' )
< / script >
2020-05-27 13:09:20 -05:00
<!-- 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 >
2019-05-30 22:13:57 +02:00
< / head >
< body >
2022-01-21 13:07:13 -06:00
< 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"
2022-01-21 13:14:45 -06:00
id="product-hunt"
2022-01-21 13:07:13 -06:00
rel="noopener"
>
< img
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 >
2019-05-30 22:13:57 +02:00
< / div >
2022-01-21 13:07:13 -06:00
< 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 >
2019-05-30 22:13:57 +02:00
2019-05-31 03:31:15 +02:00
< h2 > Installation< / h2 >
2022-01-21 13:07:13 -06:00
2020-05-30 03:58:04 +02:00
< div id = "installation" >
2020-05-30 04:45:15 +02:00
< header class = "row" >
< h3 id = "link-snippet-headline" >
Paste this into the < code > < head> < / code > of your HTML:
< / h3 >
2020-05-30 04:27:57 +02:00
< button type = "button" id = "copy-button" >
2020-05-29 23:23:08 -05:00
< span id = "copy-button-feedback" > < / span >
2020-05-28 14:40:02 -05:00
Copy to clipboard
< / button >
< / header >
2020-05-30 02:42:08 +02:00
2020-05-30 03:58:04 +02:00
< div id = "link-snippet-container" >
2022-01-22 11:44:36 -06:00
< pre id = "link-snippet-auto" > < code > < link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">< / code > < / pre >
< pre hidden id = "link-snippet-dark" > < code > < link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">< / code > < / pre >
< pre hidden id = "link-snippet-light" > < code > < link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">< / code > < / pre >
2020-05-30 03:58:04 +02:00
< / div >
2020-05-30 02:42:08 +02:00
2020-05-28 14:40:02 -05:00
< h3 > Options< / h3 >
< form id = "theme-form" >
< input type = "radio" value = "auto" checked name = "theme" id = "theme-auto" / >
2020-05-29 23:23:08 -05:00
< label for = "theme-auto" > Automatic 🌙 / ☀< / label >
2020-05-28 14:40:02 -05:00
< input type = "radio" value = "dark" name = "theme" id = "theme-dark" / >
2020-05-29 23:23:08 -05:00
< label for = "theme-dark" > Dark theme 🌙< / label >
2020-05-28 14:40:02 -05:00
< input type = "radio" value = "light" name = "theme" id = "theme-light" / >
2020-05-29 23:23:08 -05:00
< label for = "theme-light" > Light theme ☀< / label >
2020-05-28 14:40:02 -05:00
< / 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 >
2022-01-22 11:55:55 -06:00
< tr >
< th scope = "row" > NPM instructions< / th >
< td id = "table-npm" > < / td >
< / tr >
2020-05-28 14:40:02 -05:00
< / tbody >
< / table >
< / div >
2019-05-30 22:13:57 +02:00
< h2 id = "responsive" > Is it responsive?< / h2 >
< p >
2022-01-21 13:07:13 -06:00
< 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
2019-05-30 22:13:57 +02:00
you'll be good to go!
< / p >
2022-01-21 13:07:13 -06:00
< p > In fact, try resizing this page. Everything will flow super nicely.< / p >
2019-05-30 22:13:57 +02:00
2020-05-29 22:37:47 -05:00
< h2 id = "bookmarklet" > Bookmarklet< / h2 >
< p >
2020-05-31 01:43:28 +02:00
A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar.
2020-05-29 22:37:47 -05:00
< / 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 >
2021-10-02 20:20:06 -04:00
< 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%
2020-05-29 22:37:47 -05:00
Waterize
< / a >
< / strong >
2022-01-21 13:07:13 -06:00
< script src = "scripts/themer.js" defer > < / script >
< script src = "scripts/index.js" defer > < / script >
2019-05-30 22:13:57 +02:00
< / body >
< / html >
