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).

Note

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

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".

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.