Kirby Patterns

For the work on the new Kirby panel, Kirby website and forum, Sascha and I decided to build and document all interface elements — HTML and CSS — in a Kirby-ported version of Brad Frost's Patternlab.

Patternlab is a fantastic tool to help you separate your interface elements into groups of Atoms, Molecules and Organisms and keep them highly maintainable and efficient. It's quite a different way to handle a project when you use it for the first time, but its benefits are massive.

Especially when you work in a team, it's much easier to understand the underlying structure of the HTML and CSS for a site/app and reuse or extend parts of it later.

An additional benifit of moving all our interface elements to Patternlab is that we are more easily able to share them with you. This makes it possible to hunt down browser issues faster and fix them more directly. We also hope that you can benefit from what we've built and maybe even reuse parts of it in your own projects.

We are starting today with all patterns for the new Kirby 2 interface and we are going to add all patterns for the Kirby website and forum soon.

Our partners

CDN by KeyCDN Search by Algolia