jekyll_patternbot 0.12.0

data/_patterns/typography/emphasis-and-edits.html

@@ -0,0 +1,80 @@
+<div class="text-left grid">
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;em&gt;</code></li>
+    </ul>
+    <p class="text-left"><em>This is text</em></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;strong&gt;</code></li>
+    </ul>
+    <p class="text-left"><strong>This is text</strong></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;del&gt;</code></li>
+    </ul>
+    <p class="text-left"><del>This is text</del></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;ins&gt;</code></li>
+    </ul>
+    <p class="text-left"><ins>This is text</ins></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;abbr&gt;</code></li>
+    </ul>
+    <p class="text-left"><abbr>THIS</abbr></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;dfn&gt;</code></li>
+    </ul>
+    <p class="text-left"><dfn>This is text</dfn></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;i&gt;</code></li>
+    </ul>
+    <p class="text-left"><i>This is text</i></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;b&gt;</code></li>
+    </ul>
+    <p class="text-left"><b>This is text</b></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;mark&gt;</code></li>
+    </ul>
+    <p class="text-left"><mark>This is text</mark></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;s&gt;</code></li>
+    </ul>
+    <p class="text-left"><s>This is text</s></p>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;u&gt;</code></li>
+    </ul>
+    <p class="text-left"><u>This is text</u></p>
+  </div>
+
+</div>

data/_patterns/typography/font-sizes.html

@@ -0,0 +1,90 @@
+<div class="text-left">
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.tenamega</code></li>
+  </ul>
+  <p class="tenamega text-left patternbot-no-wrap">Extreme large size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.tenakilo</code></li>
+  </ul>
+  <p class="tenakilo text-left patternbot-no-wrap">Super text size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.tena</code></li>
+  </ul>
+  <p class="tena text-left patternbot-no-wrap">XXXL text size size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.nina</code></li>
+  </ul>
+  <p class="nina text-left patternbot-no-wrap">XXL text size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.yotta</code></li>
+  </ul>
+  <p class="yotta text-left patternbot-no-wrap">Extra large size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.zetta</code></li>
+  </ul>
+  <p class="zetta text-left patternbot-no-wrap">Large size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.exa</code></li>
+    <li><code>&lt;h1&gt;</code></li>
+  </ul>
+  <p class="exa text-left patternbot-no-wrap">Heading level 1 size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.peta</code></li>
+    <li><code>&lt;h2&gt;</code></li>
+  </ul>
+  <p class="peta text-left patternbot-no-wrap">Heading level 2 size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.tera</code></li>
+    <li><code>&lt;h3&gt;</code></li>
+  </ul>
+  <p class="tera text-left patternbot-no-wrap">Heading level 3 size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.giga</code></li>
+    <li><code>&lt;h4&gt;</code></li>
+  </ul>
+  <p class="giga text-left patternbot-no-wrap">Heading level 4 size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.mega</code></li>
+    <li><code>&lt;h5&gt;</code></li>
+  </ul>
+  <p class="mega text-left patternbot-no-wrap">Heading level 5 size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.kilo</code></li>
+    <li><code>&lt;h6&gt;</code></li>
+    <li><code>&lt;p&gt;</code></li>
+    <li><code class="patternbot-code-invisible">default</code></li>
+  </ul>
+  <p class="patternbot-no-wrap">Default body size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.milli</code></li>
+    <li><code>&lt;small&gt;</code></li>
+  </ul>
+  <p class="milli text-left patternbot-no-wrap">Second smallest size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.micro</code></li>
+  </ul>
+  <p class="micro text-left patternbot-no-wrap">Smallest size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.nano</code></li>
+  </ul>
+  <p class="nano text-left patternbot-no-wrap">Extra small size</p>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>.pico</code></li>
+  </ul>
+  <p class="pico text-left patternbot-no-wrap">Ultra small size</p>
+</div>

data/_patterns/typography/headings.html

@@ -0,0 +1,31 @@
+<div class="text-left">
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h1&gt;</code></li>
+  </ul>
+  <h1 class="text-left">Heading level 1</h1>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h2&gt;</code></li>
+  </ul>
+  <h2 class="text-left">Heading level 2</h2>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h3&gt;</code></li>
+  </ul>
+  <h3 class="text-left">Heading level 3</h3>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h4&gt;</code></li>
+  </ul>
+  <h4 class="text-left">Heading level 4</h4>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h5&gt;</code></li>
+  </ul>
+  <h5 class="text-left">Heading level 5</h5>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;h6&gt;</code></li>
+  </ul>
+  <h6 class="text-left">Heading level 6</h6>
+</div>

