Flat icon by _Bosco

I recreated the Dribbble shot Flat icon by Bosco.

See the Pen Flat icon by _Bosco by Katy DeCorah (@katydecorah) on CodePen

Each award is a single element (.award) that uses modifier classes to decide the color (.gold, .silver, or .bronze) and the type (.badge or .ribbon). The classes allow for mix and matching of the colors and award types. The award is scalable based on font-size. Try changing the $fontSize in the Sass to see the scaling powers. Please note that the awards are so adorable when the value is small.

While $fontSize controls the size of the number and ultimately adjusts the size of the element, $size dictates the actual size of the award around the number. Try adjusting $size in the Sass to change the proportion of the award to the number.

The awards are all styled the same, but .ribbon and .badge give different styles for the pseudo elements. I dreamt up the ribbon tails for .ribbon quickly. I manipulated the border by styling a transparent border-bottom-color, which created two triangles for the ribbon tails. I added height to the element to elongate it into a ribbon. I created one tail out of each pseudo element.

I started to sweat a little while creating the badge. I didn’t think I had enough pseudo elements to achieve what looks like a hexagon. In the end, I managed to skimp on a side. I created a rectangle out of the :before and used a horizontal gradient to create the three stripes. Then I created a triangle out of the :after, but kept it solid colored. Luckily the medallion fit nice and snug up where the triangle and rectangle met.

Can you tell that I got an iPad for Christmas?