mirror of
https://github.com/kognise/water.css.git
synced 2025-09-01 01:01:52 +02:00
feat: add new installation guide, move to docs/
This commit is contained in:
Jonas Kuske
318
docs/index.html
Normal file
318
docs/index.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- Icons generated with https://realfavicongenerator.net -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
|
||||
<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" />
|
||||
<!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
|
||||
<link rel="stylesheet" href="../dist/dark-legacy.standalone.css" />
|
||||
<!-- Final, dynamic version of water.css, JS sets & updates href. Overwrites base styles -->
|
||||
<link rel="stylesheet" id="js-stylesheet" />
|
||||
<!-- Custom styles for the documentation / version picker -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
function gtag() {
|
||||
dataLayer.push(arguments)
|
||||
}
|
||||
gtag('js', new Date())
|
||||
gtag('config', 'UA-116663597-6')
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
|
||||
<p>
|
||||
Water.css is a just-add-css collection of styles to make simple websites like this just a
|
||||
little bit nicer.
|
||||
<br />
|
||||
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"
|
||||
>
|
||||
<img
|
||||
id="js-producthunt"
|
||||
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>
|
||||
|
||||
<div id="installation" v-cloak>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<div>
|
||||
<header class="row">
|
||||
<h3>Paste this into the <code><head></code> of your HTML:</h3>
|
||||
<button type="button" @click="copyToClipboard">
|
||||
<transition>
|
||||
<span class="emoji" v-if="copyStatus === 'success'">✔</span>
|
||||
<span class="emoji" v-else-if="copyStatus === 'failed'">❌</span>
|
||||
</transition>
|
||||
Copy to clipboard
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<transition mode="out-in">
|
||||
<pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
|
||||
</transition>
|
||||
|
||||
<h3>Version options:</h3>
|
||||
<form action="./" method="post" @submit.prevent>
|
||||
<label>
|
||||
<span class="emoji">🌙</span> Dark theme
|
||||
<input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" />
|
||||
</label>
|
||||
<label>
|
||||
<span class="emoji">☀</span> Light theme
|
||||
<input type="radio" value="light" v-model="versionOptions.theme" name="theme" />
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" checked v-model="versionOptions.isStandalone" />
|
||||
Enforce theme? (ignore <code>prefers-color-scheme</code>)
|
||||
</label>
|
||||
<br /><br />
|
||||
<label>
|
||||
<input type="checkbox" v-model="versionOptions.isLegacy" />
|
||||
Support Internet Explorer and other legacy browsers?
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<h3>Version info:</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<td>{{ selectedVersion.fileName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Size (min+gzip)</th>
|
||||
<td>{{ selectedVersion.fileSize }}KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Theme</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isStandalone">
|
||||
<span class="emoji" v-if="versionOptions.theme === 'dark'">🌙</span>
|
||||
<span class="emoji" v-else>☀</span>
|
||||
{{ versionOptions.theme | capitalize }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<span class="emoji" v-if="versionOptions.theme === 'dark'">🌙 / ☀</span>
|
||||
<span class="emoji" v-else>☀ / 🌙</span>
|
||||
Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings
|
||||
if set.
|
||||
<template v-if="preferedColorScheme">
|
||||
Your device is currently set to {{ preferedColorScheme }} mode.
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Browser support</th>
|
||||
<td>
|
||||
<template v-if="versionOptions.isLegacy">
|
||||
All browsers including Internet Explorer
|
||||
</template>
|
||||
<template v-else>
|
||||
All current browsers (<a href="https://caniuse.com/#feat=css-variables"
|
||||
>support for CSS Custom Properties</a
|
||||
>)
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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="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" />
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<script
|
||||
src="https://unpkg.com/clipboard-polyfill@2.8.0/build/clipboard-polyfill.promise.js"
|
||||
defer
|
||||
></script>
|
||||
<script src="https://unpkg.com/vue@~2.6.10/dist/vue.min.js" defer></script>
|
||||
<script src="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user