diff options
1 files changed, 45 insertions, 19 deletions
| -rw-r--r-- | index.html | 64 |
@@ -383,6 +383,22 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </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 @@ <<span class="tag">/figure</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> + +<span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> +<<span class="tag">/figure</span>> </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> |