🌊 A drop-in collection of CSS styles to make simple websites just a little nicer
[](https://watercss.netlify.com/)
-_A just-add-css collection of styles to make simple websites just a little nicer_
-
-[](https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/)
-[](https://www.producthunt.com/posts/water-css)
-[](https://github.com/kognise/water.css/blob/master/LICENSE.md)
+
## Goals
- Responsive
-- Good code quality
+- Themeable
- Good browser support (works on my old kindle's browser :P)
- Small size (< 2kb)
- Beautiful
@@ -20,14 +26,13 @@ _A just-add-css collection of styles to make simple websites just a little nicer
## Why?
I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles.
-
-Water.css is a css framework that doesn't require any classes. You just include it in your `` and forget about it, while it silently makes everything nicer.
+Water.css is a CSS framework that doesn't require any classes. You just include it in your `` and forget about it, while it silently makes everything nicer.
## Who?
-You might want to use Water.css if you're making a simple static or demo website that you don't want to spend time styling.
+You might want to use Water.css if you're making a simple static page or demo website that you don't want to spend time styling.
-You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.
+You probably don't want to use it for a production app or something that is more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.
## How?
@@ -45,7 +50,7 @@ Just stick this in your ``:
### Other options:
-> âš¡ An interactive version selection will be available soon [here](https://watercss.netlify.com/#select-version)
+> âš¡ An interactive version selection is available [on the **demo page**!](https://watercss.netlify.com/#installation)
#### Enforce a theme and ignore `(prefers-color-scheme)`
@@ -54,16 +59,75 @@ For the main versions, `dark` or `light` is only treated as a _default theme_: i
#### Want to support Internet Explorer?
Sure, just extend the theme prefix with `-legacy`, e.g. `dark-legacy.min.css`.
-Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](#).
+Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](https://watercss.netlify.com/?isLegacy#installation).
#### Unminified builds
All versions are also available as unminified stylesheets, which can be handy during development.
Simply remove the `.min` from the file name.
-**Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://watercss.netlify.com/)
+## Theming
-Don't like how it looks? Feel free to submit an issue or PR with suggestions.
+Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do!
+You can find a full list of the variables used at [**src/variables-\*.css**](https://github.com/kognise/water.css/tree/master/src/variables-dark.css).
+
+### Runtime theming
+
+> âš If you use a version with support for legacy browsers like Internet Explorer, skip to [Compiling your own theme](#compiling-your-own-theme)!
+
+Water.css uses Custom Properties (_"CSS variables"_) to define its base styles such as colors. These can be changed and overwritten right in the browser.
+Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Water.css in the HTML, your values will override the default ones and your theme is applied!
+
+This short example will use Water.css, but color all links red:
+
+```html
+
+
+```
+
+If you want to change a value for dark or light mode only, use a media query like so:
+
+```html
+
+```
+
+### Compiling your own theme
+
+If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following:
+
+- Clone the repository to your machine
+- Run `yarn` to install dependencies
+- Make the theming changes you want in `src/variables-*.css`
+- Run `yarn build` to compile the CSS files
+- Use the compiled files in the `dist/` directory on your site
+
+When making your changes, we recommend you don't change the values set by Water.css directly, instead simply add your own variable declarations:
+
+```css
+:root {
+ /* Water.css variable declarations... */
+}
+
+/* ⬇ Add this block! */
+:root {
+ /* Your variable declarations, overriding previous ones */
+}
+```
+
+You also might want to check out the [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md) as it contains further information about the build setup.
## Contributing
@@ -71,81 +135,17 @@ 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.
+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 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.
-
-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:
-
-- `$background`
-- `$background-alt`
-- `$text-main`
-- `$text-bright`
-- `$links`
-- `$focus`
-- `$border`
-- `$code`
-- `$button-hover`
-- `$animation-duration`
-- `$scrollbar-thumb`
-- `$scrollbar-thumb-hover`
-- `$form-placeholder`
-- `$form-text`
-
-Wanna quickly try out theming without installing anything or just explore our build environment?
-
-[](https://repl.it/github/https://github.com/amasad/water.css?lang=nodejs&ref=button)
-
-### Based on an existing theme
-
-You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you.
-
-Here's some simple Sass that'll just use the dark theme but color all links red. Of course, you can change any variables you want.
-
-```scss
-$links: #ff0000;
-@import 'dark.scss';
-```
-
-### From scratch
-
-You can also make your theme from scratch. This is less recommended, but feel free to! You just have to define all of the variables.
-
-For example, here's an example of a really ugly theme, made from scratch. **Ouch!**
-
-```scss
-$background: #ff48c2 !default;
-$background-alt: #00ff00 !default;
-
-$text-main: #dbdbdb !default;
-$text-bright: #ffffff !default;
-
-$links: #ff0022 !default;
-$focus: #ffc400 !default;
-$border: #00ffff !default;
-$code: #001aff !default;
-
-$button-hover: #324759 !default;
-$animation-duration: 0.1s !default;
-
-$form-placeholder: #a9a9a9 !default;
-$form-text: #ffffff !default;
-
-@import 'parts/core';
-```
-
-You can also only import parts you want, but this is not recommended. See the `src/parts/` folder for a list of parts.
+Before submitting your first pull request, make sure to check out our [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md)!
+Thanks for taking the time to contribute :)
## Todos
- Add screenshots
-- [Jekyll theme](https://github.com/kognise/water.css/issues/18)
-- [NPM package](https://github.com/kognise/water.css/issues/41)
+- Release Jekyll theme ([#18](https://github.com/kognise/water.css/issues/18))
+- Publish to npm ([#41](https://github.com/kognise/water.css/issues/41))
From 4cc0a8ee159e721691b7d52641d8c32f6cf12c1c Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Sat, 1 Jun 2019 02:38:00 +0200
Subject: [PATCH 2/7] fix: use different query param
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index ead8f02..8e2225f 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ For the main versions, `dark` or `light` is only treated as a _default theme_: i
#### Want to support Internet Explorer?
Sure, just extend the theme prefix with `-legacy`, e.g. `dark-legacy.min.css`.
-Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](https://watercss.netlify.com/?isLegacy#installation).
+Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](https://watercss.netlify.com/?legacy#installation).
#### Unminified builds
From 2183c463bb80ec897af229cbbc6fa0f555d22fee Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Sat, 1 Jun 2019 03:39:17 +0200
Subject: [PATCH 3/7] fix: add line break
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 8e2225f..1c41dc1 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ Simply remove the `.min` from the file name.
## Theming
-Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do!
+Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do!
You can find a full list of the variables used at [**src/variables-\*.css**](https://github.com/kognise/water.css/tree/master/src/variables-dark.css).
### Runtime theming
From 1a1f74f0eef90563730ae1b3ff5435e653ad13fb Mon Sep 17 00:00:00 2001
From: Yudhishthir Singh
Date: Thu, 3 Oct 2019 07:16:45 +0530
Subject: [PATCH 4/7] Update README.md
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index f0b6e38..4d2e2d5 100644
--- a/README.md
+++ b/README.md
@@ -33,11 +33,11 @@ You probably don't want to use it for a production app or something that has mor
Just stick this in your ``:
-### 🌙 Dark theme:
+### 🌙 Dark Theme:
``
-### ☀ Light theme:
+### ☀ Light Theme:
``
From b8ae8497b7310d94b775cb6f2fafe2e3d24ee3e7 Mon Sep 17 00:00:00 2001
From: dotcomboom <38927017+dotcomboom@users.noreply.github.com>
Date: Thu, 14 Nov 2019 21:37:50 -0600
Subject: [PATCH 5/7] Break words when word wrapping
Prevents long strings of characters (say, "AAAAAAAAAAAAAAAAAAAAAAAA" for example) from going out of the content area and making you have to scroll.
---
src/parts/_base.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/parts/_base.css b/src/parts/_base.css
index ea40f4f..8dee538 100644
--- a/src/parts/_base.css
+++ b/src/parts/_base.css
@@ -5,6 +5,7 @@ body {
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
+ word-wrap: break-word;
color: var(--text-main);
background: var(--background-body);
From 826327ee49a1bfde3638bef423a15fdf16c6f59d Mon Sep 17 00:00:00 2001
From: Kognise
Date: Wed, 11 Dec 2019 02:09:42 +0000
Subject: [PATCH 6/7] Add run on repl.it badge to README
This pull request configures this repository to be run on Repl.it. It adds a `.replit` configuration file and a Repl.it badge to the `README`.
You can read more about running repos on Repl.it [here](https://docs.repl.it/repls/dot-replit), or view the Repl [here](https://staging.repl.it/@Kognise/watercss-16).
---
.replit | 2 ++
README.md | 6 ++----
2 files changed, 4 insertions(+), 4 deletions(-)
create mode 100644 .replit
diff --git a/.replit b/.replit
new file mode 100644
index 0000000..99448a3
--- /dev/null
+++ b/.replit
@@ -0,0 +1,2 @@
+language = "nodejs"
+run = "yarn dev"
diff --git a/README.md b/README.md
index 0b86993..829fe90 100644
--- a/README.md
+++ b/README.md
@@ -141,13 +141,11 @@ If you decide to contribute, after downloading a copy of the repository make sur
$ yarn dev
```
+**Alternatively, just click this button to develop in Repl.it, a supercool in-browser IDE!** [](https://repl.it/github/kognise/water.css)
+
Before submitting your first pull request, make sure to check out our [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md)!
Thanks for taking the time to contribute :)
-## Contributing
-
-Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
-
## Todos
- Add screenshots
From 49fb3877790879d6d10397e69444b3ab037b75bb Mon Sep 17 00:00:00 2001
From: Paper Mountain Studio
Date: Sat, 4 Jan 2020 13:52:40 +0100
Subject: [PATCH 7/7] fix telephone.html being recognized as tel: etc.
---
src/parts/_typography.css | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/parts/_typography.css b/src/parts/_typography.css
index 407ca7a..74f63d1 100644
--- a/src/parts/_typography.css
+++ b/src/parts/_typography.css
@@ -62,15 +62,15 @@ address {
font-style: normal;
}
-a[href^='mailto']::before {
+a[href^='mailto\:']::before {
content: '📧 ';
}
-a[href^='tel']::before {
+a[href^='tel\:']::before {
content: '📞 ';
}
-a[href^='sms']::before {
+a[href^='sms\:']::before {
content: '💬 ';
}
@@ -79,4 +79,4 @@ mark {
border-radius: 2px;
padding: 0px 2px 0px 2px;
color: #000000;
-}
\ No newline at end of file
+}
+ 
+ 
+