data/_patterns/typography/horizontal-spacing.html

@@ -0,0 +1,46 @@
+<div class="text-center patternbot-font-primary patternbot-color-body patternbot-spacing-display">
+  <div class="patternbot-pad-box gutter-2">
+    <div class="patternbot-pad-box-inner">
+      <h2 class="push-0">2</h2>
+      <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0">
+        <li><code>.gutter-2</code></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="patternbot-pad-box gutter">
+    <div class="patternbot-pad-box-inner">
+      <h2 class="push-0">1</h2>
+      <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0">
+        <li><code>.gutter</code></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="patternbot-pad-box gutter-1-2">
+    <div class="patternbot-pad-box-inner">
+      <h2 class="push-0">½</h2>
+      <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0">
+        <li><code>.gutter-1-2</code></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="patternbot-pad-box gutter-1-4">
+    <div class="patternbot-pad-box-inner">
+      <h2 class="push-0">¼</h2>
+      <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0">
+        <li><code>.gutter-1-4</code></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="patternbot-pad-box gutter-1-8">
+    <div class="patternbot-pad-box-inner">
+      <h2 class="push-0">⅛</h2>
+      <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0">
+        <li><code>.gutter-1-8</code></li>
+      </ul>
+    </div>
+  </div>
+</div>

data/_patterns/typography/links.html

@@ -0,0 +1,11 @@
+<div class="text-left">
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;a&gt;</code></li>
+  </ul>
+  <ul class="list-group text-left">
+    <li class="tera"><a href="#">Link</a></li>
+    <li class="bold"><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+    <li class="milli"><a href="#">Link</a></li>
+  </ul>
+</div>

data/_patterns/typography/lists.html

@@ -0,0 +1,43 @@
+<div class="gutter text-left grid">
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;ul&gt;</code></li>
+      <li><code>&lt;li&gt;</code></li>
+    </ul>
+    <ul class="text-left">
+      <li>List item 1</li>
+      <li>List item 1</li>
+      <li>List item 1</li>
+      <li>List item 1</li>
+    </ul>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;ol&gt;</code></li>
+      <li><code>&lt;li&gt;</code></li>
+    </ul>
+    <ol class="text-left">
+      <li>List item 1</li>
+      <li>List item 1</li>
+      <li>List item 1</li>
+      <li>List item 1</li>
+    </ol>
+  </div>
+
+  <div class="unit xs-1 s-1 m-1-3">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>&lt;dl&gt;</code></li>
+      <li><code>&lt;dt&gt;</code></li>
+      <li><code>&lt;dd&gt;</code></li>
+    </ul>
+    <dl class="text-left">
+      <dt>List item 1</dt>
+      <dd>List item 1</dd>
+      <dt>List item 1</dt>
+      <dd>List item 1</dd>
+    </dl>
+  </div>
+
+</div>

data/_patterns/typography/quotations.html

@@ -0,0 +1,17 @@
+<div class="gutter text-left">
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;blockquote&gt;</code></li>
+    <li><code>&lt;cite&gt;</code></li>
+  </ul>
+  <blockquote>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+    <footer>— <cite>Citing a person</cite></footer>
+  </blockquote>
+
+  <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+    <li><code>&lt;q&gt;</code></li>
+  </ul>
+  <p>This is a paragraph with <q>An amazing quote</q> inside</p>
+
+</div>

data/_patterns/typography/size-adjustments.html

