diff options
Fix examples responsive issues
1 files changed, 88 insertions, 77 deletions
| -rw-r--r-- | index.html | 165 |
@@ -93,7 +93,7 @@ <section class="notes"> <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> <h5>Install manually</h5> - <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 27KB):</p> + <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 30KB):</p> <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> <h5>Install with NPM</h5> <!-- install with npm example --> @@ -155,7 +155,7 @@ </ul> </section> <section class="notes text-center"> - <div class="btn-group"> + <div class="btn-group is-scrollable"> <a href="#typography" class="btn btn-primary">typography</a> <a href="#tables" class="btn btn-primary">tables</a> <a href="#buttons" class="btn btn-primary">buttons</a> @@ -220,7 +220,7 @@ <header class="text-center"><h5>lists</h5></header> <div class="columns"> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <ul class="list"> <li>list item 1</li> <li>list item 2 @@ -233,7 +233,7 @@ <li>list item 3</li> </ul> </div> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <ol class="list"> <li>list item 1</li> <li>list item 2 @@ -246,7 +246,7 @@ <li>list item 3</li> </ol> </div> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <dl class="list"> <dt>description list term 1</dt> <dd>description list description 1</dd> @@ -360,15 +360,15 @@ </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <button class="btn">default button</button> <button class="btn loading">default button</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary">primary button</button> <button class="btn btn-primary loading">primary button</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-link">link button</button> <button class="btn btn-link loading">link button</button> </div> @@ -392,13 +392,13 @@ </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <button class="btn disabled">default button</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary" disabled>primary button</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-link" disabled>link button</button> </div> </div> @@ -406,12 +406,12 @@ <header class="text-center"><h5>button sizes</h5></header> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-lg">large button</button> <button class="btn">normal button</button> <button class="btn btn-sm">small button</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-block">block button</button> </div> </div> @@ -447,14 +447,14 @@ <header class="text-center"><h5>button groups</h5></header> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="btn-group"> <button class="btn">first button</button> <button class="btn">second button</button> <button class="btn">third button</button> </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="btn-group btn-group-block"> <button class="btn btn-primary">first button</button> <button class="btn btn-primary">second button</button> @@ -463,14 +463,14 @@ </div> </div> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="btn-group"> <button class="btn btn-sm active">first button</button> <button class="btn btn-sm">second button</button> <button class="btn btn-sm">third button</button> </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="btn-group btn-group-block"> <button class="btn btn-primary active">first button</button> <button class="btn btn-primary">second button</button> @@ -500,7 +500,7 @@ <p></p> </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <form action="#forms"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> @@ -717,7 +717,7 @@ </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <form action="#forms"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> @@ -785,19 +785,19 @@ <header class="text-center"><h5>input groups</h5></header> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon">slack.com/</span> <input type="text" class="form-input" placeholder="site name" /> </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="input-group"> <input type="text" class="form-input" placeholder="username" /> <span class="input-group-addon">@slack.com</span> </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon">slack.com/</span> <input type="text" class="form-input" placeholder="site name" /> @@ -806,13 +806,13 @@ </div> </div> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <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="column col-xs-12"> <div class="input-group"> <input type="text" class="form-input input-lg" placeholder="username" /> <span class="input-group-addon addon-lg">@slack.com</span> @@ -879,7 +879,7 @@ <p><strong>Media</strong> include responsive image and video class. </p> </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> </div> </div> @@ -887,7 +887,7 @@ <p>Add the class <code>img-responsive</code> to <img> elements. The images will scale with the parent sizes.</p> </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <div class="video-responsive"> <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe> </div> @@ -934,7 +934,7 @@ </ul> </section> <section class="notes text-center"> - <div class="btn-group"> + <div class="btn-group is-scrollable"> <a href="#grid" class="btn btn-primary">flexbox grid</a> <a href="#responsive" class="btn btn-primary">responsive</a> <a href="#empty" class="btn btn-primary">empty states</a> @@ -1022,10 +1022,10 @@ </div> <section class="notes"> - <p>Add the class <code>col-multiline</code> to have a multiline grid.</p> + <p>By default, Spectre grid has multi-line flexbox enabled. You can add the class <code>col-oneline</code> to <code>columns</code> to make all its child columns positioned in the same single row.</p> </section> - <div class="columns col-multiline"> + <div class="columns col-oneline"> <div class="column col-8"> <div class="bg-grey">col-8</div> </div> @@ -1133,7 +1133,7 @@ <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p> </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <section class="empty"> <i class="icon icon-markunread"></i> <p class="empty-title">You have no new messages</p> @@ -1141,7 +1141,7 @@ <button class="empty-action btn btn-primary">Send a message</button> </section> </div> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <section class="empty"> <i class="icon icon-people"></i> <p class="empty-title">You are not following anyone</p> @@ -1195,7 +1195,7 @@ </ul> </section> <section class="notes text-center"> - <div class="btn-group"> + <div class="btn-group is-scrollable"> <a href="#avatars" class="btn btn-primary">avatars</a> <a href="#chips" class="btn btn-primary">chips</a> <a href="#autocomplete" class="btn btn-primary">autocomplete</a> @@ -1216,7 +1216,7 @@ <p><strong>Avatars</strong> are user profile pictures. </p> </section> <div class="columns"> - <div class="column col-3"> + <div class="column col-4 col-xs-12"> <figure class="avatar avatar-xl"> <img src="demo/img/avatar-1.png" /> </figure> @@ -1233,7 +1233,7 @@ <img src="demo/img/avatar-5.png" /> </figure> </div> - <div class="column col-3"> + <div class="column col-4 col-xs-12"> <figure class="avatar avatar-xl"> <img src="demo/img/avatar-1.png" /> <img src="demo/img/avatar-2.png" class="avatar-icon" /> @@ -1256,29 +1256,40 @@ </figure> </div> - <div class="column col-3"> + <div class="column col-4 col-xs-12"> <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></figure> - <figure class="avatar" data-initial="YZ" style="background-color: #7983d2;"></figure> - <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> + <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> </div> + </div> - <div class="column col-3"> + <section class="notes"> + <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> + <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> + </section> + + <div class="columns"> + <div class="column"> <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;"> + <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"> <img src="demo/img/avatar-2.png" /> </figure> + <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"> + <img src="demo/img/avatar-3.png" /> + </figure> + <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"> + <img src="demo/img/avatar-4.png" /> + </figure> + <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"> + <img src="demo/img/avatar-5.png" /> + </figure> </div> </div> - <section class="notes"> - <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> - <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> - </section> - <!-- avatars example --> <pre class="code lang-html"> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> @@ -1306,7 +1317,7 @@ <p><strong>Chips</strong> are complex entities in small blocks. </p> </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="chip-sm"> <span class="chip-name">Crime</span> <button class="btn btn-clear"></button> @@ -1325,7 +1336,7 @@ <button class="btn btn-clear"></button> </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="chip-sm"> <img src="demo/img/avatar-1.png" class="avatar" /> <span class="chip-name">Tony Stark</span> @@ -1376,7 +1387,7 @@ <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> </section> <div class="columns"> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> <div class="form-autocomplete-input"> @@ -1409,7 +1420,7 @@ </div> </div> </div> - <div class="form-group"> + <div class="form-group col-xs-12"> <div class="form-autocomplete"> <div class="form-autocomplete-input"> <div class="chip-sm"> @@ -1437,7 +1448,7 @@ </div> </div> </div> - <div class="column col-6"> + <div class="column col-6 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> <div class="form-autocomplete-input"> @@ -1537,16 +1548,16 @@ <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> </section> <div class="columns text-center"> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button> </div> - <div class="column"> + <div class="column col-xs-12"> <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button> </div> </div> @@ -1569,22 +1580,22 @@ <p><strong>Badges</strong> are often used as unread number indicators.</p> </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-6"> <span class="badge" data-badge="1"> Notifications </span> </div> - <div class="column"> + <div class="column col-xs-6"> <span class="badge" data-badge="99"> Notifications </span> </div> - <div class="column"> + <div class="column col-xs-6"> <span class="badge" data-badge="999"> Notifications </span> </div> - <div class="column"> + <div class="column col-xs-6"> <span class="badge" data-badge="♀"> Notifications </span> @@ -1609,13 +1620,13 @@ <p><strong>Toasts</strong> are used to show alert or information to users.</p> </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="toast"> <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="toast toast-primary"> <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -1623,13 +1634,13 @@ </div> </div> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <div class="toast toast-success"> <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> - <div class="column"> + <div class="column col-xs-12"> <div class="toast toast-danger"> <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -1663,7 +1674,7 @@ <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> </section> <div class="columns"> - <div class="column"> + <div class="column col-xs-6"> <ul class="menu"> <li class="menu-item"> <div class="chip"> @@ -1696,7 +1707,7 @@ </li> </ul> </div> - <div class="column"> + <div class="column col-xs-6"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -1718,7 +1729,7 @@ </li> </ul> </div> - <div class="column"> + <div class="column col-xs-6"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -1785,7 +1796,7 @@ <section id="navigation" class="container grid-960"> <header class="text-center"><h4>navigation</h4></header> <section class="notes"> - <p><strong>Navigation</strong> includes several components, including breadcrumbs and tabs.</p> + <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs and pagination.</p> </section> <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header> <div class="columns"> @@ -1836,7 +1847,7 @@ <header id="tabs" class="text-center"><h5>tabs</h5></header> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <ul class="tab"> <li class="tab-item active"> <a href="#tabs"> @@ -1860,7 +1871,7 @@ </li> </ul> </div> - <div class="column"> + <div class="column col-xs-12"> <ul class="tab tab-block"> <li class="tab-item active"> <a href="#tabs"> @@ -1915,7 +1926,7 @@ <<span class="tag">/ul</span>> </pre> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <ul class="tab"> <li class="tab-item active"> <a href="#tabs" class="badge" data-badge="9"> @@ -1939,7 +1950,7 @@ </li> </ul> </div> - <div class="column"> + <div class="column col-xs-12"> <ul class="tab tab-block"> <li class="tab-item active"> <a href="#tabs" class="badge" data-badge="9"> @@ -1981,7 +1992,7 @@ <header id="pagination" class="text-center"><h5>pagination</h5></header> <div class="columns"> - <div class="column"> + <div class="column col-xs-12"> <ul class="pagination"> <li class="page-item"> <a href="#pagination"> @@ -2026,7 +2037,7 @@ </li> </ul> </div> - <div class="column"> + <div class="column col-xs-12"> <ul class="pagination"> <li class="page-item"> <a href="#pagination" class="disabled"> @@ -2255,7 +2266,7 @@ <p><strong>Cards</strong> are flexible content containers.</p> </section> <div class="columns"> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <div class="card"> <div class="card-image"> <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" /> @@ -2272,7 +2283,7 @@ </div> </div> </div> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Apple</h4> @@ -2293,7 +2304,7 @@ </div> </div> </div> - <div class="column col-4"> + <div class="column col-4 col-xs-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Google</h4> @@ -2359,7 +2370,7 @@ </ul> </section> <section class="notes text-center"> - <div class="btn-group"> + <div class="btn-group is-scrollable"> <a href="#position" class="btn btn-primary">position</a> <a href="#display" class="btn btn-primary">display</a> <a href="#text" class="btn btn-primary">text</a> |