diff options
1 files changed, 59 insertions, 7 deletions
| -rw-r--r-- | index.html | 66 |
@@ -73,8 +73,7 @@ <li>flexbox, responsive and mobile-friendly layout</li> <li>carefully designed elements</li> <li>built in useful components and utilities</li> - <li>patterns and html templates <span class="label label-primary">soon</span></li> - <li>email templates <span class="label label-primary">soon</span></li> + <li>responsive email templates <span class="label label-primary">soon</span></li> </ul> </section> <section class="notes text-center"> @@ -664,7 +663,6 @@ </pre> <section class="notes"> - <p>For smaller input and select controls, you could add <code>input-sm</code> and <code>select-sm</code> to the elements.</p> <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. Please note <code>form-horizontal</code> only works in viewports that are at least 840px wide.</p> </section> @@ -698,6 +696,34 @@ <<span class="tag">/form</span>> </pre> + <section class="notes"> + <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p> + </section> + + <div class="columns"> + <div class="column"> + <input class="form-input input-sm" type="text" placeholder="Name" /> + </div> + <div class="column"> + <input class="form-input input-lg" type="text" placeholder="Name" /> + </div> + <div class="column"> + <select class="form-select select-sm"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + + <select class="form-select select-lg"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <header class="text-center"><h5>input groups</h5></header> <div class="columns"> <div class="column"> @@ -720,17 +746,42 @@ </div> </div> </div> + <div class="columns"> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon addon-sm">slack.com/</span> + <input type="text" class="form-input input-sm" placeholder="site name" /> + </div> + </div> + <div class="column"> + <div class="input-group"> + <input type="text" class="form-input input-lg" placeholder="username" /> + <span class="input-group-addon addon-lg">@slack.com</span> + </div> + </div> + <div class="column"> + + </div> + </div> <section class="notes"> <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> </section> <!-- input groups example --> <pre class="code lang-html"> +<span class="com"><!-- normal input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> <<span class="tag">/div</span>> +<span class="com"><!-- large input group --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>slack.com/<<span class="tag">/span</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> +<<span class="tag">/div</span>> + +<span class="com"><!-- normal input group with button --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> @@ -932,7 +983,7 @@ </div> <section class="notes"> - <p>Spectre also 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> and <code>.col-md-[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> @@ -961,6 +1012,7 @@ <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> </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 <a href="http://picturepan2.github.io/spectre/tools/resizer/" target="_blank">online</a>.</p> </section> </section> @@ -977,7 +1029,7 @@ <a href="#navbar" class="navbar-brand">Spectre.css</a> </section> <section class="navbar-section"> - <input class="form-input form-inline" type="text" placeholder="search" /> + <input class="form-input input-inline" type="text" placeholder="search" /> <a href="#navbar" class="btn btn-link">documents</a> <a href="#navbar" class="btn btn-link">login</a> <a href="#navbar" class="btn btn-primary">signup</a> @@ -993,7 +1045,7 @@ <a href="#navbar" class="navbar-brand">Spectre.css</a> </section> <section class="navbar-section"> - <input class="form-input form-inline" type="text" placeholder="search" /> + <input class="form-input input-inline" type="text" placeholder="search" /> <figure class="avatar ml-10 mr-10"> <img src="demo/img/avatar-4.png" /> </figure> @@ -2426,7 +2478,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.20 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.21 </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> |