@@ -0,0 +1,20 @@
+<div class="text-left">
+  <div class="patternbot-mq-display-wrap push patternbot-font-primary patternbot-color-body">
+    <ol class="patternbot-mq-display list-group push-0 pad-b" style="{% for mq in page._PatternbotData.css.typografier.settings %}width: calc({{mq.mq | strip_trailing_zero}}em + 40em); {% endfor %}">
+      {% for mq in page._PatternbotData.css.typografier.settings %}
+        <li style="padding-left: {{mq.mq}}em">
+          <div class="patternbot-mq-inner relative">
+            <dl class="patternbot-mq-list list-group-inline push-0 gutter-1-2 absolute micro">
+              <dt class="push-0">Media query</dt>
+              <dd class="push-0">{% if mq.mq > 0 %}{{mq.mq | strip_trailing_zero}}em{% else %}∞{% endif %}</dd>
+              <dt class="push-0">Sizes</dt>
+              <dd class="push-0">{{mq.font_size | strip_trailing_zero}}% / {{mq.line_height | strip_trailing_zero}}rem</dd>
+              <dt class="push-0">Type scale</dt>
+              <dd class="push-0">{{mq.scale | strip_trailing_zero}}</dd>
+            </dl>
+          </div>
+        </li>
+      {% endfor %}
+    </ol>
+  </div>
+</div>

data/_patterns/typography/typesetting.html

@@ -0,0 +1,32 @@
+<div class="grid">
+  <div class="unit max-length gutter-1-2">
+    <ul class="patternbot-code-details list-group-inline micro push-1-2 pad-t">
+      <li><code>.max-length</code></li>
+    </ul>
+    <h1 class="zetta">Lorem ipsum dolor sit amet</h1>
+    <p class="giga">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
+    <p class="giga">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="unit [ xs-1 s-1 m-1-2 l-1-2 ] gutter-1-2">
+    <h2>Consectetuer adipiscing elit.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="unit [ xs-1 s-1 m-1-2 l-1-2 ] gutter-1-2">
+    <h2>Consectetuer adipiscing elit.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="unit [ xs-1 s-1 m-2-3 l-2-3 ] gutter-1-2">
+    <h2>Consectetuer adipiscing elit.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="unit [ xs-1 s-1 m-1-3 l-1-3 ] gutter-1-2">
+    <h2 class="kilo">Consectetuer adipiscing elit.</h2>
+    <p class="micro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+  <div class="unit max-length gutter-1-2">
+    <h3>Lorem ipsum dolor sit amet</h3>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
+    <h4>Lorem ipsum dolor sit amet</h4>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+</div>

data/_patterns/typography/vertical-spacing.html

@@ -0,0 +1,55 @@
+<div class="grid grid-bottom text-center">
+  <div class="unit [ xs-1-5 ]">
+    <div class="patternbot-pad-box patternbot-bg-accent pad-t-2"></div>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <div class="patternbot-pad-box patternbot-bg-accent pad-t"></div>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <div class="patternbot-pad-box patternbot-bg-accent pad-t-1-2"></div>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <div class="patternbot-pad-box patternbot-bg-accent pad-t-1-4"></div>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <div class="patternbot-pad-box patternbot-bg-accent pad-t-1-8"></div>
+  </div>
+</div>
+
+<div class="grid text-center patternbot-font-primary patternbot-color-body patternbot-spacing-display">
+  <div class="unit [ xs-1-5 ]">
+    <h2 class="push-0">2</h2>
+    <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
+      <li><code>.push-2</code></li>
+      <li><code>.pad-2</code></li>
+    </ul>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <h2 class="push-0">1</h2>
+    <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
+      <li><code>.push</code></li>
+      <li><code>.pad</code></li>
+    </ul>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <h2 class="push-0">½</h2>
+    <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
+      <li><code>.push-1-2</code></li>
+      <li><code>.pad-1-2</code></li>
+    </ul>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <h2 class="push-0">¼</h2>
+    <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
+      <li><code>.push-1-4</code></li>
+      <li><code>.pad-1-4</code></li>
+    </ul>
+  </div>
+  <div class="unit [ xs-1-5 ]">
+    <h2 class="push-0">⅛</h2>
+    <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
+      <li><code>.push-1-8</code></li>
+      <li><code>.pad-1-8</code></li>
+    </ul>
+  </div>
+</div>

data/_patterns/utilities/config.yml

@@ -0,0 +1,11 @@
+_layout: "patternbot_pattern_internal"
+_extra_css:
+  - 'utilities/utilities.min.css'
+
+patterns:
+  utilities:
+    title: "Utilities"
+    description: "There are many common utility classes available to all patterns & pages that help to quickly style elements without contributing to extra code duplication."
+    _popout_button: false
+    _resizable: false
+    _code: false