Update: Unfortunately Harper House was desolved early on this year and their site has been taken down.
For this website we took a different route than we did with previous sites. Rather than using WordPress we gave Statamic a try. Statamic relies on YAML files rather than a database so backing up content was a breeze.
I also used Bootstrap for the CSS framework rather than Foundation which we used to create an incredibly customizable page editor. The latest additions to the site, the packaging page, included an advanced editor allowing the client to create overlapping content blocks with a print design aesthetic.
Applications
Harper House also commissioned several other projects including one page applications, and a massive visualizer for a textile company.
The above is an example of one of the single-page applications. Its function was to display a customizable wallpaper sold by Harper House. The wood textured wall can be scaled and repositioned as well as swapped out with different colors.
This application was quite a bit more complicated. The wallpaper displayed can be scaled and re positioned just like the previous. The difference though is that the color of the wallpaper is completely customizable. Using CSS blending modes the dark gray areas can have their colors changed.
Using CSS masks the lighter gray area (metallic silver) can be recolored separately. The mask scales along with the texture using mask positioning, similar to the way one would reposition a background image.
Both applications utilize Vue.js and PHP Laravel. Vue.js it used to change attributes of the wallpapers according to the user’s input. Laravel is used to allow the client to edit the images used within the apps.