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

Add NPM installation instructions and update goals (#221)

Browse Source
This commit is contained in:
Felix Mattick
2022-01-22 11:55:55 -06:00
parent 3decb548f4
commit 2e4933270e
3 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -16,12 +16,13 @@
## Goals ## Goals
- Responsive - It's responsive
- Themeable - It's easy to theme
- Good browser support (works on my old kindle's browser :P) - It has great browser support
- Tiny size - It has a tiny size
- Beautiful - It doesn't require **any** classes
- No classes - It looks beautiful
- It encourages semantic code
## Why? ## Why?
@@ -55,6 +56,25 @@ Just stick this in your `<head>`:
A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡ A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡
#### Installing from NPM
Alternatively, to install Water.css through a package manager, you can run:
```sh
# Using NPM
npm install water.css
# Using Yarn
yarn add water.css
```
In JavaScript, where CSS imports are supported:
```js
import 'water.css/out/water.css'
```
Usage from CSS depends on your bundler and dependency management setup, but in some cases may be as simple as a `@import`.
#### How the "Automatic Theme" works #### How the "Automatic Theme" works
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. 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.

5
docs/index.html
View File

@@ -165,6 +165,11 @@
<th scope="row">Theme</th> <th scope="row">Theme</th>
<td id="table-theme"></td> <td id="table-theme"></td>
</tr> </tr>
<tr>
<th scope="row">NPM instructions</th>
<td id="table-npm"></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

12
docs/scripts/themer.js
View File

@@ -17,7 +17,8 @@ const linkSnippets = [...document.querySelectorAll('#link-snippet-container > pr
const table = { const table = {
fileName: document.getElementById('table-file-name'), fileName: document.getElementById('table-file-name'),
fileSize: document.getElementById('table-file-size'), fileSize: document.getElementById('table-file-size'),
theme: document.getElementById('table-theme') theme: document.getElementById('table-theme'),
npm: document.getElementById('table-npm')
} }
const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)') const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
@@ -55,6 +56,15 @@ const updateTheme = () => {
updateProductHunt(theme) updateProductHunt(theme)
table.theme.innerText = `Theme is forced to ${theme}.` table.theme.innerText = `Theme is forced to ${theme}.`
} }
table.npm.innerHTML = `
Install with <code>npm i water.css</code> or <code>yarn add water.css</code>.
<br><br>
In JavaScript, where CSS imports are supported:<br>
<code>import 'water.css/out/${fileName}'</code>
<br><br>
Usage from CSS depends on your bundler and dependency management setup, but in some cases may be as simple as a <code>@import</code>.
`
} }
} }