Learning CakePHP 3 – Part 4

Part 4: Upgrading the Default UI

Implementing Bootstrap

First step was to implement Bootstrap and Less into the framework. For this, I followed the basic instructions in the Packt book titled Bootstrap Site Blueprints. While this involved a bit of research and tinkering, it all went quite easily and predictably.

Basically, this involved adding a Less folder, and then setting up a working folder arrangement for files that modify Bootstrap.

I also replaced the existing base.css file with another of the same name but with booststrap.min.css as the contents, which includes normalize.css. This replaces the default cake version which included normalize and foundation.

I used WinLess on my desktop to compile the Less files.

Installing beyondAdmin

Next, I implemented the beyondAdmin Bootstrap template that I bought last year.

This also went well, but did involve making some changes to the defaults to accommodate the Cake-centric folder structure already implemented.

Also, I initially installed using the default compiled CSS and JS files that came with the template. Once all was up and running, I implemented the LESS files. Basically, I left all of the files as-is to make updates easy, and then created new files with mods and set these to compile.

The only real gotcha that will show up when upgrading the template is that I hacked the URL address for the FontAwesome font files in font-awesome.css.