Uikit-based admin theme for ProcessWire, requires PW 3.0.79 or newer
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 26 commits ahead, 38 commits behind ryancramerdesign:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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 theme/less/theme.less file. The admin theme uses the resulting CSS file located in ./AdminThemeUikit/styles/theme.{style}.css, ./AdminThemeUikit/styles/theme.{style}.min.css.

Module Modifications

  • Image files under ./AdminThemeUikit/uikit/custom/images/ folder moved to ./AdminThemeUikit/images folder.
  • Less files under ./AdminThemeUikit/uikit/custom/ folder organised and moved to ./AdminThemeUikit/theme/less/ folder.
  • ./AdminThemeUikit/uikit/ folder removed.
  • AdminThemeUikit.module line 40 - URL changed for pw-mark.png.
  • AdminThemeUikit.module line 865 - filename and URL changed for pw.css new filename is theme.reno.css.
  • AdminThemeUikit.module line 867 - filename and URL changed for pw.min.css new filename is theme.reno.min.css.
  • _offcanvas.php line 23 - URL changed for logo.png.
  • head.php line 26 - URL changed for uikit.min.js.
  • head.php line 27 - URL changed for uikit-icons.min.js.
  • head.php line 28 - URL changed for main.js.

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:

  1. Go to theme folder
  2. run npm install command for install dependencies

After install npm dependencies, available gulp tasks are :

  • run gulp command for run all copy, compile, compress, scripts commands automatically with a single command.
  • run gulp watch live watch file changes. If any file managed by your gulp script has a change, below commands will run automatically.
  • run gulp copy command for copy scripts, styles and images files from ./AdminThemeUikit/theme/node_modules/uikit/ folder to ./AdminThemeUikit/scripts/, ./AdminThemeUikit/styles/, ./AdminThemeUikit/images/.
  • run gulp compile command for compile less files and move css file to ./AdminThemeUikit/styles/ folder.
  • run gulp compress command for compile and compress less files and move css files to ./AdminThemeUikit/styles/ folder with compressed versions.
  • run gulp scripts command for compress main.js and config-field.js files and move compressed files to ./AdminThemeUikit/scripts/ folder.