@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.43

package/docs-dev/sass/components/hero/index.html

@@ -5166,32 +5166,32 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#mixins">Mixins</a>
+                    <li><a href="#variables">Variables</a>
             
                 <ol>
                     
-                    <li><a href="#mixin-set">set()</a>
-            		</li>
-
-                    <li><a href="#mixin-styles">styles()</a>
+                    <li><a href="#variable-config">$config</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#functions">Functions</a>
+                    <li><a href="#mixins">Mixins</a>
             
                 <ol>
                     
-                    <li><a href="#function-get">get()</a>
+                    <li><a href="#mixin-set">set()</a>
+            		</li>
+
+                    <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#variables">Variables</a>
+                    <li><a href="#functions">Functions</a>
             
                 <ol>
                     
-                    <li><a href="#variable-config">$config</a>
+                    <li><a href="#function-get">get()</a>
             		</li>
                 </ol>
             		</li>
@@ -5209,6 +5209,104 @@
       <h1 id="hero" tabindex="-1">Hero</h1>
 <div class="type-large">
 </div>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"height"</span> <span class="pjs-token pjs-punctuation">:</span> 100vh<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"height-compact"</span> <span class="pjs-token pjs-punctuation">:</span> 40vh<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"graphic-height-stacked"</span> <span class="pjs-token pjs-punctuation">:</span> 60vh<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"content-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"content-padding-top"</span> <span class="pjs-token pjs-punctuation">:</span> 3rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"content-padding-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 3rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"text-align"</span> <span class="pjs-token pjs-punctuation">:</span> center<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"extra-split-ratios"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"wide"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>60%<span class="pjs-token pjs-punctuation">,</span> 40%<span class="pjs-token pjs-punctuation">)</span>
+  <span class="pjs-token pjs-punctuation">)</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _hero.scss</li>
+<li><strong>Group:</strong> hero</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 16-26</li>
+<li><strong>Lines (code):</strong> 28-41</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">extra-split-ratios</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">wide 70/30</td>
+<td style="text-align:left">A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content])</td>
+</tr>
+<tr>
+<td style="text-align:left">breakpoint</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;medium&quot;</td>
+<td style="text-align:left">At what breakpoint the hero goes to small screen styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">height</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">100vh</td>
+<td style="text-align:left">Height of the hero.</td>
+</tr>
+<tr>
+<td style="text-align:left">height-compact</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">40vh</td>
+<td style="text-align:left">Height of the hero when using the &quot;--compact&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">graphic-height-stacked</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">60vh</td>
+<td style="text-align:left">Height of the graphic.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-max-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">40rem</td>
+<td style="text-align:left">Max width of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-padding-top</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3rem</td>
+<td style="text-align:left">Top padding of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-padding-bottom</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3rem</td>
+<td style="text-align:left">Bottom padding of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">center</td>
+<td style="text-align:left">Text align of the content.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5314,104 +5412,6 @@
 <ul>
 <li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
 </ul>
-<h2 id="variables" tabindex="-1">Variables</h2>
-<div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"height"</span> <span class="pjs-token pjs-punctuation">:</span> 100vh<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"height-compact"</span> <span class="pjs-token pjs-punctuation">:</span> 40vh<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"graphic-height-stacked"</span> <span class="pjs-token pjs-punctuation">:</span> 60vh<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"content-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"content-padding-top"</span> <span class="pjs-token pjs-punctuation">:</span> 3rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"content-padding-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 3rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"text-align"</span> <span class="pjs-token pjs-punctuation">:</span> center<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"extra-split-ratios"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"wide"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>60%<span class="pjs-token pjs-punctuation">,</span> 40%<span class="pjs-token pjs-punctuation">)</span>
-  <span class="pjs-token pjs-punctuation">)</span>
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _hero.scss</li>
-<li><strong>Group:</strong> hero</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 16-26</li>
-<li><strong>Lines (code):</strong> 28-41</li>
-</ul>
-</details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">extra-split-ratios</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">wide 70/30</td>
-<td style="text-align:left">A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content])</td>
-</tr>
-<tr>
-<td style="text-align:left">breakpoint</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;medium&quot;</td>
-<td style="text-align:left">At what breakpoint the hero goes to small screen styling.</td>
-</tr>
-<tr>
-<td style="text-align:left">height</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">100vh</td>
-<td style="text-align:left">Height of the hero.</td>
-</tr>
-<tr>
-<td style="text-align:left">height-compact</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">40vh</td>
-<td style="text-align:left">Height of the hero when using the &quot;--compact&quot; styling.</td>
-</tr>
-<tr>
-<td style="text-align:left">graphic-height-stacked</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">60vh</td>
-<td style="text-align:left">Height of the graphic.</td>
-</tr>
-<tr>
-<td style="text-align:left">content-max-width</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">40rem</td>
-<td style="text-align:left">Max width of the content.</td>
-</tr>
-<tr>
-<td style="text-align:left">content-padding-top</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">3rem</td>
-<td style="text-align:left">Top padding of the content.</td>
-</tr>
-<tr>
-<td style="text-align:left">content-padding-bottom</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">3rem</td>
-<td style="text-align:left">Bottom padding of the content.</td>
-</tr>
-<tr>
-<td style="text-align:left">text-align</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">center</td>
-<td style="text-align:left">Text align of the content.</td>
-</tr>
-</tbody>
-</table>
 
     </div>
   </div>

package/docs-dev/sass/components/horizontal-rule/index.html

