Merge pull request #101 from picturepan2/hotfix/fixes v0.1.26

Hotfix/fixes

1 files changed, 45 insertions, 19 deletions

diff --git a/index.html b/index.html
index 35af433..ba1c044 100644
--- a/index.html
+++ b/index.html
@@ -383,6 +383,22 @@
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
 </pre>
 
+            <section class="notes">
+                <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p>
+            </section>
+
+            <div class="columns">
+                <div class="column">
+                    <button class="btn disabled">default button</button>
+                </div>
+                <div class="column">
+                    <button class="btn btn-primary" disabled>primary button</button>
+                </div>
+                <div class="column">
+                    <button class="btn btn-link" disabled>link button</button>
+                </div>
+            </div>
+
             <header class="text-center"><h5>button sizes</h5></header>
 
             <div class="columns">
@@ -915,11 +931,6 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column col-9">
-                    <div class="bg-grey">col-9 (75%)</div>
-                </div>
-            </div>
-            <div class="columns">
                 <div class="column col-6">
                     <div class="bg-grey">col-6 (50%)</div>
                 </div>
@@ -978,14 +989,14 @@
 
         <section id="responsive" class="container grid-960">
             <header class="text-center"><h4>responsive grid</h4></header>
-            <div class="columns">
-                <div class="column col-md-6">
+            <div class="columns col-multiline">
+                <div class="column col-md-6 col-xs-12">
                     <div class="bg-grey">col-md-6</div>
                 </div>
-                <div class="column col-md-3">
+                <div class="column col-md-3 col-xs-12">
                     <div class="bg-grey">col-md-3</div>
                 </div>
-                <div class="column col-md-3">
+                <div class="column col-md-3 col-xs-12">
                     <div class="bg-grey">col-md-3</div>
                 </div>
             </div>
@@ -1015,12 +1026,13 @@
             </div>
 
             <section class="notes">
-                <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code> and <code>.col-md-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
+                <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code>, <code>.col-md-[1-12]</code> and <code>.col-lg-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
                 <ul>
                     <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li>
-                    <li><code>col-xs-[1-12]</code> apply to window width greater than or equal to <strong>481px</strong>. </li>
-                    <li><code>col-sm-[1-12]</code> apply to window width greater than or equal to <strong>601px</strong>. </li>
-                    <li><code>col-md-[1-12]</code> apply to window width greater than or equal to <strong>841px</strong>. </li>
+                    <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li>
+                    <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li>
+                    <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li>
+                    <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li>
                 </ul>
             </section>
 
@@ -1038,11 +1050,11 @@
             <section class="notes">
                 <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p>
                 <ul>
-                    <li><code>hide-xs</code> hides elements when the viewport is smaller than or equal to <strong>480px</strong>. </li>
-                    <li><code>hide-sm</code> hides elements when the viewport is smaller than or equal to <strong>600px</strong>. </li>
-                    <li><code>hide-md</code> hides elements when the viewport is smaller than or equal to <strong>840px</strong>. </li>
-                    <li><code>hide-lg</code> hides elements when the viewport is smaller than or equal to <strong>960px</strong>. </li>
-                    <li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li>
+                    <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li>
+                    <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li>
+                    <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li>
+                    <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li>
+                    <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li>
                 </ul>
                 <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code> or online.</p>
                 <p><a href="http://picturepan2.github.io/spectre/tools/resizer/" target="_blank" class="btn btn-primary">Responsive Resizer</a></p>
@@ -1186,6 +1198,15 @@
                     <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></figure>
                     <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></figure>
                 </div>
+
+                <div class="column col-3">
+                    <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
+                      <img src="demo/img/avatar-1.png" />
+                    </figure>
+                    <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;">
+                      <img src="demo/img/avatar-2.png" />
+                    </figure>
+                </div>
             </div>
 
             <section class="notes">
@@ -1205,6 +1226,11 @@
 &lt;<span class="tag">/figure</span>&gt;
 
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
+
+<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
+&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;
+    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
+&lt;<span class="tag">/figure</span>&gt;
 </pre>
 
         </section>
@@ -2451,7 +2477,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer container grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.25
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.26
             </p>
             <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>