Site Build 1 - Brutalism

Burtalism is all the rage right now in web dev. Let's make a silly site.

What we'll be making

What we'll be making

Here’s the live demo.

Overview

One of my favorite places of site inspiration is brutalistwebsites.com. The creativity is amazing, the sites, are fun, and they all load fast. Brutalism is all about being minimal with HTML and CSS and throwing back to early web styles. This week, I wanted to try my own hand at making a page.

Goal

The goal of this was to make a brutalist website in about an hour using minimal markup and CSS. Ideally, in a brutalist website, JavaScript is a big no no. But what’s the fun in that? I made a compromise that the side should still work even if JS was disabled for the user.

Inspiration

Like any good website (or art project for that matter), there’s some inspiration behind it. In my case, I stumbled onto Tim Holman’s awesome project, Generative Artistry.

Generative Artistry

Generative Artistry

Tim uses vanilla JavaScript to demo different ways of generating art. I loved his Cubic Disarray example, and wanted to incorporate it into a site.

Let’s get coding

HTML

First, let’s add the HMTL. The goal is to keep it simple! I’m just going to start by adding some boilerplate, a Canvas element for the disarray, and a div to hold the content.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Brutalist Site 1</title>
  </head>
  <body>
    <canvas></canvas>
    <div></div>
  </body>
</html> 

If you’re following along at home, you’ll have a beautiful blank page. True brutalists can stop here.

It's like modern art

It's like modern art

However, let’s get the canvas showing the drawing. That might be cool.

JavaScript

Now we’ll need to add our JS to draw the canvas. The example Tim provides uses a canvas of 300x300px, but I think it would make a cool background. Here’s how I implemented the canvas that takes up the size of the document and fills to the height of the content of the div:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function drawCanvas() {
  var canvas = document.querySelector('canvas');
  var div = document.querySelector('div');
  var context = canvas.getContext('2d');

  // Variables to play with
  context.lineWidth = 8;
  var squareSize = 80;
  var randomDisplacement = 15;
  var rotateMultiplier = 20;

  // Width of the canvas should be the width of the page
  var widthSize = document.body.clientWidth;
  // Height of the canvas should be the height of the div
  // plus some extra room to breathe. 
  var heightSize = div.clientHeight + 200;

  canvas.width = widthSize;
  canvas.height = heightSize;

  // Draw the square
  function draw(width, height) {
    context.beginPath();
    context.rect(-width / 2, -height / 2, width, height);
    context.stroke();
  }

  // Loop and draw the squares!
  for (var i = squareSize; i <= widthSize - squareSize; i += squareSize) {
    for (var j = squareSize; j <= heightSize - squareSize; j += squareSize) {
      var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
      var rotateAmt = j / widthSize * Math.PI / 180 * plusOrMinus * Math.random() * rotateMultiplier;

      plusOrMinus = Math.random() < 0.5 ? -1 : 1;
      var translateAmt = j / heightSize * plusOrMinus * Math.random() * randomDisplacement;

      context.save();
      context.translate(i + translateAmt, j)
      context.rotate(rotateAmt);
      draw(squareSize, squareSize);
      context.restore();
    }
  }
}

Now we’ll need to call our script in the body of the html.

11
12
13
<script>
  drawCanvas();
</script>

Now we should have some cubes rendering!

Cubes!!!

Cubes!!!

The problem now is that we have no content in our div, so we only have one row of cubes. Let’s add some content to fix that.

Use your favorite text generator (like Hipsum) to add some filler content to your div

10
11
12
13
14
15
16
    <div>
      <h1>Hello</h1>
      <p>Lorem ipsum dolar...</p>
      <p>Brunch kitsch art party iceland...</p>
      <p>Try-hard tacos quinoa...</p>
      <p>Shaman iceland gentrify blog...</p>
    </div>

Now that we have some height to our <div>, we’ll have some height to our canvas!

More Cubes!!!

More Cubes!!!

CSS

The last piece to this puzzle is styling. We want the cubes to be the background for the page with our div of text on top.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* Reset body styles. Feel free to use normalize.css instead! */
/* Also use a monospace font to be a really cool kid */
body {
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: "Lucida Console", Monaco, monospace;
}

/* Place div on top by giving an absolute position */
div {
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    padding: 16px;
    max-width: 400px;
    margin: 50px;
}

Once we have that linked to our HTML, we get this beauty:

Wow, what a beaut

Wow, what a beaut

Responsive

The last little tweak we can do to improve the site is to make it responsive. The quick and dirty way is to add an event listener to your body tag to listen for a resize. When the body is resized, we should call drawCanvas() in order to make sure we always have cubes on the page.

8
    <body onresize="drawCanvas()">

^ That’s the quick and dirty way, using addEventListener("resize", myScript); would be more correct :)

Nice boxes

Nice boxes

All together

What to do next

Feel free to change up the colors, styles, shapes, or whatever else you can dream of! This was a very basic example, with a lot that can be improved on. Maybe adding some borders to the div if JS is disabled would be a good place to start.

PS: If you generate a cool canvas, you can save it as an image for use in other projects.