mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Added typography examples (#3240)
* Added examples for each text transformation helper * Updated typography to reflect the text weights in examples * Added examples to each size helper Co-authored-by: Whit Waldo <whit.waldo@innovian.net>
This commit is contained in:
parent
3ceb3213a7
commit
157b64a566
@ -71,6 +71,9 @@ breadcrumb:
|
||||
<th>
|
||||
Font-size
|
||||
</th>
|
||||
<th>
|
||||
Size
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -79,6 +82,7 @@ breadcrumb:
|
||||
{% assign key = '$size-' | append: forloop.index %}
|
||||
<td><code>is-size-{{ forloop.index }}</code></td>
|
||||
<td><code>{{ initial_vars[key].value }}</code></td>
|
||||
<td><span class="{{ initial_vars[key].value }}">Example</span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@ -316,19 +320,19 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <span class="is-capitalized">uppercase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-lowercase">lowercase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-uppercase">uppercase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-italic">italic</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -355,23 +359,23 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <strong>light</strong></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <strong>normal</strong></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-medium</code></td>
|
||||
<td>Transforms text weight to <strong>medium</strong></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <strong>semi-bold</strong></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <strong>bold</strong></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
Loading…
Reference in New Issue
Block a user