adding new features for code block

demo/index.html

@@ -27,7 +27,7 @@
             <div class="container">
                 <div class="grid">
                     <div class="col-12">
-                        Crispy Boilerplate - pure CSS
+                        <h1 class="text-center">Crispy Boilerplate - pure CSS</h1>
                     </div>
                 </div>
             </div>
@@ -40,7 +40,25 @@
                     </nav>
                 </div>
                 <div class="col-10">
-                    <h1></h1>
+                    <p>
+                        A few Years a have always created Styles to use in other Frameworks, crispy boilerplate is a
+                        a small toolkit from this helpers, styles that can be used to create. This is not beatiful or fancy
+                        it is a simple and basic toolkit to get a default style.
+                    </p>
+                    <p>
+                       For me it was important to use no js, not that i hate js, no, the Problem of bigger Frameworks was
+                       but for the most webapps, it was always diffult to build a few things and not getting a conflict. So i desided
+                       it is simpler to get a good stable basis and build smaller parts
+                    </p>
+                    <p>
+                        So this is a smaller approch, most projects i have then that
+                        big Frameworks were used, but i often felt that there
+                        was a Problem, often the fight against the framework, that
+                        result often in bigger and longer code.
+
+                        This is also a try to code get a smaller base to create more effecit
+                        No, it is a try, i can not promise you it will be done,
+                    </p>
 
                     <h2 id="typography">Typography</h2>
                     <div class="panel">
@@ -51,6 +69,10 @@
                         <h5>Heading h1</h5>
                         <h6>Heading h1</h6>
                     </div>
+                    <p>
+                    <code class="code">&lt;h2&gt;&lt;/h2&gt;
+&lt;h2 class="h3"&gt;&lt;/h2&gt;</code>
+                    </p>
                     <div class="panel">
                         <strong>Strong</strong> <span class="background-warning">&lt;strong&gt;</span>
                         <code></code>

src/scss/components/_typography.scss

@@ -0,0 +1,22 @@
+/**
+ *
+ *
+ * @author Björn Hase 
+ *
+ */
+
+
+@mixin crispy__typography() {
+    .code {
+        font-family: monospace, monospace;
+        font-size: 1em;
+        white-space: pre;
+        display: block;
+
+        overflow-y: hidden;
+        overflow-x: auto;
+        padding: 10px 20px;
+        border: 1px solid #d4d4d4;
+        background-color: #f9f9f9;
+    }
+}

src/scss/crispy.scss

@@ -12,9 +12,11 @@
     'components/icon',
     'components/table';
 
+@include crispy__align();
 @include crispy__margin();
 @include crispy__background-color();
 
 @include crispy__button();
 @include crispy__heading();
 @include crispy__table();
+@include crispy__typography();