feat: add new installation guide, move to docs/

2025-08-28 07:19:49 +02:00 · 2019-05-30 22:13:57 +02:00
parent cecf3becfa
commit 234152f181
27 changed files with 537 additions and 350 deletions
--- a/docs/icons/android-chrome-192x192.png
+++ b/docs/icons/android-chrome-192x192.png
--- a/docs/icons/android-chrome-512x512.png
+++ b/docs/icons/android-chrome-512x512.png
--- a/docs/icons/apple-touch-icon.png
+++ b/docs/icons/apple-touch-icon.png
--- a/docs/icons/browserconfig.xml
+++ b/docs/icons/browserconfig.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="./mstile-70x70.png"/>
+            <square150x150logo src="./mstile-150x150.png"/>
+            <square310x310logo src="./mstile-310x310.png"/>
+            <wide310x150logo src="./mstile-310x150.png"/>
+            <TileColor>#00aba9</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/docs/icons/favicon-16x16.png
+++ b/docs/icons/favicon-16x16.png
--- a/docs/icons/favicon-32x32.png
+++ b/docs/icons/favicon-32x32.png
--- a/docs/icons/favicon.ico
+++ b/docs/icons/favicon.ico
--- a/docs/icons/light-favicon-16x16.png
+++ b/docs/icons/light-favicon-16x16.png
--- a/docs/icons/light-favicon-32x32.png
+++ b/docs/icons/light-favicon-32x32.png
--- a/docs/icons/light-favicon.ico
+++ b/docs/icons/light-favicon.ico
--- a/docs/icons/mstile-150x150.png
+++ b/docs/icons/mstile-150x150.png
--- a/docs/icons/mstile-310x150.png
+++ b/docs/icons/mstile-310x150.png
--- a/docs/icons/mstile-310x310.png
+++ b/docs/icons/mstile-310x310.png
--- a/docs/icons/mstile-70x70.png
+++ b/docs/icons/mstile-70x70.png
--- a/docs/icons/safari-pinned-tab.svg
+++ b/docs/icons/safari-pinned-tab.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
+-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
+-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
+-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
+395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
+43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
+511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
+-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
+33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
+</g>
+</svg>
--- a/docs/icons/site.webmanifest
+++ b/docs/icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Water.css",
+  "short_name": "Water.css",
+  "icons": [
+    {
+      "src": "./android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/docs/index.html
+++ b/docs/index.html
@@ -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>&lt;head&gt;</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 (&lt; 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>&ltcite&gt</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>
--- a/docs/logo.png
+++ b/docs/logo.png
--- a/docs/logo.svg
+++ b/docs/logo.svg
--- a/docs/screenshot.jpg
+++ b/docs/screenshot.jpg
--- a/docs/script.js
+++ b/docs/script.js
@@ -0,0 +1,138 @@
+/**
+ * Type definition for the version object used throughout the code
+ * @typedef {Object} VersionOptions
+ * @prop {'dark' | 'light'} theme
+ * @prop {boolean} isLegacy
+ * @prop {boolean} isStandalone
+ */
+
+/** The base URI from where to load the CSS files. */
+const CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'
+
+/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */
+const FILE_SIZES = {
+  'dark.min.css': 1.4,
+  'dark.standalone.min.css': 1.31,
+  'dark-legacy.min.css': 0.177 + 1.16 + 1.15,
+  'dark-legacy.standalone.min.css': 1.16,
+  'light.min.css': 1.4,
+  'light.standalone.min.css': 1.3,
+  'light-legacy.min.css': 0.178 + 1.16 + 1.15,
+  'light-legacy.standalone.min.css': 1.15,
+}
+
+/** @param {VersionOptions} options */
+const getFileName = ({ theme, isLegacy, isStandalone }) => {
+  return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css`
+}
+
+/** @param {VersionOptions} options */
+const getFileSize = options => {
+  return FILE_SIZES[getFileName(options)] || '...'
+}
+
+const getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => {
+  return `
+<!-- Preload the required stylesheets (optional) -->
+<link rel="preload" as="style" href="${CDN_BASE}${mainFileName}">
+<link rel="preload" as="style" href="${CDN_BASE}${altFileName}" media="(prefers-color-scheme: ${altTheme})">`
+}
+
+/** @param {VersionOptions} options */
+const getFileSnippet = ({ theme, isLegacy, isStandalone }) => {
+  const fileName = getFileName({ theme, isLegacy, isStandalone })
+  const stylesheetSnippet = `<link rel="stylesheet" href="${CDN_BASE}${fileName}">`
+
+  if (!isLegacy || isStandalone) return stylesheetSnippet
+
+  const altTheme = theme === 'dark' ? 'dark' : 'light'
+  const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })
+  const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })
+  const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)
+
+  return (preloadSnippet + '\n\n' + stylesheetSnippet).trim()
+}
+
+const externalElements = {
+  _phImage: document.querySelector('#js-producthunt'),
+  _stylesheet: document.querySelector('#js-stylesheet'),
+
+  /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */
+  update(options, preferedColorScheme) {
+    const { theme, isStandalone } = options
+    const href = '../dist/' + getFileName(options)
+    const visibleTheme = isStandalone ? theme : preferedColorScheme || theme
+
+    this._stylesheet.href = href
+    this._phImage.src = this._phImage.src.replace(/dark|light/, visibleTheme)
+  },
+}
+
+const createColorSchemeListener = (theme, queryHandler) => {
+  const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`)
+  mediaQuery.addListener(query => queryHandler(query.matches))
+  queryHandler(mediaQuery.matches)
+}
+
+new Vue({
+  el: '#installation',
+  filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },
+  data: {
+    versionOptions: { theme: 'dark', isStandalone: true, isLegacy: false },
+    preferedColorScheme: null,
+    copyStatus: null,
+  },
+  computed: {
+    selectedVersion() {
+      return {
+        fileName: getFileName(this.versionOptions),
+        fileSize: getFileSize(this.versionOptions),
+        fileSnippet: getFileSnippet(this.versionOptions),
+      }
+    },
+  },
+  created() {
+    externalElements.update(this.versionOptions, this.preferedColorScheme)
+
+    createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
+    createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
+  },
+  methods: {
+    async copyToClipboard() {
+      try {
+        await clipboard.writeText(this.selectedVersion.fileSnippet)
+        this.copyStatus = 'success'
+      } catch (error) {
+        this.copyStatus = 'failed'
+      }
+      setTimeout(() => (this.copyStatus = undefined), 1000)
+    },
+  },
+  watch: {
+    preferedColorScheme(nextScheme) {
+      externalElements.update(this.versionOptions, nextScheme)
+    },
+    versionOptions: {
+      deep: true,
+      handler(nextOptions) {
+        externalElements.update(nextOptions, this.preferedColorScheme)
+      },
+    },
+  },
+})
+
+const iconModeSwitcher = faviconModeSwitcher.default
+iconModeSwitcher([
+  {
+    element: 'link[rel="shortcut icon"]',
+    href: { dark: '/icons/light-favicon.ico' },
+  },
+  {
+    element: 'link[rel="icon"][sizes="16x16"]',
+    href: { dark: '/icons/light-favicon-16x16.png' },
+  },
+  {
+    element: 'link[rel="icon"][sizes="32x32"]',
+    href: { dark: '/icons/light-favicon-32x32.png' },
+  },
+])
--- a/docs/style.css
+++ b/docs/style.css
@@ -0,0 +1,63 @@
+html {
+  scroll-behavior: smooth;
+}
+
+#js-producthunt {
+  margin-top: 1rem;
+}
+
+#installation header > h3 {
+  margin: 1rem 2.5rem 1rem 0;
+}
+/* Make the ✔ / ❌ Emoji appear next to the button */
+#installation header button {
+  position: relative;
+  margin-left: auto;
+  overflow: visible;
+}
+#installation header button span {
+  position: absolute;
+  left: -2rem;
+  display: inline-block;
+  transform: scale(1.3);
+}
+/* Fixed layout so columns don't jump when content changes */
+#installation table {
+  table-layout: fixed;
+}
+#installation table th {
+  border: none;
+  vertical-align: top;
+  width: 35%;
+}
+
+/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Use proper Emoji instead of plain Unicode chars */
+.emoji {
+  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,
+    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
+}
+
+/* For the bounce transitions of code snippet and copy success Emoji */
+.v-enter,
+.v-leave-to {
+  transform: scale(0);
+}
+.v-enter-active,
+.v-leave-active {
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+[v-cloak] > * {
+  display: none;
+}
+[v-cloak]::before {
+  content: 'Version picker is loading...';
+}