Buildings and Food logo, made of solid color shapes that look like the letter B and F laid on their side with a rectangle inbetween.

Buildings and Food Website

  • Launched: January 2023

Buildings and Food is a hospitality group in Cleveland with brand design done by Jack Watson (see more about the brand design on Jack’s Behance). They wanted the website to showcase not just the brand, but also the various properties belonging to the group. This was accomplished with a design I developed in Adobe XD based on the clean, playful logo concept that utilizes the central block in the logo as a “portal” to these other properties.

I built a custom block theme (utilizing “full site editing” as it used to be called) for WordPress. The frame around the entire site is a custom block purpose-built for Buildings and Food. This block is added to the main page template in the site editor with the page content as an inner block. The site frame block handles scrolling the contents, setting CSS custom properties (variables) so that the full-screen sections are only as tall & wide as the inside frame, and of course loading the other sites in a slider (using Swiper). Note that the slider functionality is not displayed in the editor.

Screenshot of the site editor with the site frame block selected. Settings in the sidebar show several items in a list with a title, URL, and image icon.

The biggest challenge with this feature was ensuring that the sites in question would allow embedding within another site. If one doesn’t, it can still have a slide with a background image with a prominent link to visit the site. A similar screen is displayed while each embedded site iframe is lazy-loaded to improve performance.

Screenshot of showing a loading screen before an embedded site loads: a large interior photo of the establishment in the background with a floating centered butting prompting you to visit the site

View the site at