Another redesign for Lilypad Studio

May 11th 2017 0

Lilypad Studio has had a total rewrite and redesign. I love the previous fairytale theme, but it was looking very dated. You can still access it here. Last year, as part of my revision for my Zend Framework Certified Architect exam, I built my wedding website using ZF2. However, ZF3 had already been released and I wanted to try it. So I have since been rebuilding Lilypad Studio.

Zend Framework is not as in vogue as other newer frameworks, such as Laravel. But I worked hard to master it and I intend to keep my skills up to date with this site. I can always use Laravel for another project.

In addition to ZF3, I have also been concentrating on improving my front end skills. So, having used LESS for some time, the new site has switched to SASS. This aligns with changes in the latest Bootstrap 4 framework, which this site, as well as the latest Moodle theme, is using.  I've also used Javascript AMD modules and requirejs along with Grunt.

I looked at using Fez Vrastra's Material Design for Bootstrap but decided to wait until Bootstrap 4 has matured. However I have incorporated some MDL components such as cards, snackbars, tooltips and floating labels. The resulting design is crisp, modern and very Bootstrap. I have retained my cartoons and updated the logo. 

New blog navigation

I redesigned the blog list using image tiles instead of lists of text . The old style forward and backward pagination has been repaced with a button to load older blogs using ajax. I got rid of all the side blocks and put the archived blogs accordion in a sliding drawer.  

I added next and previous title navigation to individual blogs and tagged blogs. This was a requirement that was highlighted when another cat mum wanted to know about Betty's journey. It was then I realised how awkward it was to navigate between tagged blogs in a sequential manner.

Portfolio admin

I added content management to the front page and portfolio pages, including image upload and manipulation. I wrote custom code to display portfolio images alongside the filepicker controls.

Finally there is a nod to my only subscriber, the lovely Mitch.