-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Write development instructions within readme
- Loading branch information
Showing
2 changed files
with
44 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,46 @@ | ||
# Klaro UI | ||
|
||
The Klaro consent manager custom UI for the California Digital Library. | ||
|
||
Developer instructions coming soon. | ||
View sample at https://cdlib.github.io/klaro-ui | ||
|
||
## Requirements | ||
|
||
- Git | ||
- Node version 20 or above | ||
- NPM version 10 or above | ||
- Klaro source and a valid config file | ||
|
||
## Installation | ||
|
||
1. Follow the steps in [Getting Started](https://klaro.org/docs/getting-started) within the Klaro documentation. | ||
|
||
2. Within the `src` URL of the Klaro script (after the config script), replace the URL ending in **klaro.js** with the "no CSS" version: | ||
|
||
``` | ||
https://cdn.kiprotect.com/klaro/v0.7/klaro-no-css.js | ||
``` | ||
|
||
3. From your CLI, install Klaro UI into your application as a dependency: | ||
|
||
``` | ||
npm install https://github.com/cdlib/klaro-ui --save | ||
``` | ||
|
||
The module **klaro-ui** is now installed in your application's **node_modules** folder. | ||
|
||
4. From your bundler/build tool, source the `klaro-ui` stylesheet from the klaro-ui module: | ||
|
||
``` | ||
/node_modules/klaro-ui/dist/klaro-ui.css | ||
``` | ||
|
||
## Appearance | ||
|
||
Klaro UI doesn't include any typefaces. The Klaro text will include the font defined for the document. | ||
|
||
The Klaro UI default stylesheet renders a light colored theme when a user's system appearance is set to light colors and a dark colored theme when set to dark colors. | ||
|
||
For only the light colored theme, use **klaro-ui-light.css** within **klaro-ui/dist**. | ||
|
||
For only the dark colored theme, use **klaro-ui-dark.css** within **klaro-ui/dist**. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters