April 21, 2025
Why did you build Hugobricks?
I get asked this question a lot. But before I can answer it, I have to paint you a picture.
Most of the web runs on WordPress, and most of those websites use a page builder. There were around 33 page builders for the WordPress platform in 2017. A few years later, Gutenberg launched, and as Todd E. Jones put it: “It changed the landscape of page builders, but not the need to use them. Page builders can (still) help you build custom pages in minutes versus hours.”
Page builders operate in the gray area between layout and design. Which decisions are layout decisions, and which ones are design choices? Some page builders give you full freedom, allowing you to build custom designs, while others restrict you to layout changes only. Layout decisions are things like “a two-column layout vs. a single-column layout,” while design decisions involve things like colors, fonts, spacing, etc.
I think you could argue that layout is a part of the content and that design is a part of the theme. This separation makes sense in professional websites, where the content editor is not the same person as the one responsible for the design. Letting your content editor change your design is similar to letting your plumber decorate your living room.
Letting your content editor change your design is similar to letting your plumber decorate your living room.
Gutenberg, the official page builder from WordPress, respects this separation, while Elementor does not. Unfortunately, most website developers do not understand this, and most clients do not see why this is (or could become) a problem.
I build professional websites for a living, and I use Hugo to do so. I carefully craft websites that are designed by professional designers. Adding a page builder to those websites makes little sense. However, some people kept saying that page builders in Hugo were “impossible” to create. I wanted to prove that Hugo allows you to build an easy-to-use page builder with a perfect separation between layout and design. Hugobricks is the result of my show, don’t tell approach. Like it, hate it… that’s up to you. Personally, I am not a big fan of page builders. I just wanted to prove that it can be done in quite an elegant way.
So… there you have it: the reason I built Hugobricks!
A better solution
So, I don’t think Hugobricks, or a page builder in general, is the ultimate solution for building a website. But what is?
Using two columns or one column can be seen as a content decision, but a lot of layout decisions are still part of the design. Using a card layout for blog posts? Design. Restricting the width of a single-column article? Design and usability. Making sure that long texts are not multi-column? Design and usability. Sometimes only the order of the elements on the page is part of the content, while their individual layouts are part of the design (thus theme).
I studied Industrial Design Engineering at the Technical University in Delft, and we were taught that “form follows function”. The content determines the function, and every content type should have its own form (design) that results from its function (and purpose). In other words: most layout decisions are not really decisions. They are results of their function and thus part of the design.
“But some real-world situations beg for a page builder”, I hear you say. “What if you have a large text with images and you want to create the famous layout with image and text alternating?” The solution would be to let the content determine the layout: form follows function. If you split this page into parts using a horizontal ruler, you can let your theme parse each part and see if you can turn this into an alternating layout. In Markdown, this would look something like this:
---
title: Page title
---
## Page part 1
Lorem ipsum dolor sit amet.
---
## Page part 2
Dolor sit constituer amet sit.
Looks simple enough, right? It would be even better to use the layout options in Hugo that can be configured individually per content type. Each section can have its own list and single layout. No, the ideas behind Hugo are not that weird. And if you really want to determine the order of certain components, and the aforementioned approach does not work, you can always resort to shortcodes. But only as a last resort.
() Joost van der Schee