Creating the JAMstack Logo with CSS: A Step-By-Step Guide
Tags: css, webdev, cssart, jamstack
Published: 2021-04-16 20:48:13

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!


{% codepen https://codepen.io/braydoncoyer/pen/eYgrRQg %}


### 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.

![JAMstackLogoDeconstruction-01.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/A35F0928-2784-4DF1-B4C0-088346A4DE98_2)

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.

```scss
$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.

```html
<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!

```scss
.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?

![Screen Shot 2021-04-15 at 9.09.29 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/2CE5D41C-7A3E-4702-9FF7-D365745DB492_2)

### 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.

```html
<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.

```scss 
.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.

```scss
.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.

![Screen Shot 2021-04-15 at 9.34.05 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/0BBD6C24-87FB-4F86-97B8-C8E900D67C9A_2)

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.

```scss
...
  &-bottom {
	display: flex;
    
   &-left {
	 ...
   }

  }
...
```

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

![Screen Shot 2021-04-15 at 9.37.05 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/FFC13270-5FA2-4EDB-8DBB-99490DA789AE_2)

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.

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

	  &-right {...}
	}
```

![Screen Shot 2021-04-15 at 9.39.34 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/1F4ADB5D-2A81-4F05-A29E-2FD68C12B0E3_2)

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!

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

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

![Screen Shot 2021-04-15 at 9.43.04 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/8CB7FC40-C372-4FD8-8004-27E8D853B8D3_2)

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

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

![Screen Shot 2021-04-15 at 9.44.38 AM.jpeg](https://res.craft.do/user/full/2f1f2003-c717-014a-0ff0-8172b22b7eda/FA700C3B-69F9-45F5-806C-0B2C3F667E44_2)

## 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](https://braydoncoyer.dev/blog/), [subscribe to my newsletter](https://braydoncoyer.dev/newsletter/) and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!