Uikit-based admin theme for ProcessWire, requires PW 3.0.62 or newer
CSS HTML JavaScript PHP
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
images Initial commit Mar 3, 2017
layout Add sidebar support Mar 17, 2017
scripts Recent minor fixes to Inputfield column width code Mar 16, 2018
uikit Resolve various issue reports and update Uikit 3 version to beta 40. Mar 7, 2018
.gitignore Some additional adjustments and bump version to 19 Nov 10, 2017
AdminThemeUikit.module Recent minor fixes to Inputfield column width code Mar 16, 2018
README.md Updates to README and minor code adjustments prior to first GitHub push Mar 3, 2017
_footer.php v20 of AdminThemeUikit fixes various minor things Nov 17, 2017
_head.php v20 of AdminThemeUikit fixes various minor things Nov 17, 2017
_main.php Lots of updates to the Uikit admin theme. Lots of detail work. Made c… Oct 6, 2017
_masthead.php v20 of AdminThemeUikit fixes various minor things Nov 17, 2017
_offcanvas.php v18 of AdminThemeUikit updates to Uikit 3 beta 34 and contains severa… Nov 9, 2017
_search-form.php Initial commit Mar 3, 2017
_sidenav-init.php Updates to the auto show/hide for ProcessPageList(er) Apr 7, 2017
_sidenav-masthead.php Updates to support more admin theme layout options Mar 24, 2017
_sidenav-side.php Major update that has AdminThemeUikit adopt look/colors of the Reno a… Sep 27, 2017
_sidenav-tree.php Lots of updates to the Uikit admin theme. Lots of detail work. Made c… Oct 6, 2017
config-field.js Lots of updates to the Uikit admin theme. Lots of detail work. Made c… Oct 6, 2017
config.php Some minor updates, mostly related to Inputfield column width calcula… Mar 12, 2018
controller.php Initial commit Mar 3, 2017
default.php Some additional adjustments and bump version to 19 Nov 10, 2017
init.php Some minor updates, mostly related to Inputfield column width calcula… Mar 12, 2018
install-foot.inc Some additional adjustments and bump version to 19 Nov 10, 2017
install-head.inc Some additional adjustments and bump version to 19 Nov 10, 2017

README.md

Uikit 3 admin theme module

Requires ProcessWire 3.0.54 or newer

Currently in development and testing. Do not attempt to install on ProcessWire versions prior to 3.0.54 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, we execute npm run compile in the uikit/ directory, as outlined on that page. The admin theme uses the resulting CSS file located in uikit/dist/css/uikit.pw.min.css. It takes a little while to run that full compile, so it's not ideal for development.

During development, we instead use the uikit/custom/pw.css file. In my case, PhpStorm automatically generates this file every time I make a change to any of the .less files. If you also want to use that development file, edit the AdminThemeUikit.module file and update the const dev = false; to const dev = true;. This will put the admin theme into development mode, which makes it use the development CSS file, and also disables navigation caching, so that you see changes instantly. Remember to change it back to false once you are production ready.

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. Rename the current /uikit/ directory to /uikit-old/. Don't delete or overwrite it yet!

  2. Download or clone the latest Uikit from https://github.com/uikit/uikit and place it into /uikit/.

  3. Copy the /uikit-old/custom/ directory to /uikit/custom/. This is the directory that contains the custom ProcessWire Uikit theme.

  4. Re-compile Uikit (or just the CSS). For more info see:

  1. Feel free to delete the /uikit-old/ directory when you have successfully upgraded Uikit.