diff --git a/README.md b/README.md
index 75fc299..6cf7581 100644
--- a/README.md
+++ b/README.md
@@ -16,12 +16,13 @@
## Goals
-- Responsive
-- Themeable
-- Good browser support (works on my old kindle's browser :P)
-- Tiny size
-- Beautiful
-- No classes
+- It's responsive
+- It's easy to theme
+- It has great browser support
+- It has a tiny size
+- It doesn't require **any** classes
+- It looks beautiful
+- It encourages semantic code
## Why?
@@ -55,6 +56,25 @@ Just stick this in your ``:
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
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.
diff --git a/docs/index.html b/docs/index.html
index ae696b5..9918d11 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -165,6 +165,11 @@
| Theme |
|
+
+
+ | NPM instructions |
+ |
+
diff --git a/docs/scripts/themer.js b/docs/scripts/themer.js
index b99f690..6250ae4 100644
--- a/docs/scripts/themer.js
+++ b/docs/scripts/themer.js
@@ -17,7 +17,8 @@ const linkSnippets = [...document.querySelectorAll('#link-snippet-container > pr
const table = {
fileName: document.getElementById('table-file-name'),
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)')
@@ -55,6 +56,15 @@ const updateTheme = () => {
updateProductHunt(theme)
table.theme.innerText = `Theme is forced to ${theme}.`
}
+
+ table.npm.innerHTML = `
+ Install with npm i water.css or yarn add water.css.
+
+ In JavaScript, where CSS imports are supported:
+ import 'water.css/out/${fileName}'
+
+ Usage from CSS depends on your bundler and dependency management setup, but in some cases may be as simple as a @import.
+ `
}
}