Merge branch 'master' into master

.github/CONTRIBUTING.md

@@ -1 +1,75 @@
-> 💡 TODO: Add contributing guide
+# Contributing to Water.css
+
+Water.css becomes better for everyone when people like you help make it better!
+
+Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
+
+Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). Also you agree that your contributions will be licensed under its [MIT License](./LICENSE.md).
+
+## How to get started
+
+1. Get a copy of repository. It is recommended to fork it first and clone to your machine using `git`.
+
+2. Make sure that you have [yarn](https://yarnpkg.com) and install dependencies listed in `package.json` using it.
+
+```
+yarn
+```
+
+3. Then you can run development server with live reloading out of the box and play around with the framework.
+
+```
+yarn dev
+```
+
+So you can access the `index.html` in browser by visiting http://localhost:3000/index.html
+
+More details will be provided in command line interface.
+
+*Note.* A script that builds distribution ready files is also available but it is not the part of development workflow, it is designed to be triggered automatically while publishing a new version of a package. The script itself could be run manually:
+
+```
+yarn build
+```
+
+## How to find issues to work on
+
+If you are new to contributing open-source software, you can starty by picking any relevant issue that is tagged with `good first issue` [there](
+https://github.com/kognise/water.css/contribute).
+
+Also everyone is welcome to contribute on issues tagged with `help wanted`, you can find it filtered [here](https://github.com/kognise/water.css/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
+
+
+## How to make a pull request
+
+It is a few general rules of thumb about making pull requests:
+
+* Make sure that your pull request covers a small and well defined scope
+
+* Make small commits with clear and explainful messages
+
+* You need to provide a clear description about your contribution on GitHub
+
+## Directory structure
+
+```
+.
+├── dist
+├── icons
+└── src
+    ├── assets
+    ├── builds
+    └── parts
+```
+
+`dist` directory is ignored by git and it contains built assets for distribution
+
+`icons` directory contains water.css favicons used in `index.html` demo/docs file
+
+`src` directory contains all the source stylesheets groupped into folders and variables
+
+`src/assets` directory contains images used for UI elements styling
+
+`src/builds` directory contains base style files prepared for different kind of builds (i.e. light and dark themes, supporting legacy browsers, etc)
+
+`src/parts` directory contains the whole source organized in separate files by its kind like forms, links, typography

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

README.md

@@ -65,20 +65,6 @@ Simply remove the `.min` from the file name.
 
 Don't like how it looks? Feel free to submit an issue or PR with suggestions.
 
-## Contributing
-
-Water.css becomes better for everyone when people like you help make it better!
-
-Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
-
-If you decide to contribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading on change.
-
-```
-$ yarn dev
-```
-
-And make sure to run `yarn build` before pushing any changes! Thanks for taking the time to contribute :)
-
 ## Theming
 
 > ⚠ The theming guide is out of date and will be updated shortly! In the meantime, check src/variables-\*.css to see your customization options.
@@ -144,6 +130,10 @@ $form-text: #ffffff !default;
 
 You can also only import parts you want, but this is not recommended. See the `src/parts/` folder for a list of parts.
 
+## Contributing
+
+Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
+
 ## Todos
 
 - Add screenshots

dist/dark.css

@@ -16,6 +16,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -47,6 +48,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -143,8 +145,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -312,7 +314,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -561,4 +563,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=dark.css.map */

dist/dark.standalone.css

@@ -13,6 +13,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -108,8 +109,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -277,7 +278,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -526,4 +527,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=dark.standalone.css.map */

dist/light-legacy.standalone.css

@@ -119,8 +119,8 @@ q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -616,4 +616,11 @@ summary::-webkit-details-marker {
   color: #363636;
 }
 
+footer {
+  border-top: 1px solid #efefef;
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: #999999;
+}
+
 /*# sourceMappingURL=light-legacy.standalone.css.map */

dist/light.css

@@ -16,6 +16,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -47,6 +48,7 @@
 
   --text-main: #dbdbdb;
   --text-bright: #ffffff;
+  --text-muted: #717880;
 
   --links: #41adff;
   --focus: #0096bfab;
@@ -143,8 +145,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -312,7 +314,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -560,4 +562,11 @@ details > :not(summary) {
 summary::-webkit-details-marker {
   color: var(--text-main);
 }
+
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
 /*# sourceMappingURL=light.css.map */

dist/light.standalone.css

@@ -13,6 +13,7 @@
 
   --text-main: #363636;
   --text-bright: #000000;
+  --text-muted: #999999;
 
   --links: #0076d1;
   --focus: #0096bfab;
@@ -108,8 +109,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -277,7 +278,7 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
-:-ms-input-placeholder {
+::-moz-placeholder {
   color: var(--form-placeholder);
 }
 
@@ -526,4 +527,11 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}
+
 /*# sourceMappingURL=light.standalone.css.map */

gulpfile.js

@@ -15,22 +15,22 @@ const postcssImport = require('postcss-import')
 const postcssInlineSvg = require('postcss-inline-svg')
 const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
   /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
-  stringifier: color => color.toRGBLegacy(),
+  stringifier: color => color.toRGBLegacy()
 })
 
 const paths = {
   srcDir: 'src/*',
   docsDir: '*',
-  styles: { src: 'src/builds/*.css', dest: 'dist' },
+  styles: { src: 'src/builds/*.css', dest: 'dist' }
 }
 
 // https://stackoverflow.com/a/20732091
-function humanFileSize(size) {
+function humanFileSize (size) {
   var i = Math.floor(Math.log(size) / Math.log(1024))
   return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
 }
 
-function formatByteMessage(source, data) {
+function formatByteMessage (source, data) {
   const prettyStartSize = humanFileSize(data.startSize)
   let message = ''
 
@@ -48,7 +48,7 @@ function formatByteMessage(source, data) {
   return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
-function style() {
+function style () {
   const isLegacy = path => /legacy/.test(path)
 
   const excludeModern = filter(file => isLegacy(file.path), { restore: true })
@@ -70,7 +70,7 @@ function style() {
       .pipe(bytediff.start())
       // autoprefix
       .pipe(postcss([autoprefixer({
-        env: "legacy"
+        env: 'legacy'
       })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
@@ -82,7 +82,7 @@ function style() {
       .pipe(bytediff.start())
       // autoprefix modern builds
       .pipe(postcss([autoprefixer({
-        env: "modern"
+        env: 'modern'
       })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
@@ -114,14 +114,14 @@ function style() {
   )
 }
 
-function watch() {
+function watch () {
   style()
 
   browserSync.init({
     server: {
-      baseDir: './',
+      baseDir: './'
     },
-    startPath: 'index.html',
+    startPath: 'index.html'
   })
 
   gulp.watch(paths.srcDir, style)

index.html

@@ -64,9 +64,8 @@
         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'
+        width='250'
+        height='54'
     /></a>
 
     <h2>Goals</h2>
@@ -184,7 +183,7 @@
 
       <div>
         <label for='volume'>Volume</label>
-        <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
+        <input type='range' name='volume' id='volume' min='0' max='11' />
       </div>
     </form>
 
@@ -267,16 +266,16 @@
       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.'
+      be given using the <code>&lt;cite&gt;</code> cite element.'
 
       <footer>
         <cite>MDN, 'The Block Quotation element'</cite>
       </footer>
     </blockquote>
 
-    <q>Quotes (&ltq&gt) share the same style as blockquotes.</q>
+    <q>Quotes (&lt;q&gt;) share the same style as blockquotes.</q>
 
-    <p>Use &ltmark&gt to <mark>highlight the important stuff</mark>.</p>
+    <p>Use &lt;mark&gt; to <mark>highlight the important stuff</mark>.</p>
 
     <ul>
       <li>Unordered list item 1</li>
@@ -314,7 +313,11 @@
       <p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
     </details>
 
-    <script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
+    <footer>
+      Here is an example of a footer! Maybe you want to put some links here. <a href='#'>Privacy Policy</a> | <a href='https://github.com/kognise/water.css'>Contribute</a>
+    </footer>
+
+    <script src='https://unpkg.com/favicon-mode-switcher@%5E1.0.0' defer></script>
     <script src='script.js' defer></script>
   </body>
 </html>

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "gulp style",
     "dev": "gulp watch",
+    "lint": "standard --fix && stylelint \"src/*.css\" --fix",
     "prepublishOnly": "yarn build"
   },
   "repository": {
@@ -40,24 +41,29 @@
     "postcss-color-mod-function": "^3.0.3",
     "postcss-css-variables": "^0.12.0",
     "postcss-import": "^12.0.1",
-    "postcss-inline-svg": "^3.1.1"
+    "postcss-inline-svg": "^3.1.1",
+    "standard": "^14.3.1",
+    "stylelint": "^11.0.0",
+    "stylelint-config-standard": "^19.0.0"
   },
   "browserslist": {
-     "legacy": ["defaults AND not android 4.4.3"],
-     "modern": [
-       "Edge > 16",
-       "Firefox > 31",
-       "Chrome > 49",
-       "Safari > 9.1",
-       "Opera > 36",
-       "ios_saf > 9.3",
-       "Android > 76",
-       "OperaMobile > 46",
-       "ChromeAndroid > 76",
-       "FirefoxAndroid > 68",
-       "UCAndroid > 12.12",
-       "Samsung > 5"
-     ]
+    "legacy": [
+      "defaults AND not android 4.4.3"
+    ],
+    "modern": [
+      "Edge > 16",
+      "Firefox > 31",
+      "Chrome > 49",
+      "Safari > 9.1",
+      "Opera > 36",
+      "ios_saf > 9.3",
+      "Android > 76",
+      "OperaMobile > 46",
+      "ChromeAndroid > 76",
+      "FirefoxAndroid > 68",
+      "UCAndroid > 12.12",
+      "Samsung > 5"
+    ]
   },
   "files": [
     "dist"

script.js

@@ -1,4 +1,6 @@
-!(function() {
+/* global matchMedia, faviconModeSwitcher */
+
+(function () {
   const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
   if (!iconModeSwitcher) return
   iconModeSwitcher([
@@ -16,99 +18,100 @@
     }
   ])
 })()
+
 ;(function (ThemeSwitcher) {
-  const themeSwitcher = new ThemeSwitcher('stylesheet');
-  const themeSwitchBtn = document.getElementById('switch');
+  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.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.dark) && themeSwitcher.isLight) ||
+      ((themeSwitcher.current === themes.light) && themeSwitcher.isLight) ||
       themeSwitcher.current === themes.lightStandalone
     ) {
-      return themes.darkStandalone;
+      return themes.darkStandalone
 
     // Case: switch to "light.css"
     } else if (themeSwitcher.current === themes.dark) {
-      return themes.light;
+      return themes.light
 
     // Case: switch to "dark.css"
     } else if (themeSwitcher.current === themes.light) {
-      return themes.dark;
+      return themes.dark
 
     // Case: switch destination is unknown
     } else {
-      return themeSwitcher.current;
+      return themeSwitcher.current
     }
-  };
+  }
   const getGeneralThemeName = function () {
-    return themeSwitcher.current.replace(/\.standalone/g, '');
-  };
+    return themeSwitcher.current.replace(/\.standalone/g, '')
+  }
 
-  themeSwitchBtn.addEventListener('click', function() {
-    themeSwitcher.switch(getSwitchThemeName());
-  });
+  themeSwitchBtn.addEventListener('click', function () {
+    themeSwitcher.switch(getSwitchThemeName())
+  })
 
   themeSwitcher.onChangeDark = function () {
-    themeSwitcher.switch(getGeneralThemeName());
-  };
+    themeSwitcher.switch(getGeneralThemeName())
+  }
 
   themeSwitcher.onChangeLight = function () {
-    themeSwitcher.switch(getGeneralThemeName());
-  };
+    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;
+    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;
+      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;
+        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');
+        const reg = new RegExp(this.themeDir + '(|.+?).css')
+        return this.stylesheet.getAttribute('href').replace(reg, '$1')
       },
       onChangeDark: null,
       onChangeLight: null
-    };
+    }
 
-    return ThemeSwitcher;
+    return ThemeSwitcher
   })()
-);
+)

src/parts/_misc.css

@@ -92,3 +92,10 @@ details > :not(summary) {
 summary::-webkit-details-marker {
   color: var(--text-main);
 }
+
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}

src/parts/_typography.css

@@ -34,15 +34,15 @@ th {
   font-weight: 600;
 }
 
-q:before {
+q::before {
    content: none;
 }
 
-q:after {
+q::after {
    content: none;
 }
 
-blockquote , q{
+blockquote, q {
   border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
@@ -50,8 +50,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {

src/variables-dark.css

@@ -2,28 +2,21 @@
   --background-body: #202b38;
   --background: #161f27;
   --background-alt: #1a242f;
-
   --selection: #161f27;
-
   --text-main: #dbdbdb;
-  --text-bright: #ffffff;
-
+  --text-bright: #fff;
+  --text-muted: #717880;
   --links: #41adff;
   --focus: #0096bfab;
   --border: #dbdbdb;
   --code: #ffbe85;
-
   --animation-duration: 0.1s;
   --button-hover: #324759;
-
   --scrollbar-thumb: var(--button-hover);
   --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
-
   --form-placeholder: #a9a9a9;
-  --form-text: #ffffff;
-
+  --form-text: #fff;
   --variable: #d941e2;
   --highlight: #efdb43;
-
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
 }

src/variables-light.css

@@ -1,29 +1,22 @@
 :root {
-  --background-body: #ffffff;
+  --background-body: #fff;
   --background: #efefef;
   --background-alt: #f7f7f7;
-
   --selection: #9e9e9e;
-
   --text-main: #363636;
-  --text-bright: #000000;
-
+  --text-bright: #000;
+  --text-muted: #999;
   --links: #0076d1;
   --focus: #0096bfab;
   --border: #dbdbdb;
-  --code: #000000;
-
+  --code: #000;
   --animation-duration: 0.1s;
-  --button-hover: #dddddd;
-
+  --button-hover: #ddd;
   --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
   --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
-
   --form-placeholder: #949494;
-  --form-text: #000000;
-
+  --form-text: #000;
   --variable: #39a33c;
-  --highlight: #ffff00;
-
+  --highlight: #ff0;
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
 }