Creating the JAMstack Logo with CSS: A Step-By-Step Guide

Let’s make the JAMstack logo with CSS!

In this brief tutorial, you’ll learn how to create the JAMstack logo from scratch with CSS!

Here’s a pen showing the final result!

Thinking in shapes & setting up our variables

At first glance, this logo may look complex but it can actually be recreated with a few divs (it could probably be done with a single div, but that’s another article for another day). When considering how to tackle a piece like this, it’s best to break it up into shapes. What shapes do you see in this logo? I see a circle and several squares.

Now that the seemingly complex logo has been broken down into shapes, we can start to build each part individually.

NOTE: I’ll be using SCSS for this tutorial, but you can use plain CSS if you’d like. While you won’t get the class name nesting, you can still use CSS Variables.

At the top of our style file, let’s define the following variables. These will be used for colors and sizes throughout this tutorial.

$jam: #f0047f;
$white: white;
$logo-size: 24rem;
$inner-square-size: 9rem;

The logo shell

We can’t style elements that don’t exist. Let’s first work on, arguably, the most complex shape in this tutorial — the pink JAMstack logo.

<div class="jam__circle">

</div>

This shape looks complex. It’s a circle, but has a corner in the top-right portion. I’ll admit — when I was considering how to achieve a shape like this, I was originally going to make this two separate shapes: the circle, and a square that would sit in the top-right corner.

You, too, may think that’s the best way forward, but that’s actually overcomplicating it.

Instead of creating two separate divs, we can recreate this shape with a few lines of CSS. Let’s take a look!

.jam__circle {
  position: relative;
  width: $logo-size;
  height: $logo-size;
  background: $jam;
  border-radius: 100%;
  border-top-right-radius: 0;
}

Do you see the secret? That’s right — the key is in the border-radius.

We achieve the circle by setting the border-radius to 100% (you're no doubt familiar with this), but did you know you can control the border-radius of each corner? Yes!

The last line of CSS sets the top-right border-radius to 0, creating a smooth transition from circle to a pointed corner in that quadrant of the element. Pretty cool, right?

The inner squares

The inner squares require a bit more CSS, but from here on out, things are pretty straightforward!

Open the div we created earlier and add the following markup.

<div class="jam__circle">
    <div class="jam__squares">
      <div class="jam__squares-top">
        <div class="jam__squares-top-right"></div>
      </div>
    <div class="jam__squares-bottom">
      <div class="jam__squares-bottom-left"></div>
     <div class="jam__squares-bottom-right"></div>
    </div>
  </div>
</div>

Let’s first target the .jam__squares element and center it inside our JAMstack logo.

.jam__squares {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Next, let’s give the squares a width and height so we can see them on the screen.

.jam__squares {
    ...
    &-top {

      &-right {
        width: $inner-square-size;
        height: $inner-square-size;
        background: $white;
      }
    }

    &-bottom {

      &-left {
        width: $inner-square-size;
        height: $inner-square-size;
        background: $white;
      }

      &-right {
        width: $inner-square-size;
        height: $inner-square-size;
        background: $white;
      }
    }

}

Because we’re using SCSS, the class name nesting comes in handy and makes it easier to see which styles are associated with which elements.

The squares show up, but they certainly aren’t positioned correctly.

We can take a giant leap towards the desired look if we target the &-bottom nested class and turn it into a flex element.

...
  &-bottom {
    display: flex;

   &-left {
     ...
   }

  }
...

With that single change, our piece is starting to take form.

The top square is sitting on the left instead of the right-side of our logo. Let’s fix that and add a bit of bottom-margin, creating a gap between the top and bottom squares.

...
    &-top {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 0.8rem;

      &-right {...}
    }

You may be wondering how we’ll achieve that rounded look on the bottom squares. If you’re thinking we can use the same border-radius trick we used earlier, you're right!

&-left {
    ...
    border-bottom-left-radius: 10rem;
}

&-right {
    ...
    border-bottom-right-radius: 10rem;
}

We’re almost there! All we need to do is make a bit of a gap between the bottom squares. That’s easy enough.

&-left {
    ...
    margin-right: 0.8rem;
}

Conclusion

And there we go! CSS Art is always so much fun to make and it’s a great way to challenge yourself and learn new things. Don’t forget, break things down into simple shapes and create a game-plan for the project. Once those shapes are defined, the rest will usually fall into place.

If you liked this article and want more content like this, read some of my other articles, subscribe to my newsletter and make sure to follow me on Twitter!

Originally published at braydoncoyer.dev/blog on April 16, 2021.