Uikit 3 admin theme module
Original module created by @ryancramerdesign
Requires ProcessWire 3.0.79 or newer
Currently in development and testing. Do not attempt to install on ProcessWire versions prior to 3.0.79 or you will get a fatal error.
This admin theme is intended as a starting point and framework for Uikit-based admin themes. For the most part it uses the stock Uikit look-and-feel, which is very minimal. We have not attempted to design an admin theme here and instead have focused on getting the framework in place so that others can come in and lead on the design side.
Uikit CSS development with this admin theme
This module uses a custom Uikit theme developed in the manner outlined here: https://getuikit.com/docs/less.
When we are creating production CSS, change the import setting in the
file. The admin theme uses the resulting CSS file located in
- Image files under
./AdminThemeUikit/uikit/custom/images/folder moved to
- Less files under
./AdminThemeUikit/uikit/custom/folder organised and moved to
line 40- URL changed for
line 865- filename and URL changed for
pw.cssnew filename is
line 867- filename and URL changed for
pw.min.cssnew filename is
line 23- URL changed for
line 26- URL changed for
line 27- URL changed for
line 28- URL changed for
Upgrading the Uikit version
As of the time this is written, Uikit 3 is in beta and seems to have new versions available almost every time I check. As a result, I upgrade it often. If you'd like to do the same, here's one way to go about it:
- Go to
npm installcommand for install dependencies
npm dependencies, available
gulp tasks are :
gulpcommand for run all
copy, compile, compress, scriptscommands automatically with a single command.
gulp watchlive watch file changes. If any file managed by your gulp script has a change, below commands will run automatically.
gulp copycommand for copy scripts, styles and images files from
gulp compilecommand for compile
lessfiles and move
gulp compresscommand for compile and compress
lessfiles and move
./AdminThemeUikit/styles/folder with compressed versions.
gulp scriptscommand for compress
config-field.jsfiles and move compressed files to