Importing the HTML Template
Remember our design for the blog?
It's time to get visual and incorporate the template into our Kirby installation. You can download a ZIP file with the resources from GitHub.
Simply put the “templates” folder into the “site” directory and add the contents of “assets” into the corresponding project folder (see commit 2d828bf on GitHub).
Since this tutorial is not about HTML / CSS / Sass, we're using a prepared template here. If you also want to develop the template, you can have a look at our (free) tutorial on Getting Started with Bourbon, Neat, and Bitters. There, we'll walk you through the complete process of creating this template with modern web design techniques.
After integrating the CSS & image assets as well as the HTML template, you can refresh your browser (still pointing at localhost:8888). At the moment, of course, this is just static HTML content. Our job for the rest of the tutorial is to fill this with dynamic life from our pages.
Note that we are using Sass to compile our CSS for this website. Therefore, you should make sure to have the "sass --watch" process running if you make changes to the CSS:
$ cd assets/ $ sass --watch scss:css
As said before: if you want to learn more about Sass (or the Bourbon, Neat, and Bitters libraries we used when developing the HTML template), please have a look at our tutorial on "Getting Started with Bourbon, Neat, and Bitters".