|
@@ -1,7 +1,6 @@
|
|
|
---
|
|
---
|
|
|
title: Typography helpers
|
|
title: Typography helpers
|
|
|
layout: documentation
|
|
layout: documentation
|
|
|
-hide_categories: true
|
|
|
|
|
doc-tab: modifiers
|
|
doc-tab: modifiers
|
|
|
doc-subtab: typography-helpers
|
|
doc-subtab: typography-helpers
|
|
|
breadcrumb:
|
|
breadcrumb:
|
|
@@ -12,7 +11,7 @@ breadcrumb:
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
|
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
|
|
-{% assign sizes = site.data.variables.utilities.derived-variables.by_name.sizes.value | split: ' ' %}
|
|
|
|
|
|
|
+{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
|
|
|
|
|
|
|
|
{% capture thead %}
|
|
{% capture thead %}
|
|
|
<thead>
|
|
<thead>
|
|
@@ -77,7 +76,8 @@ breadcrumb:
|
|
|
<tbody>
|
|
<tbody>
|
|
|
{% for size in sizes %}
|
|
{% for size in sizes %}
|
|
|
<tr>
|
|
<tr>
|
|
|
- {% assign key = 'size-' | append: forloop.index %}
|
|
|
|
|
|
|
+ {% assign key = '$size-' | append: forloop.index %}
|
|
|
|
|
+
|
|
|
<td><code>is-size-{{ forloop.index }}</code></td>
|
|
<td><code>is-size-{{ forloop.index }}</code></td>
|
|
|
<td><code>{{ initial_vars[key].value }}</code></td>
|
|
<td><code>{{ initial_vars[key].value }}</code></td>
|
|
|
</tr>
|
|
</tr>
|
|
@@ -96,9 +96,7 @@ breadcrumb:
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
-{% include layout/main-close.html show_categories=true %}
|
|
|
|
|
|
|
|
|
|
-<div class="container">
|
|
|
|
|
<div class="table-container">
|
|
<div class="table-container">
|
|
|
<table class="table is-bordered">
|
|
<table class="table is-bordered">
|
|
|
{{ thead }}
|
|
{{ thead }}
|
|
@@ -154,9 +152,7 @@ breadcrumb:
|
|
|
</tbody>
|
|
</tbody>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
-</div>
|
|
|
|
|
|
|
|
|
|
-{% include layout/main-open.html %}
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
<div class="content">
|
|
|
<p>
|
|
<p>
|
|
@@ -257,9 +253,7 @@ breadcrumb:
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
-{% include layout/main-close.html %}
|
|
|
|
|
|
|
|
|
|
-<div class="container">
|
|
|
|
|
<div class="table-container">
|
|
<div class="table-container">
|
|
|
<table class="table is-bordered">
|
|
<table class="table is-bordered">
|
|
|
{{ thead }}
|
|
{{ thead }}
|
|
@@ -339,9 +333,7 @@ breadcrumb:
|
|
|
</tbody>
|
|
</tbody>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
-</div>
|
|
|
|
|
|
|
|
|
|
-{% include layout/main-open.html %}
|
|
|
|
|
|
|
|
|
|
{% include elements/anchor.html name="Text transformation" %}
|
|
{% include elements/anchor.html name="Text transformation" %}
|
|
|
|
|
|
Jeremy Thomas