Redesigning Twig templates for a modern websites

This request was a multi-part request to update Craft CMS to the latest version, and make significant changes and improvements to the overall design and functionality.

Key Requirements

• Update Craft from 2.x to 3.x
• Implement improvements to overall design and usability
• Simplify and improve code and maintainability

Additional Features and Considerations

• Imrpove web tools for a better development environment
• Custom product filtering with URL query param support
• Updated content modeling for simplified management
• New hosting for better Craft CMS support

Build Process

This build started with finding a new hosting environment with Craft CMS specific tools and functionality. For that we settled on Hyperlane with included development environments and Git support. From there all code updates and deployments could be managed within Hyperlane.

For this build we were also able to work concurrently with the content team during the back-end, theme updating phase. More on this below.

New Build Tools

Since we were upgrading from Craft 2.x to the latest version, we also decided to improve the overall build process. To accomplish this Gulp was added (along with other useful node modules) and a custom gulpfile was created to handle compiling, cooncatenating, and copying files and assets. This allowed us to keep our styles and assets clean and organized, as well as use command-line based cache clearing and hot reloading for development previews and testing.

Content Modeling

Before making changes to the Craft database, we quickly realized it would be more efficient to develop a new content model based on our updated designs and copy. This allowed the development team (me!) and the content team (also sometimes me) to be able to work concurrently on the overall page structure and field layouts. Fields could quickly be generated based on the content model, and content could be added even before development began.

By getting the content team involved early on, content was fully available for use during the template building and updating phase. This allowed for quicker and more accurate styling, along with the ability to QA content blocks earlier in the process. As such, problems could be identified sooner, and changes to content or updates to design could happen at a much faster rate.

Twig Templating

Finally, with all the component pieces in place, the template could be updated to match the new designs. Styles were developed in SASS, scripts were broken out into component source files for clarification and easier management, and assets and fonts could be grouped into folders and sorted logically.

From there production began with Foundation for Sites, and new template component files were created for each of the new and reusable content blocks from design. Along the way, automated deployments were used with Hyperlane to keep the development environment up to date and available for other teams.