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

gulpfile.js

@@ -15,13 +15,13 @@ 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
@@ -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)))
@@ -119,9 +119,9 @@ function watch() {
 
   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>
@@ -318,7 +317,7 @@
       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@^1.0.0' defer></script>
+    <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,10 +41,15 @@
     "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"],
+    "legacy": [
+      "defaults AND not android 4.4.3"
+    ],
     "modern": [
       "Edge > 16",
       "Firefox > 31",

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());
-  });
+    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 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/_typography.css

@@ -34,11 +34,11 @@ th {
   font-weight: 600;
 }
 
-q:before {
+q::before {
    content: none;
 }
 
-q:after {
+q::after {
    content: none;
 }
 

src/variables-dark.css

@@ -2,29 +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,30 +1,22 @@
 :root {
-  --background-body: #ffffff;
+  --background-body: #fff;
   --background: #efefef;
   --background-alt: #f7f7f7;
-
   --selection: #9e9e9e;
-
   --text-main: #363636;
-  --text-bright: #000000;
-  --text-muted: #999999;
-
+  --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);
 }