Cookiemunch

Its a simple, customizable, minimal setup cookie plugin that allows your users to select which cookies to accept or decline. Go to Cookiemunch for documentation and demos.

If you wish to support this project please buy me a coffee. ☕

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.

// 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.