adding media

adding fonts

.gitignore

@@ -4,3 +4,6 @@ build
 Thumbs.db
 .idea
 *.log
+
+build/svg/*
+!build/svg/.gitkeep

demo/index.html → dest/index.html

@@ -7,7 +7,7 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="../dest/css/crispy.css">
+        <link rel="stylesheet" href="/css/crispy.css">
         <style>
             .container {
                 max-width: 992px;
@@ -29,11 +29,7 @@
             }
 
             .header__logo {
-                width: 50px;
-                line-height: 0;
-                position: relative;
-                top: 3px;
-                margin: 0 10px;
+                width: 45px;
             }
 
             .footer {
@@ -51,14 +47,21 @@
                     <div class="col-12">
                         <div class="text-center">
                             <h1 class="header__title">
-                                <img class="header__logo" src="../dest/svg/chip.svg" alt="chip" /> Crispy Boilerplate - small, simple, pure CSS
+                                <svg class="icon header__logo" alt="chip" viewBox="0 0 100 100">
+                                    <use xlink:href="/svg/icons.svg#chip" />
+                                </svg>
+                                Crispy Boilerplate - small, simple, pure CSS
                             </h1>
                         </div>
                     </div>
                 </div>
             </div>
         </header>
-        <a class="button button--up" href="#header">b</a>
+        <a class="button button--up" href="#header">
+            <svg class="icon" alt="up" viewBox="0 0 100 100">
+                <use xlink:href="/svg/icons.svg#triangle-up" />
+            </svg>
+        </a>
         <div class="container">
             <div class="grid">
                 <div class="col-2">
@@ -100,17 +103,17 @@
                     <!-- blockquote -->
                     <h3 class="h4 margin-top-1x">Heading</h3>
                     <h4 class="h6">Html:</h4>
-                    <code>&lt;h2&gt;&lt;/h2&gt;
-&lt;h2 class="h3"&gt;&lt;/h2&gt;</code>
+                    <pre class="code"><code>&lt;h2&gt;&lt;/h2&gt;
+&lt;h2 class="h3"&gt;&lt;/h2&gt;</code></pre>
                     <h4 class="h6">Sass:</h4>
-                    <code>$crispy__heading__font-sizes: (
+                    <pre class="code"><code>$crispy__heading__font-sizes: (
     'h1': 40px,
     'h2': 36px,
     'h3': 32px,
     'h4': 28px,
     'h5': 24px,
     'h6': 20px
-) !default;</code>
+) !default;</code></pre>
 
                     <h1>Heading h1</h1>
                     <h2>Heading h1</h2>
@@ -124,21 +127,49 @@
                     <!-- blockquote -->
                     <h3 class="h4 margin-top-1x">blockquote</h3>
                     <h4 class="h6">Html:</h4>
-                    <code class="code">&lt;blockquote&gt;&lt;/blockquote&gt;</code>
+                    <pre class="code"><code>&lt;blockquote&gt;&lt;/blockquote&gt;</code></pre>
                     <blockquote>
                         Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
                     </blockquote>
 
                     <!-- abbr -->
                     <h3 class="h4 margin-top-1x">abbr</h3>
+                    <h4 class="h6">Html:</h4>
+                    <pre class="code"><code>&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code></pre>
                     <p>
                         Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats
                     </p>
-                    <code class="code">&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code>
 
+                    <!-- list -->
+                    <h3 class="h4 margin-top-1x">Lists</h3>
+                    <h4 class="h6">Html:</h4>
+                    <pre class="code"><code>&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;
+        item 2
+        &lt;ul&gt;
+            &lt;li&gt;child item 1&lt;/li&gt;
+            &lt;li&gt;child item 2&lt;/li&gt;
+        &lt;/ul&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+&lt;ol&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+&lt;/ol&gt;
+&lt;dl&gt;
+    &lt;dt&gt;defined title 1&lt;/dt&gt;
+    &lt;dd&gt;defined item 1&lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
                     <ul>
                         <li>item 1</li>
-                        <li>item 2</li>
+                        <li>
+                            item 2
+                            <ul>
+                                <li>child item 1</li>
+                                <li>child item 2</li>
+                            </ul>
+                        </li>
                     </ul>
                     <ol>
                         <li>item 1</li>
@@ -158,16 +189,16 @@
                     <button class="button button--danger">Danger</button>
                     <button class="button button--info">Info</button>
                     <button class="button button--info button--wide margin-top-1x">Info</button>
-                    <code class="margin-top-1x margin-bottom-1x">&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
+                    <pre class="code"><code class="margin-top-1x margin-bottom-1x">&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button button--success&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button button--warning&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
 &lt;button class=&quot;button button--up&quot;&gt;&lt;/button&gt;
-&lt;button class=&quot;button button--down&quot;&gt;&lt;/button&gt;</code>
+&lt;button class=&quot;button button--down&quot;&gt;&lt;/button&gt;</code></pre>
 
                     <hr>
                     <h2 id="table" class="margin-top-1x">Table</h2>
-                    <code>&lt;table class=&quot;table table--striped&quot;&gt;
+                    <pre class="code"><code>&lt;table class=&quot;table table--striped&quot;&gt;
     &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;&lt;/th&gt;
@@ -178,7 +209,7 @@
             &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
     &lt;/tbody&gt;
-&lt;/table&gt;</code>
+&lt;/table&gt;</code></pre>
 
                     <table class="table table--striped margin-bottom-2x">
                         <thead>
@@ -202,6 +233,43 @@
                             </tr>
                         </tbody>
                     </table>
+                    <hr />
+                    <!-- helpers -->
+                    <h2 id="helpers" class="margin-top-1x">
+                        Helpers
+                    </h2>
+
+                    <!-- -->
+                    <h3 class="h4 margin-top-1x">
+                        Media
+                    </h3>
+                    <pre class="code"><code>&lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
+&lt;img class=&quot;img-fit-cover&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;
+&lt;img class=&quot;img-fit-contain&quot; style=&quot;width: 100%; height: 200px;&quot; src=&quot;https://picsum.photos/400&quot;/&gt;</code></pre>
+                    <div class="grid">
+                        <div class="col-6">
+                            <img class="img-responsive" src="https://picsum.photos/400" />
+                        </div>
+                        <div class="col-6">
+                            <img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
+                        </div>
+                        <div class="col-6">
+                            <img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400" />
+                        </div>
+                    </div>
+                    <pre class="code"><code>&lt;figure&gt;
+    &lt;img class=&quot;img-responsive&quot; src=&quot;https://picsum.photos/400&quot; /&gt;
+    &lt;figcaption class=&quot;text-center&quot;&gt;Lorem Ipsum&lt;/figcaption&gt;
+&lt;/figure&gt;</code></pre>
+                    <div class="grid">
+                        <div class="col-6">
+                            <figure>
+                                <img class="img-responsive" src="https://picsum.photos/400" />
+                                <figcaption class="text-center">Lorem Ipsum</figcaption>
+                            </figure>
+                        </div>
+                    </div>
+
 
                     <!-- Reflex Grid -->
                     <hr />
@@ -241,13 +309,13 @@
                     <h4 class="h6">
                         Sass:
                     </h4>
-                    <code class="margin-bottom-1x">@include crispy__media-md() {
+                    <pre class="code"><code class="margin-bottom-1x">@include crispy__media-md() {
     &lt;!-- your code --&gt;
 }
 
 @include crispy__media-md-only() {
     &lt;!-- your code --&gt;
-}</code>
+}</code></pre>
 
                 </div>
             </div>

src/scss/_base.scss

@@ -30,10 +30,6 @@ legend {
     box-sizing: inherit;
 }
 
-img {
-    width: 100%;
-}
-
 table {
     border-collapse: collapse;
     border-spacing: 0;
@@ -41,7 +37,7 @@ table {
 
 // paragraphs
 p {
-    margin: 0 0 $crispy__margin 0;
+    margin: 0 0 pxToEm($crispy__margin) 0;
 }
 
 // Semantic text elements
@@ -92,7 +88,11 @@ blockquote {
 // lists
 ul, ol, dl {
     padding: 0;
-    margin: pxToEm(10px) 0 $crispy__margin pxToEm(10px);
+    margin: 0 0 pxToEm($crispy__margin) pxToEm($crispy__margin);
+}
+
+ul ul, ol ol {
+    margin-top: pxToEm($crispy__margin / 2);
 }
 
 ol {
@@ -111,10 +111,20 @@ dt {
     font-weight: bold;
 }
 
+// media
+figure  {
+    margin: 0 0 pxToEm($crispy__margin);
+}
+
+figcaption {
+    margin: pxToEm($crispy__margin) 0 0;
+}
+
 // divider
 hr {
     border: 0;
     border-top: 1px solid $crispy__color-text;
+    margin: pxToEm($crispy__margin) 0
 }
 
 // body

src/scss/_config.scss

@@ -11,7 +11,7 @@ $crispy__font-size: 16px !default;
 $crispy__golden-ratio: 1.618 !default;
 
 // margin
-$crispy__margin: 5px !default;
+$crispy__margin: 10px !default;
 
 // colors
 $crispy__color-primary: #f0c209 !default;

src/scss/components/_code.scss

@@ -11,7 +11,7 @@
  *
  */
 
