PHPackages femundfilou/kirby-render-layouts - 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. [Templating & Views](/categories/templating) 4. / 5. femundfilou/kirby-render-layouts ActiveKirby-plugin[Templating & Views](/categories/templating) femundfilou/kirby-render-layouts ================================ Snippet to use layouts with simple section + column structure. 1.0.2(3y ago)3944MITPHPPHP >=7.1.0 Since Oct 19Pushed 3y ago1 watchersCompare [ Source](https://github.com/femundfilou/kirby-render-layouts)[ Packagist](https://packagist.org/packages/femundfilou/kirby-render-layouts)[ Docs](https://github.com/femundfilou/kirby-render-layouts)[ RSS](/packages/femundfilou-kirby-render-layouts/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (3)Versions (5)Used By (0) Kirby Render Layouts ==================== [](#kirby-render-layouts) This plugin adds a snippet to render layout fields in structured way. By default, it uses [bulma.io](https://bulma.io) classes to do so. Installation ------------ [](#installation) The best way is to install it via composer. ``` composer require femundfilou/kirby-render-layouts ``` Usage ----- [](#usage) Whenever you are using a `type: layouts` field in your blueprint, you can use the provided snippet to render your field. ``` snippet('render-layouts', ['field' => $page->myLayoutFieldName()]); ``` This will render the following basic markup for each layout you add in the panel. ``` ... ``` Configuration ------------- [](#configuration) You can override the default configuration inside your `config.php` as well as on each snippet itself. ### Override in `config.php` [](#override-in-configphp) ``` return [ 'femundfilou.render-layouts.defaults' => [ 'columns' => 12, // Defines the max columns count, used to calculate each columns fraction. 'sectionClass' => 'section', // Default class used for section 'containerClass' => 'container', // Default class used for container 'columnsClass' => 'columns', // Default class used for columns 'columnClass' => 'column', // Default class used for column 'blockClass' => 'block', // Default class uses for block 'columnWidthClass' => function(int $columnSpan) { // Return a string which is used on each indidual column as a width class return 'is-' . $columnSpan; } ], ]; ``` ### Override in snippet [](#override-in-snippet) ``` snippet('render-layouts', ['field' => $page->myLayoutFieldName(), 'columnsClass' => 'grid']); ``` which will result in the following markup on this page. ``` ... ``` Custom attributes & layout settings --------------------------------------- [](#custom-attributes--layout-settings) To further customize each layout, this plugin provides an easy way to use fields defined as [layout settings](https://getkirby.com/docs/reference/panel/fields/layout#layout-settings). ### Predefined fields [](#predefined-fields) There are three reserved field names you can use to add classes to the different wrappers. Simply use them inside your layout settings fields like this: ``` mylayoutfield: label: Layout type: layout layouts: - "1/1" - "1/2, 1/2" settings: fields: sectionClass: label: Section type: select options: 'my-section-class' : 'Example' ... containerClass: ... columnsClass: ... ``` ### Use your own fields and attributes [](#use-your-own-fields-and-attributes) Beside the predefined fields, you can use any of your own fields to add **attributes** to the `section`. First add the fields to your layout field, e.g. ``` mylayoutfield: label: Layout type: layout layouts: - "1/1" - "1/2, 1/2" settings: fields: spacingclass: label: Spacing type: select options: '' : Default 'is-medium': Medium 'is-large': Large background: label: Background color type: toggles default: '' options: 'transparent' : No background '#000' : Black '#fff' : White ``` Then define the fields you want to use inside your `config.php`. In the `femundfilou.render-layouts.fields` array define the **field name** that should be used as key and the **attribute** or a function returning an associative array as value. ``` return [ 'femundfilou.render-layouts.fields' => [ // Provide an field name and attribute 'spacingclass' => 'class' // Or use a function to go crazy. You event get access to the current layout. 'background' => function($layout) { // Return attribute and value return ['style' => '--background-color: ' . $layout->background(). ';']; }, } ] ``` This will result in the following markup. ``` ... ``` ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community7 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~58 days Total 4 Last Release 1125d ago Major Versions 0.0.1 → 1.0.02022-10-27 ### Community Maintainers ![](https://www.gravatar.com/avatar/d5a2de9532e976c5cc83bbb8d76f8489c66fdb0620d079e09556337103af3160?d=identicon)[femundfilou](/maintainers/femundfilou) --- Top Contributors [![JuKra00](https://avatars.githubusercontent.com/u/2682834?v=4)](https://github.com/JuKra00 "JuKra00 (2 commits)") --- Tags kirby-plugin ### Code Quality Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/femundfilou-kirby-render-layouts/health.svg) ``` [![Health](https://phpackages.com/badges/femundfilou-kirby-render-layouts/health.svg)](https://phpackages.com/packages/femundfilou-kirby-render-layouts) ``` ### Alternatives [leitsch/kirby-blade Enable Laravel Blade Template Engine for Kirby 4 and Kirby 5 219.2k](/packages/leitsch-kirby-blade)[oblik/kirby-link-field Kirby 4 field for all types of links. 7650.6k2](/packages/oblik-kirby-link-field)[getkirby/layouts Kirby Layouts 428.4k](/packages/getkirby-layouts)[belugadigital/kirby-navigation Kirby 5 field for hierarchical menus with drag & drop level indentation. 8713.4k](/packages/belugadigital-kirby-navigation)[fabianmichael/kirby-template-attributes Better HTML attribute handling for your snippets and templates. 236.8k1](/packages/fabianmichael-kirby-template-attributes)[beebmx/kirby-blade Blade template for Kirby 151.8k2](/packages/beebmx-kirby-blade) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)