CSS / SASS

My key responsibility for this project was to write the CSS using SASS to style the site in line with designs provided by a designer whom I worked alongside with. I used a style derived from the BEM methodology and as a main aim of this site was to make a high visual impact we decided to use some fun to implement CSS features and techniques that would be more readily avoided on other projects. Some of the techniques used included; viewport units to determine the height of the hero image with the aim of it taking up the full viewport (minus the navigation) on the homepage, text fills, gradients and animation for link hover effects, transforms for hover effects, and CSS columns.

I also focused on class naming in order to make the components of the site reusable aswell as readable for myself and future developers. For example, using the [attribute*=value] selector to apply a set of background colours to any element, a technique I use on most projects

PHP

I was responsible for all of the PHP on the site. The main requirement for PHP on this project was for the templating aspect, that mainly being the usage of Wordpress functionality extended with Advanced Custom Fields, and the occasional custom code.

One of the PHP related challenges I found on this project was the way the navigation menu was split in to two columns, with a logo in the middle. From a styling point of view, this was fairly easy thing to achieve, however as the menu had to be editable via the site admin panel, the menu had to be programatically output in order to create the structure required for the CSS. As a frontend developer by trade, this was a particularly interesting and fun challenge. I solved it in the following steps; getting the navigation items; counting them, dividing the count by 2 for an even split, and using the divided number to slice the array containing all of the navigation items and add them to two separate arrays ready to be output in to the relevant elements (divs in this case).

Javascript

The majority of Javascript required for this project was initiation of plugins and some basic functionality for a responsive menu. However there was some more complex custom functionality. The site used the plugin Isotope to filter products on the product page based on category. These categories were filterable via a filter bar and I wrote some code in order for these filters to work both on click and via the user coming from another page, i.e. linking to a category.

The linking functionality was achieved by appending the URL with a hash and on initiation of the plugin, checking the URL for the presence of a hash and filtering the products based on that value. The products were output in the template with class names containing their filter values, it was these values that were matched in the URL and checked via Javascript to allow filtering.

A similar approach was used to check for a user click on a filter option, identifying the value of the option via data attributes and filtering accordingly.

CMS

The client requested the ability to control both the content and the appearance of the site. To achieve this, the CMS was built with the common ability to edit content but also with options to apply certain styles from a defined set. For example the user could choose whether to show a content panel, upon choosing yes they would then be presented with more options; the ability to add and edit a header and text area, and to choose the background colour of the panel which would determine the foreground colours of the header and text. This gave the client the ability to control not just the content, but where the content appeared and how it appeared.