Modular Letter

Let’s use CSS layout structuring tools for a drawing exercise — creating a grid-based letter.

  • In a 3 by 5 grid in Figma, sketch a modular letter like this
  • Recreate your letter in CSS using CSS Grid
  • Add an animation to your letter
  • Make multiple letters to create a 5-letter word

1. Create and style your grid letter

Use the techniques you learned with CSS Grid to setup your structure.
Provide appropriate class names so that you can style your grid blocks accordingly.
Have fun styling your blocks with other CSS techniques, including CSS transforms, border-radius, and others.

2. Add an animation

Review the techniques for notes for CSS and Motion or the lecture slides.

<div class="lettergrid">
.
.
.
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
.
.
.
</div>
.block{
	animation: changecolor 400ms linear 200ms 3 alternate;
}

@keyframes changecolor {
	0%  {
		background-color: blue;
	}
	50% {
		background-color: yellow;
	}
	100%{
		background-color: green;
	}
}

3. Repeat step one for 4 other letters

Pay close attention to your overall organization of your code, and how the animation is applying — whether at the block level, the letter level, or the word level.

Modular Type Reference

<>