adding

4 years ago · a34463b567
--- a/dist/crispy-all.css
+++ b/dist/crispy-all.css
--- a/dist/crispy-minimal.css
+++ b/dist/crispy-minimal.css
--- a/dist/example/script.js
+++ b/dist/example/script.js
--- a/dist/example/styles.css
+++ b/dist/example/styles.css
--- a/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.eot
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.eot
--- a/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf
--- a/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff
--- a/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2
--- a/dist/recipes/modern-386/fonts/IBMPlexMono.eot
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono.eot
--- a/dist/recipes/modern-386/fonts/IBMPlexMono.ttf
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono.ttf
--- a/dist/recipes/modern-386/fonts/IBMPlexMono.woff
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono.woff
--- a/dist/recipes/modern-386/fonts/IBMPlexMono.woff2
+++ b/dist/recipes/modern-386/fonts/IBMPlexMono.woff2
--- a/dist/recipes/modern-386/index.html
+++ b/dist/recipes/modern-386/index.html
@ -0,0 +1 @@
 <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title><meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="modern-386.css"></head><body class="home"><header id="header" class="header"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><hgroup><a href="/"><h1 class="h2 margin-top-4 margin-bottom-0">Modern 386</h1></a></hgroup></div></div></div></div></header><div class="container"><div class="grid margin-top-2 margin-bottom-2"><div class="col-12"><h2>Buttons</h2><button class="button button--danger button--highlight">Aktivieren</button> <button class="button button--primary">Aktivieren</button></div></div><div class="grid margin-top-2 margin-bottom-2"><div class="col-12"><h2>Cards</h2><div class="card"><div class="card__header">Titel <button class="card__close"><span class="icon icon--close"></span></button></div><div class="card__body"><p>dödklk döldkk kk döledkel</p></div></div></div></div></div><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>
--- a/dist/recipes/modern-386/modern-386.css
+++ b/dist/recipes/modern-386/modern-386.css
--- a/src/example/components/_button.scss
+++ b/src/example/components/_button.scss
--- a/src/example/js/script.js
+++ b/src/example/js/script.js
--- a/src/example/site/_header.scss
+++ b/src/example/site/_header.scss
--- a/src/example/site/_main.scss
+++ b/src/example/site/_main.scss
--- a/src/example/styles.scss
+++ b/src/example/styles.scss
@ -1,6 +1,6 @@
@import
    'reflex',
    '../crispy-all',
    '../src/crispy-all',
    'site/header',
    'site/main',
    'components/button',
--- a/src/example/templates/_home.scss
+++ b/src/example/templates/_home.scss
--- a/fonts/IBMPlexMono-Bold.eot
+++ b/fonts/IBMPlexMono-Bold.eot
--- a/fonts/IBMPlexMono-Bold.ttf
+++ b/fonts/IBMPlexMono-Bold.ttf
--- a/fonts/IBMPlexMono-Bold.woff
+++ b/fonts/IBMPlexMono-Bold.woff
--- a/fonts/IBMPlexMono-Bold.woff2
+++ b/fonts/IBMPlexMono-Bold.woff2
--- a/fonts/IBMPlexMono.eot
+++ b/fonts/IBMPlexMono.eot
--- a/fonts/IBMPlexMono.ttf
+++ b/fonts/IBMPlexMono.ttf
--- a/fonts/IBMPlexMono.woff
+++ b/fonts/IBMPlexMono.woff
--- a/fonts/IBMPlexMono.woff2
+++ b/fonts/IBMPlexMono.woff2
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -2,7 +2,16 @@
    "/dist/example/script.js": "/dist/example/script.js",
    "/dist/crispy-all.css": "/dist/crispy-all.css",
    "/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
    "/dist/recipes/modern-386/modern-386.css": "/dist/recipes/modern-386/modern-386.css",
    "/dist/example/styles.css": "/dist/example/styles.css",
    "/spritemap.js": "/spritemap.js",
    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg",
    "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.eot": "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.eot",
    "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf": "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf",
    "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff": "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff",
    "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2": "/dist/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2",
    "/dist/recipes/modern-386/fonts/IBMPlexMono.eot": "/dist/recipes/modern-386/fonts/IBMPlexMono.eot",
    "/dist/recipes/modern-386/fonts/IBMPlexMono.ttf": "/dist/recipes/modern-386/fonts/IBMPlexMono.ttf",
    "/dist/recipes/modern-386/fonts/IBMPlexMono.woff": "/dist/recipes/modern-386/fonts/IBMPlexMono.woff",
    "/dist/recipes/modern-386/fonts/IBMPlexMono.woff2": "/dist/recipes/modern-386/fonts/IBMPlexMono.woff2"
 }
