diff options
Move Panels and Empty states to Components from Layout
8 files changed, 418 insertions, 410 deletions
| -rw-r--r-- | docs/components.html | 334 | ||||
| -rw-r--r-- | docs/css/docs.css | 1 | ||||
| -rw-r--r-- | docs/elements.html | 84 | ||||
| -rw-r--r-- | docs/experimentals.html | 54 | ||||
| -rw-r--r-- | docs/getting-started.html | 50 | ||||
| -rw-r--r-- | docs/layout.html | 256 | ||||
| -rw-r--r-- | docs/src/docs.less | 1 | ||||
| -rw-r--r-- | docs/utilities.html | 48 |
diff --git a/docs/components.html b/docs/components.html index 3143683..c87bd8e 100644 --- a/docs/components.html +++ b/docs/components.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="accordions" class="container"> - <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> + <div class="container"> + <h3 id="accordions" class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> <div class="docs-note"> <p>Accordions are used to toggle sections of content.</p> </div> @@ -402,8 +402,8 @@ </div> - <div id="autocomplete" class="container"> - <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> + <div class="container"> + <h3 id="autocomplete" class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> <div class="docs-note"> <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> </div> @@ -529,8 +529,8 @@ </div> - <div id="avatars" class="container"> - <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> + <div class="container"> + <h3 id="avatars" class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> <div class="docs-note"> <p>Avatars are user profile pictures. </p> </div> @@ -610,8 +610,8 @@ </div> - <div id="badges" class="container"> - <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> + <div class="container"> + <h3 id="badges" class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> <div class="docs-note"> <p>Badges are often used as unread number indicators.</p> </div> @@ -686,8 +686,8 @@ </div> - <div id="bars" class="container"> - <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> + <div class="container"> + <h3 id="bars" class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> <div class="docs-note"> <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> </div> @@ -732,7 +732,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Slider bars</h4> + <h4 id="bars-slider" class="s-subtitle">Slider bars</h4> <div class="columns"> <div class="column col-8 col-xs-12"> <div class="bar bar-slider"> @@ -781,8 +781,8 @@ </div> - <div id="breadcrumbs" class="container"> - <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <div class="container"> + <h3 id="breadcrumbs" class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> <div class="docs-note"> <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> </div> @@ -861,8 +861,8 @@ </div> - <div id="cards" class="container"> - <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> + <div class="container"> + <h3 id="cards" class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> <div class="docs-note"> <p>Cards are flexible content containers.</p> </div> @@ -991,8 +991,8 @@ </div> - <div id="chips" class="container"> - <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> + <div class="container"> + <h3 id="chips" class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> <div class="docs-note"> <p>Chips are complex entities in small blocks. </p> </div> @@ -1049,8 +1049,75 @@ </div> - <div id="menus" class="container"> - <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> + <div class="container"> + <h3 id="empty" 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> + + <div class="container"> + <h3 id="menus" class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> <div class="docs-note"> <p>Menus are vertical list of links or buttons for actions and navigation.</p> </div> @@ -1260,8 +1327,8 @@ </div> - <div id="modals" class="container"> - <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> + <div class="container"> + <h3 id="modals" class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> <div class="docs-note"> <p>Modals are flexible dialog prompts.</p> </div> @@ -1322,7 +1389,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Modal sizes</h4> + <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4> <div class="columns"> <div class="column col-6 col-xs-12"> <div class="modal-temp modal-sm"> @@ -1396,8 +1463,8 @@ </div> - <div id="pagination" class="container"> - <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> + <div class="container"> + <h3 id="pagination" class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> <div class="column col-xs-12"> <ul class="pagination"> @@ -1491,14 +1558,14 @@ <ul class="pagination"> <li class="page-item page-prev"> <a href="#pagination"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Getting started</h4> + <div class="page-item-subtitle">Previous</div> + <div class="page-item-title h5">Getting started</div> </a> </li> <li class="page-item page-next"> <a href="#pagination"> - <p class="page-item-subtitle">Next</p> - <h4 class="page-item-title">Layout</h4> + <div class="page-item-subtitle">Next</div> + <div class="page-item-title h5">Layout</div> </a> </li> </ul> @@ -1512,14 +1579,14 @@ <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Previous<<span class="tag">/p</span>> - <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Getting started<<span class="tag">/h3</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Previous<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-title h5"</span>>Getting started<<span class="tag">/div</span>> <<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-next"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Next<<span class="tag">/p</span>> - <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Layout<<span class="tag">/h3</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Next<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-title h5"</span>>Layout<<span class="tag">/div</span>> <<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">/ul</span>> @@ -1527,8 +1594,169 @@ </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="container"> + <h3 id="panels" class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> + <div class="docs-note"> + <p>Panels are flexible view container 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 class="container"> + <h3 id="navs" class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> <div class="columns"> <div class="column col-6 col-xs-12"> <ul class="nav"> @@ -1598,8 +1826,8 @@ </div> - <div id="popovers" class="container"> - <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> + <div class="container"> + <h3 id="popovers" class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="docs-note"> <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> </div> @@ -1715,8 +1943,8 @@ </div> - <div id="steps" class="container"> - <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> + <div class="container"> + <h3 id="steps" class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> <div class="docs-note"> <p>Steps are progress indicators of a sequence of task steps.</p> </div> @@ -1777,8 +2005,8 @@ </div> - <div id="tabs" class="container"> - <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> + <div class="container"> + <h3 id="tabs" class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> <div class="docs-note"> <p>Tabs enable quick switch between different views.</p> </div> @@ -1957,8 +2185,8 @@ </div> - <div id="tiles" class="container"> - <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> + <div class="container"> + <h3 id="tiles" class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> <div class="docs-note"> <p>Tiles are repeatable or embeddable information blocks.</p> </div> @@ -2020,7 +2248,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Compact tiles</h4> + <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4> <div class="docs-note"> <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> @@ -2065,8 +2293,8 @@ </div> - <div id="toasts" class="container"> - <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> + <div class="container"> + <h3 id="toasts" class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> <div class="docs-note"> <p>Toasts are used to show alert or information to users.</p> </div> @@ -2125,8 +2353,8 @@ </div> - <div id="tooltips" class="container"> - <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> + <div class="container"> + <h3 id="tooltips" class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> <div class="docs-note"> <p>Tooltips provide context information labels that appear on hover and focus.</p> </div> diff --git a/docs/css/docs.css b/docs/css/docs.css index 4a05927..dfe213e 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -405,6 +405,7 @@ } .s-content .s-title, .s-content .s-subtitle { + padding-top: 5rem; position: static; } .s-content .s-title::before, diff --git a/docs/elements.html b/docs/elements.html index a677bea..763393a 100644 --- a/docs/elements.html +++ b/docs/elements.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,12 +251,12 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="typography" class="container"> - <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> + <div class="container"> + <h3 id="typography" class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> <div class="docs-note"> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </div> - <h4 class="s-subtitle">Headings</h4> + <h4 id="typography-headings" class="s-subtitle">Headings</h4> <div class="columns"> <div class="column col-12"> <h1>H1 Heading <small class="label">40px</small></h1> @@ -284,7 +284,7 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> </code></pre> - <h4 class="s-subtitle">Paragraphs</h4> + <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4> <div class="docs-note"> <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> @@ -295,7 +295,7 @@ <<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> - <h4 class="s-subtitle">Semantic text elements</h4> + <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <abbr title="Internationalization">I18N</abbr> @@ -374,7 +374,7 @@ </div> </div> - <h4 class="s-subtitle">Optimized for east asian fonts</h4> + <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4> <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> <div class="docs-note"> <h6>Chinese (Simplified)</h6> @@ -409,7 +409,7 @@ <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> - <h4 class="s-subtitle">Blockquote</h4> + <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4> <blockquote> <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> <cite>- Bill Gates</cite> @@ -422,7 +422,7 @@ <<span class="tag">/blockquote</span>> </code></pre> - <h4 class="s-subtitle">Lists</h4> + <h4 id="typography-lists" class="s-subtitle">Lists</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <ul class="list"> @@ -485,8 +485,8 @@ </div> - <div id="tables" class="container"> - <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> + <div class="container"> + <h3 id="tables" class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> <div class="docs-note"> <p>Tables include default styles for tables and data sets.</p> </div> @@ -547,8 +547,8 @@ </div> - <div id="buttons" class="container"> - <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> + <div class="container"> + <h3 id="buttons" class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> <div class="docs-note"> <p>Buttons include simple button styles for actions in different types and sizes. </p> </div> @@ -601,7 +601,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> - <h4 class="s-subtitle">Button sizes</h4> + <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> @@ -649,7 +649,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> - <h4 class="s-subtitle">Button groups</h4> + <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="btn-group"> @@ -696,8 +696,8 @@ </div> - <div id="forms" class="container"> - <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> + <div class="container"> + <h3 id="forms" class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> <div class="docs-note"> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> </div> @@ -809,7 +809,7 @@ <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> </div> - <h4 class="s-subtitle">Horizontal forms</h4> + <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4> <div class="docs-note"> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> </div> @@ -908,7 +908,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="s-subtitle">Form sizes</h4> + <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4> <div class="docs-note"> <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> </div> @@ -945,7 +945,7 @@ </div> </div> - <h4 class="s-subtitle">Form icons</h4> + <h4 id="forms-icons" class="s-subtitle">Form icons</h4> <div class="docs-note"> <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> @@ -1031,7 +1031,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Input types</h4> + <h4 id="forms-input" class="s-subtitle">Input types</h4> <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -1111,7 +1111,7 @@ </div> </div> - <h4 class="s-subtitle">Input groups</h4> + <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> @@ -1194,7 +1194,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Form validation styles</h4> + <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4> <div class="docs-note"> <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> </div> @@ -1293,7 +1293,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="s-subtitle">Form disabled styles</h4> + <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4> <div class="docs-note"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> </div> @@ -1346,12 +1346,12 @@ </div> </div> - <div id="icons" class="container"> - <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> + <div class="container"> + <h3 id="icons" class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> <div class="docs-note"> <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> </div> - <h4 class="s-subtitle">Navigation icons</h4> + <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1432,7 +1432,7 @@ <p>icon-more-vert</p> </div> </div> - <h4 class="s-subtitle">Action icons</h4> + <h4 id="icons-action" class="s-subtitle">Action icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1537,7 +1537,7 @@ <p>icon-upload</p> </div> </div> - <h4 class="s-subtitle">Object icons</h4> + <h4 id="icons-object" class="s-subtitle">Object icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1595,8 +1595,8 @@ </div> - <div id="labels" class="container"> - <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> + <div class="container"> + <h3 id="labels" class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> <div class="docs-note"> <p>Labels are formatted text tags for highlighted, informative information.</p> </div> @@ -1620,8 +1620,8 @@ </div> - <div id="codes" class="container"> - <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> + <div class="container"> + <h3 id="codes" class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> <div class="docs-note"> <p>Codes are inline and multiline code snippets.</p> <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> @@ -1643,12 +1643,12 @@ </div> - <div id="media" class="container"> - <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> + <div class="container"> + <h3 id="media" class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> <div class="docs-note"> <p>Media includes responsive images, figures and video classes. </p> </div> - <h4 class="s-subtitle">Images</h4> + <h4 id="media-images" class="s-subtitle">Images</h4> <div class="docs-note"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </div> @@ -1699,7 +1699,7 @@ <<span class="tag">/figure</span>> </code></pre> - <h4 class="s-subtitle">Video</h4> + <h4 id="media-video" class="s-subtitle">Video</h4> <div class="docs-note"> <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> </div> diff --git a/docs/experimentals.html b/docs/experimentals.html index 7008acb..18ca5d2 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -105,12 +105,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> @@ -146,6 +140,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"> @@ -158,6 +155,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"> @@ -252,15 +252,15 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="experimentals" class="container"> - <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> + <div class="container"> + <h3 id="experimentals" class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> <div class="docs-note"> <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p> </div> </div> - <div id="calendars" class="container"> - <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> + <div class="container"> + <h3 id="calendars" class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> <div class="docs-note"> <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> </div> @@ -328,7 +328,7 @@ </div> </div> - <h4 class="s-subtitle">Calendars large</h4> + <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4> <div class="columns"> <div class="column col-12"> <div class="calendar calendar-lg"> @@ -422,8 +422,8 @@ </div> - <div id="carousels" class="container"> - <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> + <div class="container"> + <h3 id="carousels" class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> <div class="docs-note"> <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> </div> @@ -487,8 +487,8 @@ </div> - <div id="comparison" class="container"> - <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> + <div class="container"> + <h3 id="comparison" class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> <div class="docs-note"> <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> </div> @@ -525,8 +525,8 @@ </div> - <div id="filters" class="container"> - <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> + <div class="container"> + <h3 id="filters" class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> <div class="docs-note"> <p>Filters are CSS only content filters.</p> </div> @@ -674,8 +674,8 @@ </div> - <div id="meters" class="container"> - <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> + <div class="container"> + <h3 id="meters" class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> <div class="docs-note"> <p>Meters represent the value within the known range.</p> </div> @@ -709,8 +709,8 @@ </div> - <div id="parallax" class="container"> - <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> + <div class="container"> + <h3 id="parallax" class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> <div class="docs-note"> <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> </div> @@ -752,8 +752,8 @@ </div> - <div id="progress" class="container"> - <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> + <div class="container"> + <h3 id="progress" class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> <div class="docs-note"> <p>The Progress indicates the progress completion of a task.</p> </div> @@ -779,8 +779,8 @@ </div> - <div id="sliders" class="container"> - <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> + <div class="container"> + <h3 id="sliders" class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> <div class="docs-note"> <p>Sliders are for selecting values from ranges.</p> </div> @@ -799,8 +799,8 @@ </div> - <div id="timelines" class="container"> - <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> + <div class="container"> + <h3 id="timelines" class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> <div class="docs-note"> <p>Timelines are ordered sequences of activities.</p> </div> diff --git a/docs/getting-started.html b/docs/getting-started.html index 124890d..8f02226 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.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,16 +251,16 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="introduction" class="container"> - <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3> + <div class="container"> + <h3 id="introduction" class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3> <div class="docs-note"> <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p> <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p> </div> </div> - <div id="installation" class="container"> - <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3> + <div class="container"> + <h3 id="installation" class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3> <div class="docs-note"> <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p> </div> @@ -312,8 +312,8 @@ </div> </div> - <div id="compiling" class="container"> - <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3> + <div class="container"> + <h3 id="compiling" class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3> <div class="docs-note"> <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p> <p>Then, you can build the CSS file from the command line:</p> @@ -366,7 +366,7 @@ <div class="docs-note"> <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.</p> </div> - <h5 class="s-subtitle">Colors</h5> + <h5 id="variables-colors" class="s-subtitle">Colors</h5> <div class="columns"> <div class="column col-3 col-md-6"> <div class="docs-color" style="background:#5764c6;color:#fff;"> @@ -445,13 +445,13 @@ </div> </div> </div> - <h5 class="s-subtitle">Sizes</h5> + <h5 id="variables-sizes" class="s-subtitle">Sizes</h5> <div class="docs-note"> <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p> <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p> <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p> </div> - <h5 class="s-subtitle">Custom prefix</h5> + <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5> <div class="docs-note"> <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p> </div> @@ -479,12 +479,12 @@ gulp.task('prefix', function() { </div> </div> - <div id="accessibility" class="container"> - <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3> + <div class="container"> + <h3 id="accessibility" class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3> </div> - <div id="browsers" class="container"> - <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3> + <div class="container"> + <h3 id="browsers" class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3> <div class="docs-note"> <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p> <ul> @@ -498,9 +498,15 @@ gulp.task('prefix', function() { </div> </div> - <div id="whatsnew" class="container"> - <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3> + <div class="container"> + <h3 id="whatsnew" class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3> <div class="docs-note"> + <p><strong>August 2017</strong></p> + <ul> + <li> + <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small> + </li> + </ul> <p><strong>April 2017</strong></p> <ul> <li> @@ -519,7 +525,7 @@ gulp.task('prefix', function() { <p><strong>March 2017</strong></p> <ul> <li> - <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons <small class="label label-primary">NEW</small> + <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons </li> <li> <a href="components.html#popovers">Popovers</a>: small overlay content containers 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> diff --git a/docs/src/docs.less b/docs/src/docs.less index 25acc40..18f4348 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -462,6 +462,7 @@ .s-title, .s-subtitle { + padding-top: 5rem; position: static; &::before { diff --git a/docs/utilities.html b/docs/utilities.html index 9b81d41..e161ffa 100644 --- a/docs/utilities.html +++ b/docs/utilities.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,12 +251,12 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="colors" class="container"> - <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> + <div class="container"> + <h3 id="colors" class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> <div class="docs-note"> <p>Color utilities are used for changing colors for text, link and background.</p> </div> - <h4 class="s-subtitle">Text colors</h4> + <h4 id="colors-text" class="s-subtitle">Text colors</h4> <div class="docs-note"> <p><span class="text-primary">primary color</span></p> <p><span class="text-secondary">secondary color</span></p> @@ -297,7 +297,7 @@ <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </code></pre> - <h4 class="s-subtitle">Background colors</h4> + <h4 id="colors-background" class="s-subtitle">Background colors</h4> <div class="docs-note"> <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p> <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> @@ -320,8 +320,8 @@ </div> - <div id="display" class="container"> - <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> + <div class="container"> + <h3 id="display" class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> <div class="docs-note"> <p>Display utilities are used for display and hidden things.</p> </div> @@ -352,8 +352,8 @@ </div> - <div id="divider" class="container"> - <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> + <div class="container"> + <h3 id="divider" class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> <div class="docs-note"> <p>A Divider is used for separating elements.</p> </div> @@ -426,8 +426,8 @@ </code></pre> </div> - <div id="loading" class="container"> - <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> + <div class="container"> + <h3 id="loading" class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> <div class="docs-note"> <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> </div> @@ -437,8 +437,8 @@ </div> </div> <div class="docs-note"> - <p>Add the <code>loading-lg</code> class for large size. </p> - </div> + <p>Add the <code>loading-lg</code> class for large size. </p> + </div> <div class="columns"> <div class="column col-12 text-center"> <div class="loading loading-lg"></div> @@ -454,8 +454,8 @@ </div> - <div id="position" class="container"> - <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> + <div class="container"> + <h3 id="position" class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> <div class="docs-note"> <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </div> @@ -498,8 +498,8 @@ </div> - <div id="shapes" class="container"> - <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> + <div class="container"> + <h3 id="shapes" class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> <div class="docs-note"> <p>Shape utilities are used for change element shapes.</p> </div> @@ -525,8 +525,8 @@ </div> - <div id="text" class="container"> - <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> + <div class="container"> + <h3 id="text" class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> <div class="docs-note"> <p>Text utilities are used for text alignment, styles and overflow things.</p> </div> |