jensgro

/**
 * Converts a SASS map of css property names and values into CSS output.
 * Properties named `description` will have their value inserted as comments.
 * 
 * Nested maps will be processed recursively.
 * 
 * @param  {map} $map the map of properties to output
 */
@mixin map-to-props($map){
	@if type-of($map) == map {

jensgro

$fonts: (
    Thin: 100,
    ThinItalic: 100,
    ExtraLight: 200,
    ExtraLightItalic: 200,
    Light: 300,
    LightItalic: 300,
    Regular: 400,
    Italic: 400,
    Medium: 500,

jensgro

$fonts: (
    Thin: 100,
    ThinItalic: 100,
    ExtraLight: 200,
    ExtraLightItalic: 200,
    Light: 300,
    LightItalic: 300,
    Regular: 400,
    Italic: 400,
    Medium: 500,

jensgro

@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) {
	//$src: null;
    $src: local(""+$name+"");
	@each $ext in $exts {
		$src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma);
	}

	@font-face {
		font-family: quote($name);
		font-style: $style;

jensgro

@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) {
	$src: null;

	@each $ext in $exts {
		$src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma);
	}

	@font-face {
		font-family: quote($name);
		font-style: $style;

jensgro

// 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);

jensgro

// 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;
}

jensgro

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

jensgro

// 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;
}

jensgro

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