--- a/recipes/modal/modal.scss
+++ b/recipes/modal/modal.scss
--- a/recipes/modern-386/_config.scss
+++ b/recipes/modern-386/_config.scss
@ -0,0 +1,32 @@
 /**
 *
 *
 */
 $crispy__font-family: 'IBM Plex Mono';
 /**
 *  colors
 *
 */
 $crispy__color-primary: #4ecdc4;
 $crispy__color-danger: #ff6b6b;
 $crispy__color-warning: #ffe66d;
 $crispy__color-success: #44cf6c;
 //$crispy__color-grey-light:
 //$crispy__color-grey:
 //$crispy__color-grey-dark:
 $crispy__color-white: #f7fff7;
 $crispy__color-background: #292f36;
 $crispy__color-text: $crispy__color-white;
 // colors as map
 $crispy__colors: (
    'primary'    : $crispy__color-primary,
    'success'    : $crispy__color-success,
    'warning'    : $crispy__color-warning,
    'danger'     : $crispy__color-danger,
    'white'      : $crispy__color-white
 ) !default;
--- a/recipes/modern-386/components/_button.scss
+++ b/recipes/modern-386/components/_button.scss
@ -0,0 +1,66 @@
 /**
 *
 *
 *
 *
 */
@mixin components__button() {
    .button {
        position: relative;
        color: $crispy__color-white;
        border: 0;
        padding: 10px 30px;
        transition: background-color 0.3s ease-in-out;
        background: url(
            data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVQYlWNgIBJIIWFsfCooGEg3AACalwOpdVZM4wAAAABJRU5ErkJggg==
        ) repeat;
        &--highlight {
            border: 4px solid $crispy__color-background;
            &:after, &:before {
                position: absolute;
                z-index: -1;
                top: -6px;
                width: 15px;
                height: 56px;
                content: '';
            }
            &:before {
                left: -6px;
            }
            &:after {
                right: -6px;
            }
        }
    }
    @each $name, $color in $crispy__colors {
        .button--#{$name} {
            text-shadow: 0 0 3px #000000;
            background-color: darken($color, 8%) !important;
            &:hover {
                background-color: lighten($color, 5%) !important;
            }
            &.button--highlight {
                &:after, &:before {
                    background-color: darken($color, 8%) !important;
                }
                &:hover {
                    &:after, &:before {
                        background-color: lighten($color, 5%)  !important;
                    }
                }
            }
        }
    }
 }
--- a/recipes/modern-386/components/_card.scss
+++ b/recipes/modern-386/components/_card.scss
@ -0,0 +1,43 @@
 /**
 *
 *
 *
 *
 */
@mixin components__card() {
    .card {
        border: 1px solid $crispy__color-primary;
        &__header {
            position: relative;
            margin: 3px;
            padding: 0 0 2px 10px;
            text-shadow: 0 0 3px #000000;
            background: url(
                data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVQYlWNgIBJIIWFsfCooGEg3AACalwOpdVZM4wAAAABJRU5ErkJggg==
            ) repeat;
            background-color: $crispy__color-primary;
            @include crispy__clearfix();
        }
        &__body {
            margin: 6px 12px;
        }
        &__footer {
        }
        &__close {
            position: absolute;
            height: 100%;
            right: 0;
            border: 1px solid $crispy__color-primary;
            background-color: $crispy__color-background;
            cursor: pointer;
        }
    }
 }
--- a/recipes/modern-386/components/_icon.scss
+++ b/recipes/modern-386/components/_icon.scss
@ -0,0 +1,20 @@
 /**
 *
 *
 *
 *
 */
