diff --git a/README.md b/README.md index f0b6e38..cbbc0b6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Water.css -[![Water.css](logo.svg)](https://watercss.netlify.com/) +[![Water.css](docs/logo.svg)](https://watercss.netlify.com/) _A just-add-css collection of styles to make simple websites just a little nicer_ diff --git a/icons/android-chrome-192x192.png b/docs/icons/android-chrome-192x192.png similarity index 100% rename from icons/android-chrome-192x192.png rename to docs/icons/android-chrome-192x192.png diff --git a/icons/android-chrome-512x512.png b/docs/icons/android-chrome-512x512.png similarity index 100% rename from icons/android-chrome-512x512.png rename to docs/icons/android-chrome-512x512.png diff --git a/icons/apple-touch-icon.png b/docs/icons/apple-touch-icon.png similarity index 100% rename from icons/apple-touch-icon.png rename to docs/icons/apple-touch-icon.png diff --git a/docs/icons/browserconfig.xml b/docs/icons/browserconfig.xml new file mode 100755 index 0000000..d649dd8 --- /dev/null +++ b/docs/icons/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + #00aba9 + + + diff --git a/icons/favicon-16x16.png b/docs/icons/favicon-16x16.png similarity index 100% rename from icons/favicon-16x16.png rename to docs/icons/favicon-16x16.png diff --git a/icons/favicon-32x32.png b/docs/icons/favicon-32x32.png similarity index 100% rename from icons/favicon-32x32.png rename to docs/icons/favicon-32x32.png diff --git a/icons/favicon.ico b/docs/icons/favicon.ico similarity index 100% rename from icons/favicon.ico rename to docs/icons/favicon.ico diff --git a/icons/light-favicon-16x16.png b/docs/icons/light-favicon-16x16.png similarity index 100% rename from icons/light-favicon-16x16.png rename to docs/icons/light-favicon-16x16.png diff --git a/icons/light-favicon-32x32.png b/docs/icons/light-favicon-32x32.png similarity index 100% rename from icons/light-favicon-32x32.png rename to docs/icons/light-favicon-32x32.png diff --git a/icons/light-favicon.ico b/docs/icons/light-favicon.ico similarity index 100% rename from icons/light-favicon.ico rename to docs/icons/light-favicon.ico diff --git a/icons/mstile-150x150.png b/docs/icons/mstile-150x150.png similarity index 100% rename from icons/mstile-150x150.png rename to docs/icons/mstile-150x150.png diff --git a/icons/mstile-310x150.png b/docs/icons/mstile-310x150.png similarity index 100% rename from icons/mstile-310x150.png rename to docs/icons/mstile-310x150.png diff --git a/icons/mstile-310x310.png b/docs/icons/mstile-310x310.png similarity index 100% rename from icons/mstile-310x310.png rename to docs/icons/mstile-310x310.png diff --git a/icons/mstile-70x70.png b/docs/icons/mstile-70x70.png similarity index 100% rename from icons/mstile-70x70.png rename to docs/icons/mstile-70x70.png diff --git a/icons/safari-pinned-tab.svg b/docs/icons/safari-pinned-tab.svg similarity index 100% rename from icons/safari-pinned-tab.svg rename to docs/icons/safari-pinned-tab.svg diff --git a/icons/site.webmanifest b/docs/icons/site.webmanifest similarity index 74% rename from icons/site.webmanifest rename to docs/icons/site.webmanifest index a57bfca..9cad822 100755 --- a/icons/site.webmanifest +++ b/docs/icons/site.webmanifest @@ -3,12 +3,12 @@ "short_name": "Water.css", "icons": [ { - "src": "/icons/android-chrome-192x192.png", + "src": "./android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { - "src": "/icons/android-chrome-512x512.png", + "src": "./android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..3c5d83a --- /dev/null +++ b/docs/index.html @@ -0,0 +1,318 @@ + + + + Water.css + + + + + + + + + + + + + + + + + + + + + + + + + +

Water.css

+ +

+ Water.css is a just-add-css collection of styles to make simple websites like this just a + little bit nicer. +
+ Now you can write your simple static site with nice semantic html, and Water.css will manage + the styling for you. +

+
+
+ Get it already! +
+ GitHub +
+ + Water.css - Make your tiny website just a little nicer | Product Hunt Embed + +
+ +
+

Installation

+ +
+
+

Paste this into the <head> of your HTML:

+ +
+ + + 
{{selectedVersion.fileSnippet}}
+ + +

Version options:

+
+ + +

+ +

+ +
+ +

Version info:

+ + + + + + + + + + + + + + + + + + + +
File{{ selectedVersion.fileName }}
Size (min+gzip){{ selectedVersion.fileSize }}KB
Theme + + + +
Browser support + + +
+
+
+ +

Goals

+ + +

Is it responsive?

+

+ Heck yeah! It doesn't include any fancy styles so it's easily mobile + responsive. Just add the famous + responsive viewport tag and + you'll be good to go! +

+

In fact, try resizing this page. Everything flows super nicely as you'll see.

+ +

Element demos

+

This is supposed to be a demo page so we need more elements!

+ +

Form elements

+
+ + + + + + + + + + + + + +
+ + +
+
+ + +
+
+ + +
+ +
+ + + + + +
+ +

Code

+

+ Below is some code, you can copy it with Ctrl-C. Did you know, + alert(1) can show an alert in JavaScript! +

+ 
// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')
+ +

Other

+

Here's a horizontal rule and image because I don't know where else to put them.

+ Example kitten +
+ +

And here's a nicely marked up table!

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
+ +

Typography

+

+ 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. + This is strong, this is normal, this is just bold, + and this is emphasized! And heck, here's a link. +

+ +
+ "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 + Notes + for how to change it). A URL for the source of the quotation may be given using the + cite attribute, while a text representation of the source can be given using the + <cite> cite element." + + +
+ + +
    +
  1. Ordered list item 1
    2. +
  2. Ordered list item 2
    3. +
  3. Ordered list item 3
    4. +
+ +

Addresses are also styled to be awesome!

+
+ john.doe@example.com
+ 778-330-2389
+ 666-666-6666
+
+ +
+ +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ + + + + + + diff --git a/logo.png b/docs/logo.png similarity index 100% rename from logo.png rename to docs/logo.png diff --git a/logo.svg b/docs/logo.svg similarity index 100% rename from logo.svg rename to docs/logo.svg diff --git a/screenshot.jpg b/docs/screenshot.jpg similarity index 100% rename from screenshot.jpg rename to docs/screenshot.jpg diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..3587697 --- /dev/null +++ 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 ` + + +` +} + +/** @param {VersionOptions} options */ +const getFileSnippet = ({ theme, isLegacy, isStandalone }) => { + const fileName = getFileName({ theme, isLegacy, isStandalone }) + const stylesheetSnippet = `` + + 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' }, + }, +]) diff --git a/docs/style.css b/docs/style.css new file mode 100755 index 0000000..a1b914e --- /dev/null +++ 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...'; +} diff --git a/gulpfile.js b/gulpfile.js index 62fb394..c31e8c4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,7 +19,7 @@ const postcssColorModFunction = require('postcss-color-mod-function').bind(null, const paths = { srcDir: 'src/*', - docsDir: '*', + docsDir: 'docs/*', styles: { src: 'src/builds/*.css', dest: 'dist' }, } @@ -114,10 +114,8 @@ function watch() { style() browserSync.init({ - server: { - baseDir: './', - }, - startPath: 'index.html', + server: { baseDir: './' }, + startPath: 'docs/index.html', }) gulp.watch(paths.srcDir, style) diff --git a/icons/browserconfig.xml b/icons/browserconfig.xml deleted file mode 100755 index 3903cb6..0000000 --- a/icons/browserconfig.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - #00aba9 - - - diff --git a/index.html b/index.html deleted file mode 100644 index 2dbedc4..0000000 --- a/index.html +++ /dev/null @@ -1,216 +0,0 @@ - - - - - Water.css - - - - - - - - - - - - - - - - - - - - -

Water.css

-

- Water.css is a just-add-css collection of styles to make simple websites like this just a - little bit nicer. - Get it already! -

-

- Now you can write your simple static site with nice semantic html, and Water.css will manage - the styling for you. -

- Water.css - Make your tiny website just a little nicer | Product Hunt Embed - -

Goals

- - -

Is it responsive?

-

- Heck yeah! It doesn't include any fancy styles so it's easily mobile - responsive. - Just add the famous responsive - viewport tag and you'll be good to go! -

-

- In fact, try resizing this page. Everything flows super nicely as you'll see. -

- - -

Element demos

-

- This is supposed to be a demo page so we need more elements! -

- -

Form elements

-
- - - - - - - - - - - - - -
- - -
-
- - -
-
- - -
- -
- - - - - -
- -

Code

-

- Below is some code, with a variable, you can copy it with Ctrl-C. - Did you know, alert(1) can show an alert in JavaScript! -

- var myNumber = 0; - 
// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')
- -

Here are some more keyboard buttons

-

Press Ctrl + Shift + Print Screen to take a selected area screenshot on Linux.

-

Other

-

Here's a horizontal rule and image because I don't know where else to put them.

- Example kitten -
- -

And here's a nicely marked up table!

- - - - - - - - - - - - - - - - - - - - - - - - - -
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
- -

Typography

-

- 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. - This is strong, this is normal, this is just bold, and this is - emphasized! And heck, here's a link. -

- -
- "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 - Notes - for how to change it). A URL for the source of the quotation may be given using the - cite attribute, while a text representation of the source - can be given using the <cite> cite element." - - -
- - Quotes (<q>) share the same style as blockquotes. - -

Use <mark> to highlight the important stuff.

- - -
    -
  1. Ordered list item 1
    2. -
  2. Ordered list item 2
    3. -
  3. Ordered list item 3
    4. -
- -

- Addresses are also styled to be awesome! -

-
- john.doe@example.com
- 778-330-2389
- 666-666-6666
-
- -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- - - - - - diff --git a/script.js b/script.js deleted file mode 100644 index 8282fb8..0000000 --- a/script.js +++ /dev/null @@ -1,114 +0,0 @@ -!(function() { - const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default - if (!iconModeSwitcher) return - 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' } - } - ]) -})() -;(function (ThemeSwitcher) { - const themeSwitcher = new ThemeSwitcher('stylesheet'); - const themeSwitchBtn = document.getElementById('switch'); - const themes = { - dark: 'dark', - darkStandalone: 'dark.standalone', - light: 'light', - lightStandalone: 'light.standalone' - }; - const getSwitchThemeName = function () { - // Case: switch to "light.standalone.css" - if ( - (themeSwitcher.current === themes.dark) && themeSwitcher.isDark || - (themeSwitcher.current === themes.light) && themeSwitcher.isDark || - themeSwitcher.current === themes.darkStandalone - ) { - return themes.lightStandalone - - // Case: switch to "dark.standalone.css" - } else if ( - (themeSwitcher.current === themes.dark) && themeSwitcher.isLight || - (themeSwitcher.current === themes.light) && themeSwitcher.isLight || - themeSwitcher.current === themes.lightStandalone - ) { - return themes.darkStandalone; - - // Case: switch to "light.css" - } else if (themeSwitcher.current === themes.dark) { - return themes.light; - - // Case: switch to "dark.css" - } else if (themeSwitcher.current === themes.light) { - return themes.dark; - - // Case: switch destination is unknown - } else { - return themeSwitcher.current; - } - }; - const getGeneralThemeName = function () { - return themeSwitcher.current.replace(/\.standalone/g, ''); - }; - - themeSwitchBtn.addEventListener('click', function() { - themeSwitcher.switch(getSwitchThemeName()); - }); - - themeSwitcher.onChangeDark = function () { - themeSwitcher.switch(getGeneralThemeName()); - }; - - themeSwitcher.onChangeLight = function () { - themeSwitcher.switch(getGeneralThemeName()); - }; -})( - (function () { - const ThemeSwitcher = function(stylesheet) { - const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)'); - const lightSchemeMql = matchMedia('(prefers-color-scheme: light)'); - const that = this; - - this.themeDir = '../dist/'; - this.stylesheet = document.getElementById(stylesheet); - this.current = this.getThemeName(this.stylesheet.href); - this.isDark = darkSchemeMql.matches; - this.isLight = lightSchemeMql.matches; - - darkSchemeMql.addListener(function (mql) { - if (mql.matches && typeof that.onChangeDark === 'function') { - that.onChangeDark() - } - }); - - lightSchemeMql.addListener(function (mql) { - if (mql.matches && typeof that.onChangeLight === 'function') { - that.onChangeLight() - } - }); - }; - - ThemeSwitcher.prototype = { - switch: function (themeName) { - this.stylesheet.href = this.themeDir + themeName + '.css'; - this.current = themeName; - }, - getThemeName: function () { - const reg = new RegExp(this.themeDir + '(|.+?).css'); - return stylesheet.getAttribute('href').replace(reg, '$1'); - }, - onChangeDark: null, - onChangeLight: null - }; - - return ThemeSwitcher; - })() -);