adding

dist/index.html

@@ -8,6 +8,7 @@
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="https://raw.githubusercontent.com/leejordan/reflex/master/css/reflex.min.css">
 	<link rel="stylesheet" href="/css/styles.css">
 </head>
 
@@ -41,20 +42,21 @@
 			<use xlink:href="/svg/icons.svg#triangle-up" />
 		</svg>
 	</a>
-	<div class="container">
+    <nav class="nav">
+        <ul class="margin-top-0x">
+            <li><a href="#getting-started">Getting Started</a></li>
+            <li><a href="#typography">Typography</a></li>
+            <li><a href="#components">Components</a></li>
+            <li><a href="#functions">Functions</a></li>
+            <li><a href="#helpers">Helpers</a></li>
+            <li><a href="#mixins">Mixins</a></li>
+            <li><a href="#reflex-grid">Reflex Grid</a></li>
+        </ul>
+    </nav>
+	<div class="container container--main">
 		<div class="grid">
 			<div class="col-12 col-sm-3">
-				<nav class="nav">
-					<ul class="margin-top-0x">
-						<li><a href="#getting-started">Getting Started</a></li>
-						<li><a href="#typography">Typography</a></li>
-						<li><a href="#components">Components</a></li>
-						<li><a href="#functions">Functions</a></li>
-						<li><a href="#helpers">Helpers</a></li>
-						<li><a href="#mixins">Mixins</a></li>
-						<li><a href="#reflex-grid">Reflex Grid</a></li>
-					</ul>
-				</nav>
+
 			</div>
 			<div class="col-12 col-sm-9">
 				<p>

src/example/components/_nav.scss

@@ -9,26 +9,10 @@
 @mixin example__nav()
 {
     .nav {
-        position: relative;
+        position: fixed;
 
         a {
             @include crispy__font-size(18px);
         }
-
-        ul {
-            margin-left: 0;
-            list-style: none;
-        }
-
-        @include crispy__media-sm() {
-            position: absolute;
-        }
-
-        &--fixed {
-            @include crispy__media-sm() {
-                position: fixed;
-                top: 40px !important;
-            }
-        }
     }
 }

src/example/site/_container.scss

@@ -1,13 +0,0 @@
-/**
- *
- *
- */
-
-@mixin example__container()
-{
-    .container {
-        max-width: 992px;
-        width: 100%;
-        margin: 0 auto;
-    }
-}

src/example/site/_footer.scss

@@ -8,9 +8,9 @@
 @mixin example__footer()
 {
     .footer {
-        padding: 12px 0;
+        padding: toEm(12px 0);
         background-color: #e9e9e9;
         border-top: 1px dotted #959595;
-        margin: 50px 0 0 0;
+        margin: toEm(50px 0 0 0);
     }
 }

webpack.mix.js

@@ -11,7 +11,10 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.js.sass('src/app.scss', 'dist/')
+mix.sass([
+        'src/sass/crispy.scss',
+        'src/example/example.scss',
+    ], 'dist/')
     .options({
         postCss: [
             require('postcss-css-variables')()