-$crispy__code__font-size: $cripsy__body__font-size !default;
+$crispy__code__font-size: $crispy__body__font-size !default;
 $crispy__code__font-family: monospace, monospace !default;
 $crispy__code__padding: pxToEm(10px) pxToEm(20px) !default;
 $crispy__code__margin: 0 0 pxToEm($crispy__margin) !default;

src/scss/components/_icon.scss

@@ -13,7 +13,7 @@
  */
 
 
-$crispy__icon__vertical-align: middle !default;
+$crispy__icon__vertical-align: text-bottom !default;
 $crispy__icon__margin: 0 2px !default;
 
 $crispy__icon__sizes: (

src/scss/components/_nav.scss

@@ -0,0 +1,20 @@
+/**
+ *
+ *
+ *
+ */
+
+@mixin $crispy__nav {
+    .nav {
+
+        &__list {
+            @include crispy__clearlist();
+        }
+
+        &--horizontal {
+            .nav__item {
+                display: inline-block;
+            }
+        }
+    }
+}

src/scss/crispy.scss

@@ -6,10 +6,10 @@
     'base',
 
     'components/button',
-    'components/typography',
     'components/heading',
     'components/icon',
     'components/table',
+    'components/code',
 
     'helpers/helpers';
 
@@ -17,7 +17,8 @@
 @include crispy__button();
 @include crispy__heading();
 @include crispy__table();
-@include crispy__typography();
+@include crispy__icon();
+@include crispy__code();
 
 // font-sizes & colors
 .button {
@@ -28,4 +29,5 @@
 // helpers
 @include crispy__align();
 @include crispy__margin();
-@include crispy__background-color();
+@include crispy__text();
+@include crispy__media();

src/scss/helpers/_media.scss

@@ -8,7 +8,9 @@
 
 @mixin crispy__media() {
     .img-responsive {
-
+        display: block;
+        max-width: 100%;
+        height: auto;
     }
 
     .img-fit-contain {
@@ -19,6 +21,29 @@
         object-fit: cover;
     }
 
+    .img-rounded {
+        border-radius: 50%;
+    }
+
+    /**
+     *
+     *
+     */
+    .img-hero {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: relative;
+
+        &--top {
+            background-position: top center;
+        }
+
+        &--bottom {
+            background-position: bottom center;
+        }
+    }
+
     .video-responsive {
         display: block;
         overflow: hidden;

src/scss/helpers/_text.scss

@@ -13,9 +13,9 @@
 $crispy__text-colors: $crispy__colors !default;
 
 @mixin crispy__text() {
-    @each $name, $color in $crispy__font-sizes {
+    @each $name, $font-size in $crispy__font-sizes {
         .text-#{$name} {
-            @include font-size($font-size);
+            @include crispy__font-size($font-size);
         }
     }
 

src/scss/mixins/_mixins.scss

@@ -1,3 +1,6 @@
+@import
+    'fonts';
+
 /**
  * clearfix to end floating
  *