iksi

/* 16:9 example */
div {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
}

iksi

protected function filter($response, $arguments)
{
    $data = json_decode($response);

    $dom = new \DOMDocument;
    $dom->loadHTML($data->html);

    $iframe = $dom->getElementsByTagName('iframe')->item(0);

    if ($iframe === null) {

iksi

var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

iksi

<?php

/**
 * See https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#spaceless
 * Removes whitespace between HTML tags. This includes tab characters and newlines.
 * Only space between tags is removed – not space between tags and text.
 * Single spaces between tags are preserved as they are probably intentional.
 */

function spaceless($string) {

iksi

{
  "name": "<project>",
  "private": true,
  "scripts": {
    "css": "postcss --use postcss-import --use postcss-modular-scale-plus --use postcss-custom-properties --use postcss-custom-media --use css-mqpacker --css-mqpacker.sort --use postcss-calc --use autoprefixer --autoprefixer.browsers 'last 2 versions' --use cssnano --cssnano.safe",
    "build:css": "npm run css -- --output assets/css/full.min.css assets/css/src/index.css",
    "watch:css": "npm run css -- --watch --output assets/css/full.min.css assets/css/src/index.css",
    "js": "uglifyjs --no-mangle --quotes=1",
    "build:js": "npm run js -- --compress drop_console=true --output assets/js/full.min.js assets/js/src/lib/*.js assets/js/src/*.js",
    "watch:js": "watch 'npm run js -- --compress --output assets/js/full.min.js assets/js/src/lib/*.js assets/js/src/*.js' assets/js/src",

iksi

/**
 * Fluid typography between a min & max font-size and molten leading
 * calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
 */
:root {
    font-size: 100%;
}

body {
    font-size: 1em;

iksi

<?php

function compareFolderItems($a, $b) {

    if (is_dir($a) && is_dir($b)) {
        return strnatcasecmp($a, $b);
    }

    if (is_file($a) && is_file($b)) {

iksi

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

iksi

/* one item */
li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	width: 50%;
}

iksi

/* Change the values on lines 6, 7 and 8 to adjust the height of your baseline */
.baseline:after {
  background: repeating-linear-gradient( 
    0deg, 
    rgba(255, 255, 255, 0.05), 
    rgba(255, 255, 255, 0.05) 24px, 
    rgba(0, 0, 0, 0.1) 24px, 
    rgba(0, 0, 0, 0.1) 48px
  );
  position: absolute;