diff options
Add mobile responsive support
1 files changed, 35 insertions, 19 deletions
| -rw-r--r-- | docs/components.html | 54 |
diff --git a/docs/components.html b/docs/components.html index 8ea64c9..ea1bbdf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -12,18 +12,21 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="container"> + <div class="s-container container"> <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css" /> - <h2>Spectre.css</h2> - </a> + <div class="s-brand"> + <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" > + <img src="img/spectre-logo.svg" alt="Spectre.css"/> + <h2>Spectre.css</h2> + </a> + <div class="menu-btn"> + <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> + </div> + <div id="sidebar" class="s-sidebar"> <div class="s-nav"> <div class="accordion"> <div class="accordion-item"> @@ -247,7 +250,7 @@ </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-content"> + <div id="content" class="s-content"> <div id="accordions" class="container"> <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> <div class="notes"> @@ -1052,7 +1055,7 @@ <p>Menus are vertical list of links or buttons for actions and navigation.</p> </div> <div class="columns"> - <div class="column col-xs-12"> + <div class="column col-4 col-xs-12"> <ul class="menu"> <li class="menu-item"> <div class="tile tile-centered"> @@ -1085,8 +1088,8 @@ </li> </ul> </div> - <div class="column col-xs-12"> - <ul class="menu menu-nav"> + <div class="column col-4 col-xs-12"> + <ul class="menu"> <li class="divider" data-content="LINKS"></li> <li class="menu-item"> <a href="#menus">Slack</a> @@ -1099,9 +1102,22 @@ </li> </ul> </div> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <a href="#menus">Slack</a> + </li> + <li class="menu-item"> + <a href="#menus">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#menus">Skype</a> + </li> + </ul> + </div> </div> <div class="notes"> - <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> </div> <!-- menus example --> @@ -1209,7 +1225,7 @@ <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> </div> <div class="notes"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code>.</p> + <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> </div> <!-- dropdowns example --> @@ -1318,7 +1334,7 @@ </div> <div class="modal-body"> <div class="content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. </div> </div> <div class="modal-footer"> @@ -1596,7 +1612,7 @@ <div class="popover-container"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> @@ -1617,7 +1633,7 @@ <div class="popover-container"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> @@ -1638,7 +1654,7 @@ <div class="popover-container"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> @@ -1659,7 +1675,7 @@ <div class="popover-container"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> @@ -2141,7 +2157,7 @@ </div> <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> <p>Designed and built with ♥ 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> </footer> |