August 9, 2017
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.
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
The Series So Far
Leave a reply
Part of the Let's Build: A Consultancy Website collection