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,23 +65,9 @@ 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 mean time, check src/variables-\*.css to see your customization options.
+> ⚠ The theming guide is out of date and will be updated shortly! In the meantime, check src/variables-\*.css to see your customization options.
 
 Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
 
@@ -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,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>
@@ -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,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/_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;

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);
 }