@mixin components__icon() {
    .icon {
        &:before {
            display: inline-block;
        }
        &--close {
            &:before {
                content: "\274C";
            }
        }
    }
 }
--- a/recipes/modern-386/fonts/IBMPlexMono-Bold.eot
+++ b/recipes/modern-386/fonts/IBMPlexMono-Bold.eot
--- a/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf
+++ b/recipes/modern-386/fonts/IBMPlexMono-Bold.ttf
--- a/recipes/modern-386/fonts/IBMPlexMono-Bold.woff
+++ b/recipes/modern-386/fonts/IBMPlexMono-Bold.woff
--- a/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2
+++ b/recipes/modern-386/fonts/IBMPlexMono-Bold.woff2
--- a/recipes/modern-386/fonts/IBMPlexMono.eot
+++ b/recipes/modern-386/fonts/IBMPlexMono.eot
--- a/recipes/modern-386/fonts/IBMPlexMono.ttf
+++ b/recipes/modern-386/fonts/IBMPlexMono.ttf
--- a/recipes/modern-386/fonts/IBMPlexMono.woff
+++ b/recipes/modern-386/fonts/IBMPlexMono.woff
--- a/recipes/modern-386/fonts/IBMPlexMono.woff2
+++ b/recipes/modern-386/fonts/IBMPlexMono.woff2
--- a/recipes/modern-386/fonts/demo.html
+++ b/recipes/modern-386/fonts/demo.html
@ -0,0 +1,233 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, noarchive">
    <meta name="format-detection" content="telephone=no">
    <title>Transfonter demo</title>
    <link href="stylesheet.css" rel="stylesheet">
    <style>
        /*
        http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* demo styles */
        body {
            background: #f0f0f0;
            color: #000;
        }
        .page {
            background: #fff;
            width: 920px;
            margin: 0 auto;
            padding: 20px 20px 0 20px;
            overflow: hidden;
        }
        .font-container {
            overflow-x: auto;
            overflow-y: hidden;
            margin-bottom: 40px;
            line-height: 1.3;
            white-space: nowrap;
            padding-bottom: 5px;
        }
        h1 {
            position: relative;
            background: #444;
            font-size: 32px;
            color: #fff;
            padding: 10px 20px;
            margin: 0 -20px 12px -20px;
        }
        .letters {
            font-size: 25px;
            margin-bottom: 20px;
        }
        .s10:before {
            content: '10px';
        }
        .s11:before {
            content: '11px';
        }
        .s12:before {
            content: '12px';
        }
        .s14:before {
            content: '14px';
        }
        .s18:before {
            content: '18px';
        }
        .s24:before {
            content: '24px';
        }
        .s30:before {
            content: '30px';
        }
        .s36:before {
            content: '36px';
        }
        .s48:before {
            content: '48px';
        }
        .s60:before {
            content: '60px';
        }
        .s72:before {
            content: '72px';
        }
        .s10:before, .s11:before, .s12:before, .s14:before,
        .s18:before, .s24:before, .s30:before, .s36:before,
        .s48:before, .s60:before, .s72:before {
            font-family: Arial, sans-serif;
            font-size: 10px;
            font-weight: normal;
            font-style: normal;
            color: #999;
            padding-right: 6px;
        }
        pre {
            display: block;
            position: relative;
            padding: 9px;
            margin: 0 0 10px;
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 13px;
            line-height: 1.428571429;
            color: #333;
            font-weight: normal;
            font-style: normal;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            overflow-x: auto;
            border-radius: 4px;
        }
        pre:after {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            content: 'Usage';
            line-height: 1;
            padding: 5px 8px;
            font-size: 12px;
            color: #767676;
            background-color: #fff;
            border: 1px solid #ccc;
            border-right: none;
            border-top: none;
            border-radius: 0 4px 0 4px;
            z-index: 10;
        }
        /* responsive */
        @media (max-width: 959px) {
            .page {
                width: auto;
                margin: 0;
            }
        }
    </style>
 </head>
 <body>
 <div class="page">
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: normal;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
    <div class="demo">
        <h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
        <pre>.your-style {
    font-family: 'IBM Plex Mono';
    font-weight: bold;
    font-style: normal;
 }</pre>
        <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
        </div>
    </div>
 </div>
 </body>
 </html>
