77 lines
1.8 KiB
HTML
77 lines
1.8 KiB
HTML
---
|
|
data:
|
|
type: hash
|
|
locale:
|
|
type: string
|
|
i18n:
|
|
type: hash
|
|
---
|
|
{% for font in data.bootstrap.fonts %}
|
|
{%- assign slug = font | slugify -%}
|
|
<section class="font-{{ slug }} mt-5">
|
|
<header>
|
|
<h3>
|
|
<code>font-{{ slug }}</code> {{ i18n.lorem_ipsum.five_words }}
|
|
</h3>
|
|
|
|
<p class="lead">
|
|
<code>font-{{ slug }}</code> is a utility class you can use when you want an element to use the {{ font }} font
|
|
family.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<p>
|
|
<em>
|
|
{{- i18n.lorem_ipsum.twenty_words -}}
|
|
</em>
|
|
</p>
|
|
|
|
<p>
|
|
<strong>
|
|
{{- i18n.lorem_ipsum.twenty_words -}}
|
|
</strong>
|
|
</p>
|
|
|
|
<p>{{- i18n.lorem_ipsum.one_paragraph -}}</p>
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|
|
|
|
{% for font_family in data.bootstrap.variables.font_families %}
|
|
<section class="font-family-{{ font_family[0] }} mt-5">
|
|
<header>
|
|
<h3>
|
|
<code>font-{{ font_family[0] }}</code> {{ i18n.lorem_ipsum.five_words }}
|
|
</h3>
|
|
|
|
<p class="lead">
|
|
<code>font-{{ font_family[0] }}</code> is a utility class you can use when you want an element to use the
|
|
{{ font_family[1] }} font family.
|
|
</p>
|
|
|
|
<p class="lead">
|
|
Since it's a generically named utility, you can redefine the font family by changing it on
|
|
<code>_data/bootstrap/variables.yml</code>, or add more, even. This is useful for themes, since you can allow
|
|
users to customize the font families.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<p>
|
|
<em>
|
|
{{- i18n.lorem_ipsum.twenty_words -}}
|
|
</em>
|
|
</p>
|
|
|
|
<p>
|
|
<strong>
|
|
{{- i18n.lorem_ipsum.twenty_words -}}
|
|
</strong>
|
|
</p>
|
|
|
|
<p>{{- i18n.lorem_ipsum.one_paragraph -}}</p>
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|