wiegertschouten

// These are the mixins

@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
    $row-gap: if($row-gap == null, $column-gap, $row-gap);

    display: grid;
    grid-template-columns: repeat($column-count, 1fr);
    grid-gap: $row-gap $column-gap;
    gap: $row-gap $column-gap;
}

wiegertschouten

// In order for these functions to work, the target element needs a transition CSS property to be set.

function slideUp(element, callback) {
    element.style.overflow = 'hidden';
    element.style.height = element.clientHeight + 'px';

    setTimeout(() => {
        element.style.height = 0;
    }, 0);

wiegertschouten

document.findFirst = HTMLElement.prototype.findFirst = function(selector) {
    return this.querySelector(selector);
}

document.findAll = HTMLElement.prototype.findAll = function(selector) {
    return [...this.querySelectorAll(selector)];
}

window.findFirst = document.findFirst.bind(document);
window.findAll = document.findAll.bind(document);

wiegertschouten

$columns: 12;
$gap: 30px;
$breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 960px,
    lg: 1170px,
    xl: 1280px
);