Let's Build: A Consultancy Website - Part 23

Coding the Footer

In part 23 I round out the home page design and spend time coding the footer.

To make this a global component I needed to make sure it's a snippet of its own inside the snippets directory of our Kirby install. Going one step further I'll utilize the site.yml blueprint file to create new fields for social media links and copyright information.

SVG workflow

In this video, you'll see my work with SVGs as background images and spend some time optimizing them to make the design look consistent for our social media icons. Due to there being a small number of icons in the design, I chose to not create an SVG sprite as I felt it wasn't 100% necessary.

SVGs have a very small file size so I don't think the performance of the site took a bit hit. If your own site's icon archive starts to grow you may consider opting in for sprites. You can read an article I wrote about creating sprites on Web Designer Depot called How to Create and Manage SVG sprites

Obviously, I could have gone about adding these SVGs in different ways; perhaps by embedding the SVG code directly in our theme but since I'm reusing the footer on all pages already I didn't see the need to add more control.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22