lukaskleinschmidt

@use 'sass:map';
@use 'variants' as * with (
  $breakpoints: (
    'small': 640px,
    'medium': 768px,
    'large': 1024px,
    'wide': 1280px,
  )
);

lukaskleinschmidt

You would need to install https://github.com/ramsey/uuid to make it work. Depending on the use case it could also make sense to implement those as traits.

<?php

class ArticlePage extends UuidPage
{
  
}

lukaskleinschmidt

<?php

namespace LukasKleinschmidt\Component;

use HTML;
use STR;
use C;

/**
 * Kirby Script Tag Component

lukaskleinschmidt

import Component from './component';

export default class Breakpoint extends Component {
  init(mediaQueryString) {
    const mql = window.matchMedia(mediaQueryString);
    const listener = () => this.trigger(mql.matches ? 'match' : 'unmatch', [mql]);

    mql.addListener(listener);

    this.set('mql', mql);

lukaskleinschmidt

import set from 'lodash/set';
import get from 'lodash/get';
import has from 'lodash/has';

export default class Component {
  constructor() {
    this._data = {};
    this._observers = {};
    this.init && this.init.apply(this, arguments);
  }

lukaskleinschmidt

@mixin grid-fractions($divisors, $breakpoint: null) {
  @each $divisor in $divisors {
    @for $dividend from 1 through $divisor - 1 {
      @if $breakpoint {
        &--#{$dividend}\/#{$divisor}\@#{$breakpoint} {
          flex-basis: $dividend / $divisor * 100%;
          max-width: $dividend / $divisor * 100%;
        }
      }

lukaskleinschmidt

import History from './history';
import Barba from 'barba.js';

const history = new History();

Barba.Pjax.goTo = function(url) {
  history.goTo(url);
  this.onStateChange();
};