https://github.com/dunks1980/cookiemunch
A simple, customizable, minimal setup cookie plugin that allows your users to select which cookies to accept or decline.
https://github.com/dunks1980/cookiemunch
Last synced: 11 months ago
JSON representation
A simple, customizable, minimal setup cookie plugin that allows your users to select which cookies to accept or decline.
- Host: GitHub
- URL: https://github.com/dunks1980/cookiemunch
- Owner: Dunks1980
- License: mit
- Created: 2021-02-06T12:45:51.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-12-02T23:38:26.000Z (over 4 years ago)
- Last Synced: 2024-11-30T09:46:24.935Z (over 1 year ago)
- Language: JavaScript
- Size: 218 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
Cookiemunch
Its a simple, customizable, minimal setup cookie plugin that allows your users to select which cookies to accept or decline. Go to [Cookiemunch](https://cookiemunch.dunks1980.com/) for documentation and demos.
If you wish to support this project please [buy me a coffee.](https://www.buymeacoffee.com/dunks1980) ☕
## Installation:
Download the ZIP or:
```
git clone https://github.com/Dunks1980/Cookiemunch.git
```
Then install dev dependencies:
```
npm install
```
## Usage:
To start a local server with live-reload and make changes to the custom theme:
```
npm run custom
```
Changes to the cookies objects and settings can be made in: serve/src_custom.html
These are the custom theme files located in src_custom/:
```
src_custom/js/cookiemunch_custom.js
src_custom/scss/cookiemunch_custom.scss
src_custom/scss/cookiemunch_common_custom.scss
src_custom/images/cookiemunch_custom.svg
```
From line 15 of src_custom/scss/cookiemunch_custom.scss, these are the main colour controls. Making a change to just $main-body-bg and $main-body-text can drastically change its appearance.
```scss
// override theme:
$main-body-bg: #1b1d35;
$main-body-text: rgb(184, 178, 235);
$main-body-border-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
$btn-border: 0px solid #fff;
$btn-text: #fff;
$btn-bg-decline: rgb(197, 49, 49);
$btn-bg-accept_select: #4b4b4b;
$btn-bg-accept_selected: rgb(49, 91, 197);
$btn-bg-accept_all: rgb(36, 146, 64);
$switch-on-bg: $btn-bg-accept_selected;
$mix-btn-bg-with: $main-body-text;
$mix-btn-bg-with-percent: 65%;
```
All colour variables are in the file src_custom/scss/cookiemunch_custom.scss but if you need further changes, they can be made in src_custom/scss/cookiemunch_common_custom.scss.
For the cookie image 3 options are included, If you choose to use your own design its ideal ratio is square 1:1, any type of image can be used but for best results .svg or .png with transparency are recommended.
For any js customizations the file is src_custom/js/cookiemunch_custom.js, if you add anything cool please send me a pull request and I will consider adding it to the main branch.
To start a local server and view/edit the default themes:
```
npm run default
```
## Building for production:
```
npm run build
```
Then answer 1 for custom (this will compile only the \*_custom\* files), or 2 for default (this will build the bundled default themes and not custom). Once complete the auto pre-fixed and minifed files will be available in ./dist.
Custom:
```
cookiemunch.min.js
cookiemunch_custom.min.css
cookiemunch_custom.svg
```
Default:
```
cookiemunch_flat_dark.min.css
cookiemunch_flat_dark.svg
cookiemunch_flat_light.min.css
cookiemunch_flat_light.svg
cookiemunch.min.css
cookiemunch.min.js
cookiemunch.svg
```
To test the build ./dist:
```
npm run dist
```
More information on configuring Cookiemunch can be found here.