Stefan Zweifel stefanzweifel

Kirby + Patterns = <3

When I heard about Brad Frost's Patternlab for the first time at beyond tellerrand I was intrigued. The idea of splitting your design work for a website into simple modules or patterns isn't new and starts to become more and more of a standard. But organizing this into a very visual styleguide/patternlab seemed to make so much sense. Brad also introduced a very interesting approach with his separation of modules into categories, such as atoms, molecules and organisms.

I started porting Brad's patternlab app to Kirby, but it never really made it to something polished and it turned out for me after using it for Kirby's panel UI, that it's actually a pain in the ass to maintain such a pattern collection.

The problem of patternlab

The problem with such a styleguide or patternlab is that it exists next to the real thing. When you change something in your code base you also have to update the particular code for the pattern in patternlab. To be honest I went very quickly from being

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Handy helpers for controlling visibility of elements until Vue has compiled.

Use like:

<div v-cloak>
  <h1>
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->

	import {computed, ref} from "vue";
	import {
	addMonths, addYears,
	eachDayOfInterval,
	endOfISOWeek,
	getYear,
	getDate,
	isSameMonth,
	startOfISOWeek,
	startOfMonth,

	{
	"name": "rsms dark v2 mono",
	"author": "rsms",
	"variables": {
	"red": "hsl(5, 0%, 50%)",
	"orange": "hsl(27, 0%, 50%)",
	"yellow": "hsl(60, 0%, 50%)",
	"green": "hsl(150, 0%, 43%)",
	"cyan": "hsl(180, 0%, 50%)",
	"blue": "hsl(210, 0%, 50%)",

	<?php

	namespace Tests;

	use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
	use JMac\Testing\Traits\HttpTestAssertions;
	use Tests\Utils\CreateUploadedFileFromFilePath;
	use Tests\Utils\IsRoutesAware;
	use Tests\Utils\ResourceAsserts;

	<?php

	// Example usage in a model:

	class ExampleModel extends Model
	{
	use HasUuid;

	protected $primaryKey = 'uuid';

	// ...

	let webpack = require("webpack");
	mix.webpackConfig({
	plugins: [
	// Choose the language you want to keep (Ex: "fr")
	new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /fr/)
	]
	});

	<snippet>
	<content><![CDATA[
	public function ${1:relationship}()
	{
	return \$this->belongsToMany(${1/^(.+)$/(?1\u$1:)/g}::class, {$2:table});
	}
	]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>belt</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->

	<?php namespace App\Providers;

	use Illuminate\Support\ServiceProvider;
	use Request;
	use View;
	use App;

	abstract class ApplicationsServiceProvider extends ServiceProvider
	{
	public function register()