2019-04-04 17:25:34 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang='en'>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Water.css</title>
|
2019-08-26 12:59:10 -04:00
|
|
|
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css' />
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
2019-06-01 03:03:13 +02:00
|
|
|
<!-- Icons generated with https://realfavicongenerator.net -->
|
2019-06-19 13:34:10 +03:00
|
|
|
<link
|
2019-08-26 12:59:10 -04:00
|
|
|
rel='apple-touch-icon'
|
|
|
|
|
sizes='180x180'
|
|
|
|
|
href='/icons/apple-touch-icon.png'
|
2019-06-19 13:34:10 +03:00
|
|
|
/>
|
|
|
|
|
<link
|
2019-08-26 12:59:10 -04:00
|
|
|
rel='icon'
|
|
|
|
|
type='image/png'
|
|
|
|
|
sizes='32x32'
|
|
|
|
|
href='/icons/favicon-32x32.png'
|
2019-06-19 13:34:10 +03:00
|
|
|
/>
|
|
|
|
|
<link
|
2019-08-26 12:59:10 -04:00
|
|
|
rel='icon'
|
|
|
|
|
type='image/png'
|
|
|
|
|
sizes='16x16'
|
|
|
|
|
href='/icons/favicon-16x16.png'
|
2019-06-19 13:34:10 +03:00
|
|
|
/>
|
2019-08-26 12:59:10 -04:00
|
|
|
<link rel='manifest' href='/icons/site.webmanifest' />
|
|
|
|
|
<link rel='mask-icon' href='/icons/safari-pinned-tab.svg' color='#5bbad5' />
|
|
|
|
|
<link rel='shortcut icon' 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' />
|
2019-04-05 12:47:56 -04:00
|
|
|
|
2019-06-19 13:34:10 +03:00
|
|
|
<script
|
|
|
|
|
async
|
2019-08-26 12:59:10 -04:00
|
|
|
src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'
|
2019-06-19 13:34:10 +03:00
|
|
|
></script>
|
2019-04-05 01:05:12 -04:00
|
|
|
<script>
|
2019-06-19 13:34:10 +03:00
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
|
|
function gtag() {
|
|
|
|
|
dataLayer.push(arguments);
|
|
|
|
|
}
|
2019-08-26 12:59:10 -04:00
|
|
|
gtag('js', new Date());
|
|
|
|
|
gtag('config', 'UA-116663597-6');
|
2019-04-05 01:05:12 -04:00
|
|
|
</script>
|
2019-04-04 17:25:34 -04:00
|
|
|
</head>
|
2019-05-27 22:41:36 +02:00
|
|
|
|
2019-04-04 17:25:34 -04:00
|
|
|
<body>
|
|
|
|
|
<h1>Water.css</h1>
|
|
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
Water.css is a just-add-css collection of styles to make simple websites
|
|
|
|
|
like this just a little bit nicer.
|
2019-04-04 17:25:34 -04:00
|
|
|
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
Now you can write your simple static site with nice semantic html, and
|
|
|
|
|
Water.css will manage the styling for you.
|
2019-04-04 17:25:34 -04:00
|
|
|
</p>
|
2019-06-19 13:34:10 +03:00
|
|
|
<a
|
2019-08-26 12:59:10 -04:00
|
|
|
href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
|
|
|
|
|
target='_blank'
|
2019-06-19 13:34:10 +03:00
|
|
|
><img
|
2019-08-26 12:59:10 -04:00
|
|
|
id='ph'
|
2019-05-27 22:41:36 +02:00
|
|
|
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'
|
2019-08-26 12:59:10 -04:00
|
|
|
style='width: 250px; height: 54px;'
|
|
|
|
|
width='250px'
|
|
|
|
|
height='54px'
|
2019-06-19 13:34:10 +03:00
|
|
|
/></a>
|
2019-04-04 17:25:34 -04:00
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<h2>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>
|
|
|
|
|
|
2019-04-04 17:25:34 -04:00
|
|
|
<h2>Is it responsive?</h2>
|
|
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's
|
|
|
|
|
easily mobile responsive. Just add the famous
|
2019-08-26 12:59:10 -04:00
|
|
|
<a href='https://www.w3schools.com/css/css_rwd_viewport.asp'
|
2019-06-19 13:34:10 +03:00
|
|
|
>responsive viewport tag</a
|
|
|
|
|
>
|
|
|
|
|
and you'll be good to go!
|
2019-04-04 17:25:34 -04:00
|
|
|
</p>
|
|
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
In fact, try resizing this page. Everything flows super nicely as you'll
|
|
|
|
|
see.
|
2019-04-04 17:25:34 -04:00
|
|
|
</p>
|
2019-08-26 12:59:10 -04:00
|
|
|
<button type='button' id='switch'>Switch theme</button>
|
2019-04-06 18:28:04 -04:00
|
|
|
<h2>Element demos</h2>
|
2019-04-04 17:25:34 -04:00
|
|
|
<p>
|
|
|
|
|
This is supposed to be a demo page so we need more elements!
|
|
|
|
|
</p>
|
2019-04-06 18:28:04 -04:00
|
|
|
|
|
|
|
|
<h3>Form elements</h3>
|
2019-04-04 17:25:34 -04:00
|
|
|
<form>
|
|
|
|
|
<label for='email'>Email</label>
|
2019-06-19 13:34:10 +03:00
|
|
|
<input
|
2019-08-26 12:59:10 -04:00
|
|
|
type='email'
|
|
|
|
|
name='email'
|
|
|
|
|
id='email'
|
|
|
|
|
placeholder='john.doe@gmail.com'
|
2019-06-19 13:34:10 +03:00
|
|
|
/>
|
2019-04-04 17:25:34 -04:00
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<label for='id'>User id (read only)</label>
|
2019-08-26 12:59:10 -04:00
|
|
|
<input readonly name='id' id='id' value='04D6H89Z' />
|
2019-04-06 18:28:04 -04:00
|
|
|
|
|
|
|
|
<label for='disabled'>Random disabled input</label>
|
2019-06-19 13:34:10 +03:00
|
|
|
<input
|
|
|
|
|
disabled
|
2019-08-26 12:59:10 -04:00
|
|
|
name='disabled'
|
|
|
|
|
id='disabled'
|
|
|
|
|
placeholder='Because why not?'
|
2019-06-19 13:34:10 +03:00
|
|
|
/>
|
2019-04-06 18:28:04 -04:00
|
|
|
|
|
|
|
|
<label for='about'>About me</label>
|
2019-06-19 13:34:10 +03:00
|
|
|
<textarea
|
2019-08-26 12:59:10 -04:00
|
|
|
name='about'
|
|
|
|
|
id='about'
|
|
|
|
|
placeholder='I am a textarea...'
|
2019-06-19 13:34:10 +03:00
|
|
|
></textarea>
|
2019-04-04 17:25:34 -04:00
|
|
|
|
2019-04-11 14:21:57 -04:00
|
|
|
<label>Choose a Doe:</label>
|
|
|
|
|
<div>
|
2019-04-18 13:25:23 -04:00
|
|
|
<input type='radio' id='john' name='doe' value='john' checked>
|
2019-04-11 14:21:57 -04:00
|
|
|
<label for='john'>John Doe</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2019-04-18 13:25:23 -04:00
|
|
|
<input type='radio' id='jane' name='doe' value='jane' checked>
|
2019-04-11 14:21:57 -04:00
|
|
|
<label for='jane'>Jane Doe</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2019-04-18 13:25:23 -04:00
|
|
|
<input type='radio' id='johnny' name='doe' value='johnny' checked>
|
2019-04-11 14:21:57 -04:00
|
|
|
<label for='johnny'>Johnny Doe</label>
|
|
|
|
|
</div>
|
2019-04-18 13:25:23 -04:00
|
|
|
<div>
|
|
|
|
|
<input type='radio' id='doe' name='doe' value='doe' checked>
|
|
|
|
|
<label for='doe'>An actual doe</label>
|
|
|
|
|
</div>
|
2019-04-11 14:21:57 -04:00
|
|
|
|
2019-06-19 13:34:10 +03:00
|
|
|
<br />
|
2019-04-11 14:21:57 -04:00
|
|
|
|
2019-08-26 13:09:01 -04:00
|
|
|
<div>
|
|
|
|
|
<label for='volume'>Volume</label>
|
|
|
|
|
<input type='range' id='start' name='volume' id='volume' min='0' max='11' />
|
|
|
|
|
</div>
|
|
|
|
|
|
2019-08-26 12:59:10 -04:00
|
|
|
<input type='checkbox' name='remember' id='remember' checked />
|
2019-04-04 17:25:34 -04:00
|
|
|
<label for='remember'>Remember me</label>
|
|
|
|
|
|
2019-08-26 12:59:10 -04:00
|
|
|
<input type='submit' />
|
2019-04-04 17:25:34 -04:00
|
|
|
</form>
|
2019-04-05 09:09:13 -04:00
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<h3>Code</h3>
|
2019-04-06 17:13:33 -04:00
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
Below is some code, with a variable, you can copy it with
|
|
|
|
|
<kbd>Ctrl-C</kbd>. Did you know, <code>alert(1)</code> can show an alert
|
|
|
|
|
in JavaScript!
|
2019-04-06 17:13:33 -04:00
|
|
|
</p>
|
2019-06-05 21:33:30 -05:00
|
|
|
<code>var <var>myNumber</var> = 0;</code>
|
2019-04-07 06:06:33 +02:00
|
|
|
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
2019-04-06 17:13:33 -04:00
|
|
|
|
2019-06-05 21:33:30 -05:00
|
|
|
<p>Here are some more keyboard buttons</p>
|
2019-06-19 13:34:10 +03:00
|
|
|
<p>
|
|
|
|
|
Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take
|
|
|
|
|
a selected area screenshot on Linux.
|
|
|
|
|
</p>
|
2019-04-06 18:28:04 -04:00
|
|
|
<h3>Other</h3>
|
2019-06-19 13:34:10 +03:00
|
|
|
<p>
|
|
|
|
|
Here's a horizontal rule and image because I don't know where else to put
|
|
|
|
|
them.
|
|
|
|
|
</p>
|
2019-08-26 12:59:10 -04:00
|
|
|
<img src='https://placekitten.com/408/287' alt='Example kitten' />
|
2019-06-19 13:34:10 +03:00
|
|
|
<hr />
|
2019-04-06 18:28:04 -04:00
|
|
|
|
2019-04-06 19:09:47 -04:00
|
|
|
<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>
|
|
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<h3>Typography</h3>
|
|
|
|
|
<p>
|
2019-06-19 13:34:10 +03:00
|
|
|
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,
|
2019-08-26 12:59:10 -04:00
|
|
|
<a href='/'>here</a>'s a link.
|
2019-04-06 18:28:04 -04:00
|
|
|
</p>
|
2019-04-11 11:55:27 -04:00
|
|
|
|
2019-06-19 13:34:10 +03:00
|
|
|
<blockquote
|
2019-08-26 12:59:10 -04:00
|
|
|
cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'
|
2019-06-19 13:34:10 +03:00
|
|
|
>
|
2019-08-26 12:59:10 -04:00
|
|
|
'The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
2019-06-19 13:34:10 +03:00
|
|
|
that the enclosed text is an extended quotation. Usually, this is rendered
|
|
|
|
|
visually by indentation (see
|
2019-05-27 22:41:36 +02:00
|
|
|
<a
|
2019-08-26 12:59:10 -04:00
|
|
|
href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'
|
2019-06-19 13:34:10 +03:00
|
|
|
>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
|
2019-08-26 12:59:10 -04:00
|
|
|
be given using the <code><cite></code> cite element.'
|
2019-04-11 11:55:27 -04:00
|
|
|
|
|
|
|
|
<footer>
|
2019-08-26 12:59:10 -04:00
|
|
|
<cite>MDN, 'The Block Quotation element'</cite>
|
2019-04-11 11:55:27 -04:00
|
|
|
</footer>
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
2019-06-05 21:33:30 -05:00
|
|
|
<q>Quotes (<q>) share the same style as blockquotes.</q>
|
|
|
|
|
|
|
|
|
|
<p>Use <mark> to <mark>highlight the important stuff</mark>.</p>
|
|
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<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>
|
2019-04-14 09:40:40 -04:00
|
|
|
|
2019-06-19 13:34:10 +03:00
|
|
|
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
2019-04-14 09:40:40 -04:00
|
|
|
<address>
|
2019-05-27 22:41:36 +02:00
|
|
|
<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 />
|
2019-04-14 09:40:40 -04:00
|
|
|
</address>
|
|
|
|
|
|
2019-04-06 18:28:04 -04:00
|
|
|
<h1>Heading 1</h1>
|
|
|
|
|
<h2>Heading 2</h2>
|
|
|
|
|
<h3>Heading 3</h3>
|
|
|
|
|
<h4>Heading 4</h4>
|
|
|
|
|
<h5>Heading 5</h5>
|
|
|
|
|
<h6>Heading 6</h6>
|
|
|
|
|
|
2019-08-26 12:59:10 -04:00
|
|
|
<script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
|
|
|
|
|
<script src='script.js' defer></script>
|
2019-04-04 17:25:34 -04:00
|
|
|
</body>
|
2019-04-05 01:05:12 -04:00
|
|
|
</html>
|
