Brutalist Web Design

A week ago I stumbled upon this tweet on my feed:

Besides the catchy name of this framework, it caught my attention because by that time I was watching a TV documentary about Brutalist architecture, a design style that was pretty used between 1950 to late 1970s.

Among other things, Brutalism was a reaction by a younger generation to the lightness, optimism, and frivolity of some 1930s and 1940s architecture.

Nowadays, the web is full of sites that download lots of stuff into your devices to serve their content.

I (strongly) believe that most of these sites download a lot of stuff just because coders don't understand the tools their use.

Why use a complete Bootstrap distribution when you need just a basic grid system or just a subset of CSS selectors?

Why use a complete Vue or React library when you need just a couple of elements from there?

Basically, all these questions led me to Brutalism web design.

Guidelines for Brutalist Web Design

Let's highlight some concepts about Brutalist web design:

• Content is readable on all reasonable screens and devices.
• Only hyperlinks and buttons respond to clicks.
• Hyperlinks are underlined and buttons look like buttons.
• The back button works as expected.
• View content by scrolling.
• Decoration when needed and no unrelated content.
• Performance is a feature.

I found the above concepts well described here: Brutalist Web Design Guidelines

Building "Brutalist"  web applications

Which tool should I use to build a "Brutalist" web application? well ... the one that delivers the application with the less amount of unnecessary stuff.

I found Template Literals as a good weapon of choice. You can learn about this JavaScript feature here: Template Literals MDN web docs

For simple SPA pages, I believe there's no need to use bloated libraries, you can achieve the same goal easily using simple tools.

Simple Article Lists Application

The following application will perform these steps:

1. Define the "articles lists" element in your target page.
2. Define the article template.
3. Get all the available articles from an "articles database".
4. Render the processed template into the target page.

The element can be defined similarly as you will do using Vue: using a DIV to inject the processed template output later.

<div id="root"></div>

The article template may be something like this:

<article class="bt bb b--black-10">
        <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
            <div class="flex flex-column flex-row-ns">
                <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
                    <img src=${fotoUrl} class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
                </div>
                <div class="w-100 w-60-ns pl3-ns">
                    <h1 class="f3 fw1 baskerville mt0 lh-title">${title}</h1>
                    <p class="f6 f5-l lh-copy">${postContent}
                    </p>
                    <p class="f6 lh-copy mv0">By ${author}</p>
                </div>
            </div>
        </a>
</article>

In this template, the following information will be dynamically substituted:

• The main photo (fotoUrl)
• The title (title)
• The content (postContent)
• The author (author)

This template will be processed using a "tagged" JavaScript function called "App()", which will return the processed HTML required to inject into the element ("root") in the target page.

function App(fotoUrl,title,postContent,author) {
  return `
    <article class="bt bb b--black-10">
        <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
            <div class="flex flex-column flex-row-ns">
                <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
                    <img src=${fotoUrl} class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
                </div>
                <div class="w-100 w-60-ns pl3-ns">
                    <h1 class="f3 fw1 baskerville mt0 lh-title">${title}</h1>
                    <p class="f6 f5-l lh-copy">${postContent}
                    </p>
                    <p class="f6 lh-copy mv0">By ${author}</p>
                </div>
            </div>
        </a>
    </article>
   `;
}

To retrieve the necessary information from the database, a simple and native fetch() function will be used:

function appl() {
        var  articlesDB= [] ;
        const url = '--- the API URL ---' ;
        fetch(url)
        .then((resp) => resp.json())
        .then(function(data) {
                articlesDB = data ;
                render(articlesDB);
        });
}

The "articlesDB" array will be populated using the response parsed as a JSON object.

Once populated, we will process the template and render its result into the target page using a custom "render()" JavaScript function.

To achieve the goal, we will use map() function to process the articles array, and the insertAdjacentHTML() to inject the HTML output into the target page:

function render(articles) {
        var artHTML = [] ;
        for(var i=0 ; i<3  ; i++) {
                var paso = App(articles[i].image,articles[i].title,articles[i].desc,articles[i].author) ;
                artHTML.push(paso);
        }
        artHTML.map((val,i,arr) => {
                document.getElementById('root').insertAdjacentHTML('beforeend',val);
        });
}

And that's it, easy as pie!

You can grab the complete code from here: Brutalist Sample Application

Please share your thoughts, I'm interested in all opinions.