mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-21 20:35:39 +02:00
Code Issues Releases Wiki Activity

Update the readme

Browse Source
This commit is contained in:
Felix
2020-05-28 18:32:45 -05:00
parent afe8880a0f
commit af69444728
1 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@@ -26,18 +26,23 @@
## Why? ## 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. 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 `<head>` 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 `<head>` and forget about it, while it silently makes everything nicer.
## Who? ## Who?
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 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 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. Although it originally wasn't built for more complex websites, many developers have used Water.css as a base stylesheet and creatively applied custom styles to build out an entire app. Nothing is stopping you from doing the same!
## How? ## How?
Just stick this in your `<head>`: Just stick this in your `<head>`:
### 🌙/☀ Automatic Theme:
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/water.min.css">`
### 🌙 Dark Theme: ### 🌙 Dark Theme:
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/dark.min.css">` `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/dist/dark.min.css">`
@@ -54,34 +59,36 @@ Just stick this in your `<head>`:
#### Enforce a theme and ignore `(prefers-color-scheme)` #### Enforce a theme and ignore `(prefers-color-scheme)`
For the main versions, `dark` or `light` is only treated as a _default theme_: if a user has a system-wide preference for either dark or light mode on their device, `water.css` will respect this. If you want to avoid this behavior and enforce dark or light theme, append `.standalone` to the theme prefix, e.g. `dark.standalone.min.css`. For the main `water.css` file, dark is only treated as a _default theme_: if a user has a preference for either dark or light mode on their device, the stylesheet will respect this. This detection is made possible through a recent CSS media query called `prefers-color-scheme`. If you want to avoid this behavior and enforce dark or light theme, use either `dark.css` or `light.css`.
#### Want to support Internet Explorer? #### Want to support Internet Explorer?
Sure, just extend the theme prefix with `-legacy`, e.g. `dark-legacy.min.css`. Both `dark.css` and `light.css` support Internet Explorer 11, but the main `water.css` file **does not** due to lack of `prefers-color-scheme` support.
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).
Be aware that IE also doesn't support [runtime theming](#theming), and fixed fallback values will be used. If you want to override the Water.css theme, we recommend that you [compile your own theme](#compiling-your-own-theme).
#### Unminified builds #### Unminified builds
All versions are also available as unminified stylesheets, which can be handy during development. All versions are also available as unminified stylesheets, which can be handy during development.
Simply remove the `.min` from the file name. Simply remove the `.min` from the file name.
## Theming ## 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). 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 ### 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)! > ⚠ 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. 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! 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: This short example will use Water.css, but color all links red:
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/dist/dark.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/dist/water.min.css" />
<style> <style>
:root { :root {
--links: red; --links: red;
@@ -89,17 +96,17 @@ This short example will use Water.css, but color all links red:
</style> </style>
``` ```
If you want to change a value for dark or light mode only, use a media query like so: If you want to change a value for dark or light mode only, use a media query like this:
```html ```html
<style> <style>
:root { :root {
--links: blue; /* Always applied */ --links: yellow; /* Always applied */
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: light) {
:root { :root {
--links: yellow; /* Only applied in dark mode (overrides previous declarations while applied) */ --links: blue; /* Only applied in light mode (overrides yellow) */
} }
} }
</style> </style>
@@ -115,15 +122,6 @@ If you are targeting browsers without support for CSS Custom Properties such as
- Run `yarn build` to compile the CSS files - Run `yarn build` to compile the CSS files
- Use the compiled files in the `dist/` directory on your site - 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
/* ⬇ 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. 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 ## Contributing