diff options
| author | kj_sh604 | 2026-02-14 13:34:36 -0500 |
|---|---|---|
| committer | kj_sh604 | 2026-02-14 13:34:36 -0500 |
| commit | fd8a1d655063f524a7ef361c28d635cfd71c56cf (patch) | |
| tree | 4e033faf2217b197ceafe2ded8676dcfa69215b2 | |
| parent | 37aea7dbac3c5927bdd8751a4283f50c34637ae6 (diff) | |
refactor: README.md
| -rw-r--r-- | README.md | 141 |
1 files changed, 43 insertions, 98 deletions
@@ -1,80 +1,49 @@ -<p align="center"> - <a href="https://www.npmjs.com/package/water.css"><img align="center" src="https://img.shields.io/npm/v/water.css.svg" alt="NPM page"></a> - <a href="https://www.producthunt.com/posts/water-css"><img align="center" src="https://img.shields.io/badge/on-product%20hunt-blue.svg" alt="On Product Hunt"></a> - <a href="https://github.com/kognise/water.css/pulls"><img align="center" src="https://img.shields.io/github/contributors-anon/kognise/water.css" alt="Contributors"></a> - <a href="https://github.com/kognise/water.css/blob/master/LICENSE.md"><img align="center" src="https://img.shields.io/github/license/kognise/water.css.svg" alt="MIT license"></a> -</p> +# noir.css -<br> +A drop-in collection of monochrome CSS styles to make simple websites look clean and elegant. -<h1 align="center">Water.css</h1> -<p align="center">🌊 A drop-in collection of CSS styles to make simple websites just a little nicer</p> +Forked from [water.css](https://github.com/kognise/water.css) — redesigned with a refined black, grey, and white palette. No classes needed. Just include it and go. -[](https://watercss.kognise.dev/) +## goals -<br> +- responsive +- monochrome — blacks, greys, whites with subtle accent tones +- accessible (as wcag-friendly as possible) +- tiny size +- beautiful +- no classes -## Goals +## usage -- Responsive -- Themeable -- Good browser support (works on my old kindle's browser :P) -- Tiny size -- Beautiful -- No classes +Stick this in your `<head>`: -## Why? +### automatic theme (respects system preference): -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. - -## 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. - -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? - -Just stick this in your `<head>`: - -### 🌙/☀ Automatic Theme: - -`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">` - -### 🌙 Dark Theme: - -`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">` - -### ☀ Light Theme: - -`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">` - -<br> - -A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡ - -#### How the "Automatic Theme" works +```html +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noir.css@1/out/noir.min.css"> +``` -The main `water.css` file automatically switches between light and dark mode depending on the system preferences of a user's device. This detection is made possible through a CSS media query called [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). In browsers where the preference can't be detected, `water.css` will stick to the light theme. +### dark theme: -If you want to avoid this behavior, use either `dark.css` or `light.css`. +```html +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noir.css@1/out/dark.min.css"> +``` -#### Supporting Internet Explorer +### light theme: -All three distributions of Water.css support Internet Explorer 11, but the main `water.css` file **doesn't respect the user's color scheme** and will be locked to light mode due to lack of `prefers-color-scheme` support. +```html +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noir.css@1/out/light.min.css"> +``` -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 in a way that's compatible with IE, we recommend that you [compile your own theme](#compiling-your-own-theme). +Unminified versions are also available — just remove `.min` from the filename. -#### Unminified builds +### how the automatic theme works -All versions are also available as unminified stylesheets, which can be handy during development. -Simply remove the `.min` from the file name. +The main `noir.css` file switches between light and dark mode based on the user's system preferences via the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query. In browsers where this can't be detected, it defaults to the light theme. -## 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! Here's a list list of all the variables you can change to your liking: +noir.css is built with CSS custom properties, so overriding the palette is trivial. Available variables: - `--background-body` - `--background` @@ -97,56 +66,32 @@ Do you want to make some adjustments or build your own theme completely differen - `--highlight` - `--select-arrow` -### 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: +Example — override link color: ```html -<link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/out/water.min.css" /> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noir.css@1/out/noir.min.css"> <style> :root { - --links: red; + --links: #a0a6b2; } </style> ``` -If you want to change a value for dark or light mode only, use a media query like this: +## building from source -```html -<style> - :root { - --links: blue; /* Always applied */ - } - - @media (prefers-color-scheme: dark) { - :root { - --links: yellow; /* Only applied in dark mode (overrides blue) */ - } - } -</style> +```sh +git clone https://github.com/kj-sh604/noir.css.git +cd noir.css +yarn install +yarn build ``` -### 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 `out/` directory on your site +Compiled files end up in `out/`. -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. +## license -## Contributing +[MIT](LICENSE.md) -Water.css becomes better for everyone when people like you help make it better! +## credits -Check out our [Contributing Guide](.github/CONTRIBUTING.md) to learn how to get started. -And thanks for taking the time to contribute! :) +Based on [water.css](https://github.com/kognise/water.css) by Kognise.
\ No newline at end of file |