library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc update for responsive alignment (when deploy 0.5.1) (#1021)

Browse Source 
* doc update for responsive alignment (when deploy 0.5.1)

doc update for commit for responsive text alignment

010b6d70a0

* update docs for responsive text alignment

changed for a table, let me know if this is good!

thanks
This commit is contained in:
Kennedy Baird 2017-08-08 01:52:27 +07:00 committed by Jeremy Thomas
parent 23515e16a6
commit 2e7a00c2da
1 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
docs/documentation/modifiers/typography-helpers.html
View File

@ -47,6 +47,12 @@ doc-subtab: typography-helpers
</td> </td>
{% endcapture %} {% endcapture %}
{% capture left %}
<td class="is-narrow">
<p class="notification is-success">left-aligned</p>
</td>
{% endcapture %}
{% include subnav-modifiers.html %} {% include subnav-modifiers.html %}
<section class="section"> <section class="section">
@ -268,6 +274,99 @@ doc-subtab: typography-helpers
<hr> <hr>
<h3 class="title">Responsive Alignment</h3>
<div class="content">
<p>
You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
</p>
<p>
For example, here are the modifiers for <code>.has-text-left</code>:
</p>
</div>
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td><code>has-text-left-mobile</code></td>
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-tablet</code></td>
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-tablet-only</code></td>
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-touch</code></td>
{{ left }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-desktop-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-widescreen-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
</tr>
</tbody>
</table>
</div>
<hr>
<h3 class="title">Text transformation</h3> <h3 class="title">Text transformation</h3>
<div class="content"> <div class="content">