From 2e7a00c2da0c7e0ad0619fd4437e5cafa74e89f2 Mon Sep 17 00:00:00 2001
From: Kennedy Baird <kennedybaird@gmail.com>
Date: Tue, 8 Aug 2017 01:52:27 +0700
Subject: [PATCH] doc update for responsive alignment (when deploy 0.5.1)
 (#1021)

* doc update for responsive alignment (when deploy 0.5.1)

doc update for commit for responsive text alignment

https://github.com/jgthms/bulma/commit/010b6d70a0e4baff1554b7c6406e71fd64881ca1

* update docs for responsive text alignment

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

thanks
---
 .../modifiers/typography-helpers.html         | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)

diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index eefacd74..408df530 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -47,6 +47,12 @@ doc-subtab: typography-helpers
 </td>
 {% endcapture %}
 
+{% capture left %}
+<td class="is-narrow">
+  <p class="notification is-success">left-aligned</p>
+</td>
+{% endcapture %}
+
 {% include subnav-modifiers.html %}
 
 <section class="section">
@@ -268,6 +274,99 @@ doc-subtab: typography-helpers
 
     <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>
 
     <div class="content">