PHPackages amteich/kirby-patterns - 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. amteich/kirby-patterns AbandonedArchivedKirby-plugin[Templating & Views](/categories/templating) amteich/kirby-patterns ====================== Kirby 3 Patterns Plugin 1.6.8(4y ago)057MITPHPPHP >=7.1.0 Since Jul 14Pushed 4y agoCompare [ Source](https://github.com/amteich/kirby-patterns)[ Packagist](https://packagist.org/packages/amteich/kirby-patterns)[ RSS](/packages/amteich-kirby-patterns/feed)WikiDiscussions master Synced today READMEChangelogDependencies (3)Versions (21)Used By (0) Patterns Plugin for Kirby 3 with Twig Plugin (> v4.0.0) ========================================================== [](#patterns-plugin-for-kirby-3-with-twig-plugin--v400) This is a forked and updated version of the Kirby 3 Patterns Plugin of Steffen Wargalla. What does it do? ---------------- [](#what-does-it-do) With Kirby Patterns you can build your site with clean reusable modules, while the plugin creates a living styleguide for you automatically. Video Demo ---------- [](#video-demo) Screenshots ----------- [](#screenshots) Installation ------------ [](#installation) 1. Install Kirby. I'd recommend [Kirby's Plainkit](https://github.com/getkirby/plainkit) 2. [Download Kirby Patterns](https://github.com/amteich/patterns-plugin/archive/master.zip) from Github 3. Copy the patterns folder into `/site/plugins` (Create the plugins folder if it does not exist yet) 4. Create a new `/site/patterns` folder and start building your patterns in there. Patterns readme.md ------------------ [](#patterns-readmemd) As on of your first steps after the installation, you should put a `readme.md` in `/site/patterns` This will automatically be used by the Patterns interface to provide a nice little introduction page for your library. Options ------- [](#options) The following options can be set in your `/site/config/config.php` ``` return [ 'amteich.patterns.lock' => true, 'amteich.patterns.title' => 'Kirby Pattern Lab', 'amteich.patterns.path' => 'patterns', 'amteich.patterns.directory' => '/var/www/yoursite.com/site/patterns', 'amteich.patterns.error' => 'error', 'amteich.patterns.preview.mode' => 'preview', 'amteich.patterns.preview.background' => false, 'amteich.patterns.preview.css' => 'assets/css/index.css', 'amteich.patterns.preview.js' => 'assets/js/index.js' ]; ``` ### patterns.lock [](#patternslock) You can lock the Patterns interface, so it will only be accessible by users, who logged into the Kirby Panel first. ### patterns.title [](#patternstitle) Sets the title, which appears in the browser and in the topbar of the Patterns interface. By default this is set to `Patterns` ### patterns.path [](#patternspath) You can use this option to change the location of the Patterns interface. By default it will be located at `http://yourdomain.com/patterns` Only set the path with this option though. The URL must be omitted. ### patterns.directory [](#patternsdirectory) Set the full path to your patterns directory with this option. By default the patterns directory must be located in `site/patterns` ### patterns.preview.mode [](#patternspreviewmode) The default mode to display a pattern is the iframe preview, if a html template file exists. This gives the best impression how the pattern will look on your site. But you can change this to `twig` or `html` instead to switch to the particular tab by default. Valid values: - preview (default) - twig - html ### patterns.preview.background [](#patternspreviewbackground) You can use this option to set the default background color for the pattern preview screen. Any valid CSS value can be used. By default no specific color value is being set. A pattern can overwrite this with the `background` option (see further down) ### patterns.preview.css [](#patternspreviewcss) Use this option to set where the final CSS for your patterns is located. All the specified CSS files will be loaded in the preview screen in order to style your patterns appropriately. By default the Patterns interface is looking for a `/assets/css/index.css` file. You can load multiple CSS files by passing an array of files: ``` 'amteich.patterns.preview.css', ['assets/css/main.css', 'assets/css/theme.css']); ``` ### patterns.preview.js [](#patternspreviewjs) Use this option to set where the final JS for your patterns is located. All the specified JS files will be loaded in the preview screen (in the footer) in order to apply behaviour to your patterns. By default the Patterns interface is looking for a `/assets/js/index.js` file. You can load multiple JS files by passing an array of files: ``` 'amteich.patterns.preview.js', ['assets/js/jquery.js', 'assets/js/patterns.js']); ``` Creating a pattern ------------------ [](#creating-a-pattern) You can add a subfolder to `/site/patterns` for each of your patterns and even nest them however you like. A pattern folder can contain any number of files, which belong to the pattern. You should provide a markdown file in order to add documentation for your pattern. The Pattern interface will automatically parse the markdown and convert it into a nice doc page. You can even use Kirbytext in your markdown files. Pattern template ---------------- [](#pattern-template) Patterns don't necessarily need to have a template file, but if you want to use them in your templates or snippets, you should create a file called `{patternname}.twig` in the pattern folder. In your pattern template you can use all the methods and functions from Kirby's APIs. You have full access to the `$site`, `$pages` and `$page` variable and everything else mentioned in the cheat sheet. Pattern configuration --------------------- [](#pattern-configuration) You can add an optional `config.php` file to your pattern to further set it up. A pattern config file must return an associative PHP array: ```