What's your templating process?

The CMS Questions
1

Hi there,

I am new to Kirby. I read through the docs etc for the last couple days and played around with Kirby and I think it would suit me well.

But I wonder what could be the best way to start a fresh template with Kirby.

I guess for a lot of projects blocks / layouts would be awesome.
So I imagine having demo content with a combination of demo blocks that can be thrown into a new site.
Maybe also a couple of demo pages.

In a recent project we worked with a pattern library (built on fractal.js) which seemed like a good way.
I found a plugin to connect Kirby with PatternLab - but it seems like that is not maintained any more.
There is a new plugin to connect Kirby with Storybook - but it seems like that did not get much attention so far.

So I wonder if there are some handy tips how to get new kirby templates up and running.

Some additional background:
I have worked with WordPress for far too long. There the process usually is: Having some kind of base theme, cutting as much stuff away as possible. styling be basics (fonts, colors etc), than find some demo content and hope to get everything setup ok. I never made my process really smooth or easy to do it multiple times with less and less effort each time.
I imagine Kirby would make it possible to start without much clutter and built a great starter kit so each project gets a bit smoother than the one before.

Some more info:
I currently prefer stuff like Tailwind, Alphinejs → having everything in plain sight.
This is only a good practice with snippets, components, reusing parts.
I imagine having a collection of unstyled default elements (see blocks) in a pattern library.
Having a design person style these elements or give instructions for a first styling.
Than combining things and see what is left to style.

I would appreciate ideas, tips, links.

2

Welcome to the community!

Personally i have my starterkit wichi is a slightly enhanced version of the plainkit with the bare minimum setup ready to start, along with a build system that compiles sass and Javascript into Kirbys assets folder.

Essentially i have sniippets set up under a global folder for all the stuff that is on every page, like header, footer, htmlhead etc. Then i have folders for snippets that belong to specific page templates. Essentially you end up something like this towards the end of site build:

image
image219×663 18.3 KB

This way your default templates up being as short as something like this

<?= snippet('global/htmlhead')?>
<div class="wrapper">
  <?= snippet('global/header')?>
  <main class="container">
    <h1><?= $page->title() ?></h1>
    <?= $page->pagetext()->kt() ?>
  </main>
  <?= snippet('global/footer')?>
</div>
</body>

Ontop of that i make use of tabs in blue prints to make it all modular and resuable accross the different blueprints. For example i have an SEO tab that i can just plug into any template with one line instead of having to repeat myself. I would suggest looking at the those fetures in the docs as it is reall powerful once you get used to working like that.

I hope that gives you some ideas.

1 Like
3

One thing that is important to know when it comes to templating:

If you define snippets/block snippets/templates etc. in a plugin (for example, your unstyled prototypes), then you can overwrite those (e.g. with your styled versions) in the corresponding folders inside the site folder if needed.

Another option is to let users set style options in the blocks themselves, and apply them in your block snippets accordingly.

1 Like
4

On another note, once you are comfortable with how everything hangs together, i would suggest looking into how Controllers work. These drsatically clean up your templates becuase you can put all the heavy lifting in the controller and then feed the result through to the template. For example things like filtering and sorting content or calculating pagination.

There are a few useful videos you might like to watch on the Kirby youtube channel, including one on controllers.

1 Like
5

Thanks!

And is it common to have some kind of „Lorem ipsum“ starter kit that people use to get projects off the ground faster?
I guess the official starter kits might be useful.

I love that the file-based approach likely makes it easy to copy over states and config.
This is one of the plenty pain points with WordPress - config in the DB so harder to version control and transfer.

Pattern libraries similar to the patterns plugin don’t seem to be mainstream in Kirby, right?

6

You can use snippets for the same purpose, and in combination with slots, they are really powerful for template building.

7

Good point!
Snippets and the patterns of the old pattern plugin likely are very similar.

Thanks. I am thrilled to get my hands dirty with Kirby :slight_smile: