I recreated Leadership Letters #2. by Jeroen van Eerden using Hugo Giraudel’s items in a circle Sass mixin and generous use of the border property.

Border control

The project has eight block elements, .item, nested in a container. Each .item is supposed to resemble the letter ‘L’. (In my first commit I totally wrote that it was the number ‘7’, re: title.) To get the shape, I assigned the top and right border-color colors, while I gave the bottom and left border-color transparent values.

At first, I didn’t use the bottom or left borders at all. Instead, I used box-shadow to cast a white lip around the broadside of each element providing space between each .item. By doing that I had to increment the z-index to keep each element’s nose underneath the previous. Unfortunately, the first element in the z-index stack was then on top of the last element. I scratched my head for a while, until I removed the box-shadow and clipped each element’s nose with a transparent left border.

Two cheers for simple code.

Circling

Next, I needed to get each .item on a circle and rotated about 45 degrees to achieve the cascading effect. I tweaked the items on a circle mixin until each element fell into place. I’ve used the mixin before, but I must not have examined the code. I didn’t realize that you can assign more than one rotate values in one transform rule. (I learned something new today /air guitar/).

transform: rotate(0deg) translate(0.875em) rotate(45deg);

Using the two rotates, I balanced out the items onto the circle and then locked them into position.

:nth-of-what

I used :nth-of-type to alternate the colors of my Sass list, $colors. I thought I had the :nth selector game figured out, but it took me a few tries to alternate the colors among the items.

:nth-of-type(4n + 2)
:nth-of-type(4n + 3)
:nth-of-type(4n + 4)

The above will then compute as:

• 4 (0) + 2 = 2, 4 (1) + 2 = 6
• 4 (0) + 3 = 3, 4 (1) + 3 = 7
• 4 (0) + 4 = 4, 4 (1) + 4 = 8

(I think that this makes sense to me. Hi, I’m insecure about :nth.)

The first and fifth elements take the initial style from .item.

Border animation

Once I had the project built out, I started playing around with a few of the properties. I found that by increasing the border-bottom-width each element would appear to tuck its tail in, which created a beautiful inner circle. I added an animation to bounce from sharp edges to smooth edges to capture all the shapes.