mirror of
https://github.com/kognise/water.css.git
synced 2026-01-21 12:35:44 +01:00
feat: add build files, add docs/ and .github/
This commit is contained in:
Jonas Kuske
parent
21869afbd7
commit
79ad695531
13 changed files with 80 additions and 47 deletions
196
docs/index.html
Normal file
196
docs/index.html
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
|
||||
<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.
|
||||
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
||||
</p>
|
||||
<p>
|
||||
Now you can write your simple static site with nice semantic html, and Water.css will manage
|
||||
the styling for you.
|
||||
</p>
|
||||
<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='ph'
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>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>
|
||||
<button id='switch'>Switch theme</button>
|
||||
|
||||
<h2>Element demos</h2>
|
||||
<p>
|
||||
This is supposed to be a demo page so we need more elements!
|
||||
</p>
|
||||
|
||||
<h3>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>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>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>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>
|
||||
|
||||
<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='script.js'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
docs/logo.png
Normal file
BIN
docs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
1
docs/logo.svg
Normal file
1
docs/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/screenshot.jpg
Normal file
BIN
docs/screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
4
docs/script.js
Normal file
4
docs/script.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
document.getElementById('switch').addEventListener('click', function() {
|
||||
const stylesheet = document.getElementById('stylesheet');
|
||||
stylesheet.href = stylesheet.href.replace(/dark|light/, function(replaced) { return replaced === 'dark' ? 'light' : 'dark' });
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue