Merge branch 'master' into add/style-guidelines

.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

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 mean time, 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 */

index.html

@@ -314,6 +314,10 @@
       <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>
 
+    <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@^1.0.0' defer></script>
     <script src='script.js' defer></script>
   </body>

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

@@ -50,8 +50,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {

src/variables-dark.css

@@ -5,6 +5,7 @@
   --selection: #161f27;
   --text-main: #dbdbdb;
   --text-bright: #fff;
+  --text-muted: #717880;
   --links: #41adff;
   --focus: #0096bfab;
   --border: #dbdbdb;

src/variables-light.css

@@ -5,6 +5,7 @@
   --selection: #9e9e9e;
   --text-main: #363636;
   --text-bright: #000;
+  --text-muted: #999;
   --links: #0076d1;
   --focus: #0096bfab;
   --border: #dbdbdb;

yarn.lock

@@ -3804,9 +3804,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@^4.17.10:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
 lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14:
   version "4.17.15"
@@ -4083,9 +4083,9 @@ mitt@^1.1.3:
   integrity sha512-mUDCnVNsAi+eD6qA0HkRkwYczbLHJ49z17BGe2PYRhZL4wpZUFZGJHU7/5tmvohoma+Hdn0Vh/oJTiPEmgSruA==
 
 mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
-  integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"