English Lakes Ice Cream

Built and designed at Candidsky. Go to English Lakes Ice Cream.

English Lakes Ice Cream is a luxury ice cream retailer based in the Lake District. They have stores across the region and a strong brand identity.

The requirement was to build a website that showcased both the English Lakes brand and the products that they offer with the aim of increasing sales to retailers and increasing awareness of the brand. We wanted to portray the brand as luxurious, traditional and high quality.

The website consisted of a products area, giving each product it’s own page, a stockists page displaying where stockists of the ice cream were, and other templates used for contact information etc.

The English Lakes front end.

My contributions

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.

A sample of SASS taken from the project showing the use of text fill, gradients and animation used for navigation link hover effects.
The banners of the site were determined by viewport units and the CSS calc function with fallbacks for both.

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

An example of the [attribute*=value] selector used to apply a set of style to any element with "--background-secondary" appended to it.

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.

An example of using Advanced Custom Fields flexible fields to output a table.

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).

The first part of the code written to output a split menu.

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.

Code checking for a URL hash, storing the hash value and applying a filter based on that value.

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.

Code checking for a user click on a filter bar, storing a data attribute value based on the clicked option and applying a filter based on that value.
The filter in action.

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.

An example of the admin panel. This example shows a custom panel being built with a call to action and user selected colours.