From 2e4933270e0d7388ff6aad0b03b6d5f065d05520 Mon Sep 17 00:00:00 2001 From: Felix Mattick Date: Sat, 22 Jan 2022 11:55:55 -0600 Subject: [PATCH] Add NPM installation instructions and update goals (#221) --- README.md | 32 ++++++++++++++++++++++++++------ docs/index.html | 5 +++++ docs/scripts/themer.js | 12 +++++++++++- 3 files changed, 42 insertions(+), 7 deletions(-) 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. + ` } }