diff options
Move Panels and Empty states to Components from Layout
1 files changed, 14 insertions, 242 deletions
| -rw-r--r-- | docs/layout.html | 256 |
diff --git a/docs/layout.html b/docs/layout.html index edf206b..cb4d7c7 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -104,12 +104,6 @@ <li class="menu-item"> <a href="layout.html#navbar">Navbar</a> </li> - <li class="menu-item"> - <a href="layout.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="layout.html#empty">Empty states</a> - </li> </ul> </div> </div> @@ -145,6 +139,9 @@ <a href="components.html#chips">Chips</a> </li> <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> <a href="components.html#menus">Menus</a> </li> <li class="menu-item"> @@ -157,6 +154,9 @@ <a href="components.html#pagination">Pagination</a> </li> <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> <a href="components.html#popovers">Popovers</a> </li> <li class="menu-item"> @@ -251,8 +251,8 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="grid" class="container"> - <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> + <div class="container"> + <h3 id="grid" class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> <div class="docs-note"> <p>Layout includes flexbox based responsive grid system with 12 columns. </p> </div> @@ -361,8 +361,8 @@ </div> - <div id="responsive" class="container"> - <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> + <div class="container"> + <h3 id="responsive" class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> <div class="docs-note"> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> </div> @@ -408,7 +408,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Responsive container</h4> + <h4 id="responsive-container" class="s-subtitle">Responsive container</h4> <div class="docs-note"> <p>The responsive layout also provides fixed-width containers. Use <code>grid-xs</code>(480px), <code>grid-sm</code> (600px), <code>grid-md</code> (840px), <code>grid-lg</code> (960px) or <code>grid-xl</code> (1280px) to <code>container</code> for a fixed-width container with the specific max-width.</p> </div> @@ -422,7 +422,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Responsive visibility</h4> + <h4 id="responsive-visibility" class="s-subtitle">Responsive visibility</h4> <div class="docs-note"> <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> </div> @@ -561,8 +561,8 @@ </div> </div> - <div id="navbar" class="container"> - <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> + <div class="container"> + <h3 id="navbar" class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> <div class="docs-note"> <p>Navbar is a layout container that appears in the header of apps and websites. </p> </div> @@ -643,234 +643,6 @@ </div> - <div id="panels" class="container"> - <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> - <div class="docs-note"> - <p>Panels are flexible view container layout with auto-expand content section.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header text-center"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar" /> - </figure> - <div class="panel-title h5 mt-10">Bruce Banner</div> - <div class="panel-subtitle">THE HULK</div> - </div> - <nav class="panel-nav"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#panels"> - Profile - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Files - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Tasks - </a> - </li> - </ul> - </nav> - <div class="panel-body"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">E-mail</div> - <div class="tile-subtitle">bruce.banner@hulk.com</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> - </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Skype</div> - <div class="tile-subtitle">bruce.banner</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> - </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Location</div> - <div class="tile-subtitle">Dayton, Ohio</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> - </div> - </div> - <div class="panel-footer"> - <button class="btn btn-primary btn-block">Save</button> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header"> - <div class="panel-title h6">Comments</div> - </div> - <div class="panel-body"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-1.png" alt="Avatar" /> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Thor Odinson</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-2.png" alt="Avatar" /> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Bruce Banner</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar" data-initial="TS"></figure> - </div> - <div class="tile-content"> - <p class="tile-title">Tony Stark</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-4.png" alt="Avatar" /> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Steve Rogers</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar" /> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Natasha Romanoff</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - </div> - <div class="panel-footer"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="Hello" /> - <button class="btn btn-primary input-group-btn">Send</button> - </div> - </div> - </div> - </div> - </div> - - <div class="docs-note"> - <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> - </div> - -<!-- panels example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-header"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-title"</span>>Comments<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-nav"</span>> - <span class="com"><!-- navigation components: tabs, breadcrumbs or pagination --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-body"</span>> - <span class="com"><!-- contents --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-footer"</span>> - <span class="com"><!-- buttons or inputs --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> - - </div> - - <div id="empty" class="container"> - <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> - <div class="docs-note"> - <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-message"></i> - </div> - <p class="empty-title h5">You have no new messages</p> - <p class="empty-subtitle">Click the button to start a conversation</p> - <div class="empty-action"> - <button class="btn btn-primary">Send a message</button> - </div> - </div> - </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-mail"></i> - </div> - <p class="empty-title h5">You've successfully signed up</p> - <p class="empty-subtitle">Click the button to invite your friends</p> - <div class="empty-action"> - <button class="btn btn-primary">Invite your friends</button> - </div> - <div class="empty-action"> - <button class="btn btn-link">Skip</button> - </div> - </div> - </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-people"></i> - </div> - <p class="empty-title h5">You are not following anyone</p> - <p class="empty-subtitle">Start to meet new friends</p> - <div class="empty-action input-group input-inline"> - <input type="text" class="form-input" placeholder="" /> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </div> - </div> - </div> - - <div class="docs-note"> - <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </div> - -<!-- empty states example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> - <<span class="tag">/div</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title h5"</span>>You have no new messages<<span class="tag">/p</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-subtitle"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Send a message<<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> - - </div> - <footer class="s-footer"> <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> |