--- a/recipes/modern-386/fonts/stylesheet.css
+++ b/recipes/modern-386/fonts/stylesheet.css
@ -0,0 +1,24 @@
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono.eot');
    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono.woff2') format('woff2'),
        url('IBMPlexMono.woff') format('woff'),
        url('IBMPlexMono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono-Bold.eot');
    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexMono-Bold.woff2') format('woff2'),
        url('IBMPlexMono-Bold.woff') format('woff'),
        url('IBMPlexMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
 }
--- a/recipes/modern-386/modern-386.scss
+++ b/recipes/modern-386/modern-386.scss
@ -0,0 +1,16 @@
@import
    'fonts/stylesheet',
    'config',
    '../../node_modules/reflex-grid/scss/reflex',
    '../../src/crispy-all',
    'components/icon',
    'components/button',
    'components/card';
@include components__icon();
@include components__button();
@include components__card();
--- a/src/_helpers.scss
+++ b/src/_helpers.scss
@ -178,6 +178,15 @@ $crispy__helpers__width: (
        @include crispy__clearfix();
    }
    /**
     *  flex
     *
     *
     */
    .display-flex {
        display: flex;
    }
    /**
     *  position
@ -319,6 +328,15 @@ $crispy__helpers__width: (
        }
    }
    /**
     *
     *
     */
    .height-100 {
        height: 100%;
    }
    /**
     *  width
     *
--- a/src/html/recipes/modern-386/index.html.ejs
+++ b/src/html/recipes/modern-386/index.html.ejs
@ -0,0 +1,67 @@
 <!doctype html>
 <html lang="en_EN">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="modern-386.css">
 </head>
 <body class="home">
    <header id="header" class="header">
 		<div class="container">
 			<div class="grid">
 				<div class="col-12">
 					<div class="text-center">
                        <hgroup>
 							<a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">
 								    Modern 386
                                </h1>
                            </a>
 						</hgroup>
 					</div>
 				</div>
 			</div>
 		</div>
 	</header>
 	<div class="container">
        <div class="grid margin-top-2 margin-bottom-2">
            <div class="col-12">
                <h2>Buttons</h2>
                <button class="button button--danger button--highlight">
                    Aktivieren
                </button>
                <button class="button button--primary">
                    Aktivieren
                </button>
            </div>
        </div>
        <div class="grid margin-top-2 margin-bottom-2">
            <div class="col-12">
                <h2>Cards</h2>
                <div class="card">
                    <div class="card__header">
                        Titel
                        <button class="card__close">
                            <span class="icon icon--close"></span>
                        </button>
                    </div>
                    <div class="card__body">
                        <p>
                            dödklk döldkk kk döledkel
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%= htmlWebpackPlugin.options.footer %>
 </body>
 </html>
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -25,6 +25,14 @@ mix.webpackConfig({
                prefix: 'icon-'
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/recipes/modern-386/index.html',
            template: 'src/html/recipes/modern-386/index.html.ejs',
            title: 'Crispy CSS | Lightweight CSS Framework for Building Apps and Websites',
            description: 'Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers',
            footer: fs.readFileSync(__dirname + '/src/html/partials/footer.html'),
            inject: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dist/example/index.html',
            template: 'src/html/index.html.ejs',
@ -108,14 +116,16 @@ mix.webpackConfig({
 mix.sass('src/crispy-all.scss', 'dist/crispy-all.css')
    .sass('src/crispy-minimal.scss', 'dist/crispy-minimal.css')
    .sass('src/example/styles.scss', 'dist/example/styles.css', {
    .sass('recipes/modern-386/modern-386.scss', 'dist/recipes/modern-386/modern-386.css')
    .sass('example/styles.scss', 'dist/example/styles.css', {
            sassOptions: {
                includePaths: [
                    'node_modules/reflex-grid/scss'
                ]
            }
    })
    .js('src/example/js/script.js', 'dist/example/script.js')
    .copy('fonts/*', 'dist/recipes/modern-386/fonts')
    .js('example/js/script.js', 'dist/example/script.js')
    .options({
        postCss: [
            require('postcss-css-variables')()