@@ -5166,32 +5166,32 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#mixins">Mixins</a>
+                    <li><a href="#variables">Variables</a>
             
                 <ol>
                     
-                    <li><a href="#mixin-set">set()</a>
-            		</li>
-
-                    <li><a href="#mixin-styles">styles()</a>
+                    <li><a href="#variable-config">$config</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#functions">Functions</a>
+                    <li><a href="#mixins">Mixins</a>
             
                 <ol>
                     
-                    <li><a href="#function-get">get()</a>
+                    <li><a href="#mixin-set">set()</a>
+            		</li>
+
+                    <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#variables">Variables</a>
+                    <li><a href="#functions">Functions</a>
             
                 <ol>
                     
-                    <li><a href="#variable-config">$config</a>
+                    <li><a href="#function-get">get()</a>
             		</li>
                 </ol>
             		</li>
@@ -5209,6 +5209,53 @@
       <h1 id="horizontal-rule" tabindex="-1">Horizontal-rule</h1>
 <div class="type-large">
 </div>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"margin"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"min-height"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _horizontal-rule.scss</li>
+<li><strong>Group:</strong> horizontal-rule</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 9-12</li>
+<li><strong>Lines (code):</strong> 14-17</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">min-height</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1em</td>
+<td style="text-align:left">Min height for rule.</td>
+</tr>
+<tr>
+<td style="text-align:left">margin</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1em</td>
+<td style="text-align:left">Top and bottom margin for rule.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5314,53 +5361,6 @@
 <ul>
 <li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
 </ul>
-<h2 id="variables" tabindex="-1">Variables</h2>
-<div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"margin"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"min-height"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _horizontal-rule.scss</li>
-<li><strong>Group:</strong> horizontal-rule</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 9-12</li>
-<li><strong>Lines (code):</strong> 14-17</li>
-</ul>
-</details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">min-height</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">1em</td>
-<td style="text-align:left">Min height for rule.</td>
-</tr>
-<tr>
-<td style="text-align:left">margin</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">1em</td>
-<td style="text-align:left">Top and bottom margin for rule.</td>
-</tr>
-</tbody>
-</table>
 
     </div>
   </div>

package/docs-dev/sass/components/image-grid/index.html

@@ -5166,32 +5166,32 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#mixins">Mixins</a>
+                    <li><a href="#variables">Variables</a>
             
                 <ol>
                     
-                    <li><a href="#mixin-set">set()</a>
-            		</li>
-
-                    <li><a href="#mixin-styles">styles()</a>
+                    <li><a href="#variable-config">$config</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#functions">Functions</a>
+                    <li><a href="#mixins">Mixins</a>
             
                 <ol>
                     
-                    <li><a href="#function-get">get()</a>
+                    <li><a href="#mixin-set">set()</a>
+            		</li>
+
+                    <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#variables">Variables</a>
+                    <li><a href="#functions">Functions</a>
             
                 <ol>
                     
-                    <li><a href="#variable-config">$config</a>
+                    <li><a href="#function-get">get()</a>
             		</li>
                 </ol>
             		</li>
@@ -5209,6 +5209,60 @@
       <h1 id="image-grid" tabindex="-1">Image-grid</h1>
 <div class="type-large">
 </div>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"gap"</span><span class="pjs-token pjs-punctuation">:</span>        3px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"min-width"</span><span class="pjs-token pjs-punctuation">:</span>  math.<span class="pjs-token pjs-function">div</span><span class="pjs-token pjs-punctuation">(</span>100%<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _image-grid.scss</li>
+<li><strong>Group:</strong> image-grid</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 13-17</li>
+<li><strong>Lines (code):</strong> 19-23</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">breakpoint</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;small&quot;</td>
+<td style="text-align:left">Sets the min breakpoint for the grid to print. This uses breakpoint.scss, so the value of this option should be a breakpoint variable from breakpoint.scss.</td>
+</tr>
+<tr>
+<td style="text-align:left">gap</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3px</td>
+<td style="text-align:left">The gap between images in the grid.</td>
+</tr>
+<tr>
+<td style="text-align:left">min-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">math.div(100%, 3)</td>
+<td style="text-align:left">The min-width of the images in the grid.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5314,60 +5368,6 @@
 <ul>
 <li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
 </ul>
-<h2 id="variables" tabindex="-1">Variables</h2>
-<div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
-  </div>
-</div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"gap"</span><span class="pjs-token pjs-punctuation">:</span>        3px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"min-width"</span><span class="pjs-token pjs-punctuation">:</span>  math.<span class="pjs-token pjs-function">div</span><span class="pjs-token pjs-punctuation">(</span>100%<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span>
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _image-grid.scss</li>
-<li><strong>Group:</strong> image-grid</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 13-17</li>
-<li><strong>Lines (code):</strong> 19-23</li>
-</ul>
-</details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">breakpoint</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;small&quot;</td>
-<td style="text-align:left">Sets the min breakpoint for the grid to print. This uses breakpoint.scss, so the value of this option should be a breakpoint variable from breakpoint.scss.</td>
-</tr>
-<tr>
-<td style="text-align:left">gap</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">3px</td>
-<td style="text-align:left">The gap between images in the grid.</td>
-</tr>
-<tr>
-<td style="text-align:left">min-width</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">math.div(100%, 3)</td>
-<td style="text-align:left">The min-width of the images in the grid.</td>
-</tr>
-</tbody>
-</table>
 
     </div>
   </div>