Also generate a non-minified version of the stylesheet.

.gitignore

@@ -1,6 +1,6 @@
 build
 dist/klaro*.js
-dist/klaro.css
+dist/klaro*.css
 .tmp
 node_modules
 yarn.lock

.gitlab-ci.yml

@@ -24,6 +24,7 @@ build:
  script:
  - npm run-script make
  - SEPARATE_CSS=1 npm run-script make
+ - SEPARATE_CSS=1 NO_MINIFY_CSS=1 npm run-script make
  artifacts:
  paths:
  - dist

README.md

@@ -25,14 +25,25 @@ Current languages: Catalan, Croatian, Dutch, English, Finnish, French, German, G
 
 ## Getting started
 
-To use the widget on your website, simply download [klaro.js](https://klaro.kiprotect.com/klaro.js) as well as the example config [config.js](https://klaro.kiprotect.com/config.js) and the stylesheet [klaro.css](https://klaro.kiprotect.com/klaro.css). Follow the instructions below to adapt the config to your needs and then include the two files in your website like this:
+To use the widget on your website, simply download [klaro.js](https://klaro.kiprotect.com/klaro.js) as well as the example config [config.js](https://klaro.kiprotect.com/config.js). Follow the instructions below to adapt the config to your needs and then include the two files in your website like this:
 ```html
 <script defer type="text/javascript" src="config.js"></script>
 <script defer type="text/javascript" src="klaro.js"></script>
-<link rel="stylesheet" href="klaro.css" />
+
 ```
 Do not forget to change your existing apps/trackers as outlined in the next section as well so that Klaro can manage them. Klaro will automatically open on page load.
 
+We also provide a version of Klaro without stylesheets included (which is useful
+in case you want to provide your own stylesheet), [klaro-no-css.js](https://klaro.kiprotect.com/klaro-no-css.js). If you use this, make sure to either include
+your own styles or to include [klaro.min.css](https://klaro.kiprotect.com/klaro.min.css) like this:
+
+```html
+<link rel="stylesheet" href="klaro.min.css" />
+```
+
+We also provide a non-minified version of the stylesheet, which is great if you
+want to make edits: [klaro.css](https://klaro.kiprotect.com/klaro.css).
+
 If you wish to open the consent manager manually on user interaction (for example through a link in the privacy policy), you can use the ```klaro.show()``` global. Example:
 ```html
 <a class="button is-success" onclick="return klaro.show();">Change consent settings</a>

dist/index.html

@@ -374,6 +374,15 @@ <h2 class="subtitle">Load the config and the script (last step, promised)</h2>
  You can have a look at our <a href="examples/simple.html">simple example page</a>
  to get an idea of how to do this.
  </p>
+ <p>
+ We also provide a version of Klaro without styles, which is handy in case
+ you want to bring our own or customize ours. Simply download <a href="klaro-no-css.js" download>klaro-no-css.js</a>
+ and the minified stylesheet <a href="klaro.min.css" download>klaro.min.css</a> and include both
+ of them in your HTML.
+ We also have an unminified <a href="klaro.css" download>klaro.css</a> stylesheet, which is
+ great if you want to make modifications to it. You can also look at
+ the <a href="https://github.com/KIProtect/klaro/blob/master/src/scss/klaro.scss">SCSS file</a>.
+ </p>
  <p>
  <a href="klaro.js" download class="button is-warning">
  Download klaro.js (<b id="klaro-version"></b>)