Engineering · 2026

Manufacturer CMS Platform

A CMS module system with responsive page previews for a building-materials manufacturer — reusable Razor components on an Umbraco backoffice, from approved Figma designs to working frontend.

Umbraco 17RazorBlockListBuilderSCSS

Context

The client is a building-materials manufacturer. The work, through the agency, was on their CMS: building the modules editors use to compose pages, with responsive previews of how each module renders.

I built the frontend as a frontend developer, on an Umbraco backoffice, working from approved Figma designs.

What I built

A module page-preview system with grid and carousel layouts, a reusable component architecture with content fallbacks — so partially filled modules still render cleanly — and promotional content variants with video embedding.

Built on Razor with BlockListBuilder, so each module composes through the same rendering pipeline rather than as a one-off template.

How it is built

The modules are strongly typed Razor views over Umbraco’s Block List. Each block separates its content model from its settings model, so an editor’s layout choices never leak into the data, and the view binds against typed properties instead of loose dictionary lookups. Fallbacks live at the component level — a missing image, an empty heading, a half-filled grid all degrade to a clean render — so an editor can’t break a layout by leaving a field empty.

Grid and carousel layouts share a common base partial and differ only in their wrapper, which keeps spacing and breakpoints consistent across variants. The page-preview renders each module in isolation at responsive widths, so editors see how a block behaves on desktop, tablet and mobile before publishing; video embeds are deferred so a heavy module doesn’t block the preview.

AI is a working partner for the repetitive parts — scaffolding module variants and checking the fallbacks across states — so I focus on the layout behaviour and the preview fidelity.