PHPackages                             microman/kirby-components-example - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. microman/kirby-components-example

AbandonedArchivedProject

microman/kirby-components-example
=================================

Components Example

v1.0.3(2y ago)17PHPPHP >=8.0.0 <8.3.0

Since May 19Pushed 2y ago1 watchersCompare

[ Source](https://github.com/plain-solutions-gmbh/kirby-components-example)[ Packagist](https://packagist.org/packages/microman/kirby-components-example)[ Docs](https://microman.ch)[ RSS](/packages/microman-kirby-components-example/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (3)Versions (5)Used By (0)

Kirby Component Plugin Example
==============================

[](#kirby-component-plugin-example)

Overview
--------

[](#overview)

[![Components Logo](https://raw.githubusercontent.com/youngcut/kirby-components-example/main/.github/components_logo.jpg)](https://raw.githubusercontent.com/youngcut/kirby-components-example/main/.github/components_logo.jpg)

[Kirby Component Plugin](https://github.com/youngcut/kirby-components) for Kirby V3 brings snippets and blueprints together in one place. It includes useful tools, that completely changing the way you work with Kirby: Fast and well organized.

In most of the time. You're working with elements that repeats allover your webpage. Once you create these elements, you probably will use this on other project too.

Kirby CMS gives you the possibility to reuse such elements by extending your blueprints or using snippets. But these are in different folders and by growing your project, you can easaly loose your orientation. And if you like to use this elements for other project, it's hard to tear all the desiered files out of an existing project.

**This repository contains the example that is build in the following tutorial.**

Video Tutorial
--------------

[](#video-tutorial)

Watch the tutorial to see how we made this example project:

- [Video Tutorial (Part1)](https://www.youtube.com/watch?v=1ycWtWRL1hQ)
- [Video Tutorial (Part2)](https://www.youtube.com/watch?v=KNVOLvv7alo)
- [Video Tutorial (Part3)](https://www.youtube.com/watch?v=fx9RObyIf40)

Installation
------------

[](#installation)

The easiest way to install this example project is with composer:

`composer create-project microman/kirby-components-example`

If you download it from [GitHub](https://github.com/youngcut/kirby-components-example), you'il need to install:

- [Kirby Plainkit](https://github.com/getkirby/plainkit)
- [Kirby Components Plugin](https://github.com/youngcut/kirby-components)
- [Kirby Form Block Suite](https://github.com/youngcut/kirby-form-block-suite)

Step-by-step tutorial
=====================

[](#step-by-step-tutorial)

Continue reading, if you like to rebuild the example of this repository from scratch.

Setup Kirby
-----------

[](#setup-kirby)

The first thing is to setup a Kirby instance. You can clone or download the [Kirby plainkit](https://github.com/getkirby/plainkit) it from github.

`git clone https://github.com/getkirby/plainkit.git .`

Start your server, go to the panel and init your Kirby installation.

Let's create an empty components page template and create a page with it.

`site/templates/components.php`

```
>

    Components Exampl

```

The first component
-------------------

[](#the-first-component)

We using [Tailwind](https://tailwindcss.com/) for the styling.

> [Tailwind](https://tailwindcss.com/) is a css framework. Similar to Bootstrap. Just contemporary and much more powerfull. With Tailwind, you can style your entire website *only!* with classes.

> **In the following weeks i will finalize a Tailwind integration plugin for Kirby. Visit my [GitHub profile](https://github.com/youngcut) to check if it's already released**

For testing you can use Tailwind CDN. **Don't use the CDN in production! Tailwind should be always parsed server side.**

Put this snippet in your head section of the website:

`site/templates/components.php`

```
...

...
```

Then we can add the call of our first component. This goes to the body section:

`site/templates/components.php`

```
...
My irst component

    card_field()->toComponent() ?>

...
```

Now the blueprint:

`site/blueprints/pages/components.yml`

```
tabs:
  single_card:
    label: Single Card
    fields:
      card_field:
        type: component
        fieldsets: cards
        pretty: true
```

Set pretty to true. That saves the values in a nice and clearly format into our content file.

Let's create a componets folder and a folder for our cards component.

´site/components/cards´

This folder contains our blueprints and the snippets of our main and sub components. Keep in mind, that the file of the main component must have the same name as the folder.

`site/components/cards/cards.php`

```

    " class="object-cover w-full h-full md:max-w-xs lg:max-w-">

        title() ?>
        lead() ?>