WayForth is the nation’s largest move management provider. Building their website introduced several firsts in my development experience, all positive:
- Using Figma to inspect and download assets.
- Structuring and styling the component library first, then building each page based on a combination of those components.
- CSS masks and blend modes.
Services
- Front End Development
- CMS Implementation
Figma
WayForth was my first exposure to Figma. As with any new software, there was a learning curve, but I quickly got comfortable inspecting and downloading the assets. Being able to select an asset and export it as a JPG, PNG, or SVG and having the ability to output the styles to get the exact color, font weight, font size, etc. streamlined the development process considerably.
After the site launched, I stumbled across this great write-up over at Smashing Magazine.
Component Library
At first, the designer did not deliver page designs. Instead, about a dozen of well thought-out and flexible components were designed. Components were labelled “Title Bar”, “Text With Accompanying Image”, “Icons & Images”, “Pull Quotes”, “Subtle & Solid Backgrounds”, and “Call-Out Text” to name a few examples.
The design team mandated the use of Avada by ThemeFusion, as the client already had familiarity with that page builder. In Avada, each component type was a container with a specific class name. The elements placed in that container inherited the styles. It was an excellent system that encapsulated each component.
Only after the components were built out did the designer provide the arrangements for each page in Figma. Credit to the team at Drio for adhering to this approach because I found it refreshing and fun to build as the developer.
CSS Masks and Blend Modes
The angles of WayForth’s logo are used throughout the site as a way to provide a unique design and brand consistency. One of the components required an image with the following treatment:
Since this was a reusable component, I didn’t want to burden the client with having to use an image editor or relying on the design team to create the angles and apply the bluish tint.
CSS masks to the rescue.
CSS masks are awesome and very well supported if you use the -webkit- vendor prefix.
Specific to Avada, an image element is automatically wrapped in a <span> with a fusion-imageframe class. I applied the mask to that span with the following style declaration:
| .fusion-imageframe{ | |
| -webkit-mask-image: url('assets/images/mask-right.svg'); | |
| -webkit-mask-repeat: no-repeat; | |
| -webkit-mask-position: center right; | |
| -webkit-mask-size: contain; | |
| mask-image: url('assets/images/mask-right.svg'); | |
| mask-repeat: no-repeat; | |
| mask-position: center right; | |
| mask-size: contain; | |
| background-color: rgba(var(--primary-color-rgb), 0.5); | |
| } |
With the background-color set as WayForth’s dark blue primary color, I created the bluish tint with the following style declaration on the image itself:
| .fusion-imageframe > img{ | |
| mix-blend-mode: overlay; | |
| } |
You can increase or decrease the intensity of the blue tint by adjusting the opacity of the background color.
CSS masks and blend modes worked great. The client can now upload a standard image and have it conform to these design specifications with no additional effort.
Bmore Creative, Inc. partnered with Drio for the website.