Originally inherited from another agency, we were provided with a set of totally static HTML templates using Bootstrap and jQuery. These needed significant reworking to changing client requirements, as well as development of (and integration with) an Episerver backend to provide content management and e-commerce to the client.
Trying to reuse as much of the existing code as possible, the templates were broken down into components using Handlebars and documented in Storybook. The CSS was refactored into Sass, whilst the jQuery and Bootstrap was – as far as possible – left alone.
The biggest challenge with this project was the fact that one single codebase needed to cater for three disparate websites, covering three of Navico's core brands: Lowrance, Simrad and B&G. Whilst the designs had been carefully constructed to allow cross-over between variants of each page, there was a very fine line to be walked between a copy-paste style approach and a fully-bespoke-for-each-site output.
Whilst CSS variables (inherited off a high-level classname) would have likely been an ideal solution, this would have neglected a significant portion of the client's customers, whose browsers simply were not up-to-date enough to support it. We settled on a solution using variables within Sass, which allowed us to spread artefacts such as colours, spacing and typography across all three sites. After that, inheritance-based overrides and some brand-specific components got us the rest of the way.
For integration into the Episerver backend (being developed in parallel), we put together a small standalone NodeJS application which allowed us to develop the front end separately, outputting preview screens for the client. This also allowed us to output Razor templates for each page and brand, which could then be imported straight into Episerver.
This formed a key part of the CI pipeline powering the final product: UI changes could be made directly into the project and would then be transformed automatically, moving across to the client's CMS without any further developer involvement at all.
