This package implements a visual editor for CSS theme files using templates.
It provides forms to let users edit CSS files using MaterializeCSS.
library.
For instance, the CSS template files have some template marks to set color values.
The editor allows the users to change the template mark values, so users can see a preview of how pages will look using the values entered in the visual editor.
Initially built for Wizards Toolkit and MaterializeCSS, this can easily be modified for any HTML/CSS library.
This simple utility requires PHP for the retrieving and saving of CSS files. Of course, you can easily modify the HTML in cssMaker.php for other HTML/CSS libraries like Bootstrap or whatever you use.
For a demonstration of how it works, see this video at https://youtu.be/t4o8vOx_j80 .
The basic concept is your library will have a core CSS file. For this version, we use materialize.css. Using variables with Cascading Style Sheets is extremely powerful.
We want to override their default colors in a way that affects all the many HTML elements. So we created a wtkGlobal.css file with the global overrides. We wanted both a Light theme and a Dark theme option, so we also created a wtkLight.css and wtkDark.css.
Next, we wanted to overlay different color themes. So we created wtk{SomeColorName}.css files, which are nothing but a set of CSS variables. Listing them in this order in your HTML it properly sets up everything.
* materialize.min.css (or whatever CSS framework you are using)
* wtk{YourColor}.css
* wtkLight.css or wtkDark.css
* wtkGlobal.css
This utility allows you to pick any CSS files in the folder and see how the page will look.
This requires the CSS file to start with 'wtk' and excludes our wtkLight, wtkDark, and wtkGlobal files. You can then modify each of the main color types and see the effect immediately in both Light and Dark mode. Once you have designed a color theme you as you can save it.
A slightly modified version has been uploaded to our website as a demo to see how it works. You can build color themes and have the CSS shown in a browser tab for you to "Save As".
https://wizardstoolkit.com/css-maker/
This simple PHP and JavaScript utility is brought to you by Wizards Toolkit, the PHP, SQL, and JavaScript low-code development library.
Wizards Toolkit: https://wizardstoolkit.com
MaterializeCSS: https://materializecss.com
JScolor: https://jscolor.com |
