Summary

In this chapter we focused on layout. In essence, layout is the positioning, size, and spacing of our elements on the page. By focusing on these topics without getting distracted by color, or look and feel we can better structure our codebase. It also means from here we have full freedom over styling our page. We could apply numerous different themes (or skins) to what we have now.

We used Susy grids as well as our breakpoint mixin (bp) to create a solid, flexible grid system. With just 27 lines of Sass we generated our grid system which consists of almost 600 lines of CSS. We then used our media mixins and Susy to create a semantic layout, with the minimal amount of code.

In the next chapter, we'll focus on the colors, fonts, icons, and adding the finishing touches to our site.