diff options
1 files changed, 175 insertions, 93 deletions
| -rw-r--r-- | docs/components.html | 268 |
diff --git a/docs/components.html b/docs/components.html index 4a18277..7ae98cb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -68,6 +68,9 @@ <a href="components.html#navigation">Navigation</a> </li> <li class="nav-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="nav-item"> <a href="components.html#toasts">Toasts</a> </li> <li class="nav-item"> @@ -87,30 +90,30 @@ <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-9 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> <div class="form-autocomplete-input"> - <div class="chip-sm"> + <div class="chip"> Bruce Banner <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip-sm selected"> + <div class="chip is-selected"> Natasha Romanoff <button class="btn btn-clear"></button> </div> @@ -119,16 +122,16 @@ </div> </div> </div> - <div class="column col-9 col-xs-12"> + <div class="column col-8 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> + <div class="form-autocomplete-input is-focused"> + <div class="chip"> Bruce Banner <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> - <img src="img/avatar-1.png" class="avatar" /> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar" alt="Thor Odinson"/> Thor Odinson <button class="btn btn-clear"></button> </div> @@ -137,21 +140,21 @@ <ul class="menu"> <li class="menu-item"> <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" /> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> </div> - <div class="chip-content"> + <div class="tile-content"> Steve Rogers </div> </div> </a> <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> + <div class="tile tile-centered"> + <div class="tile-icon"> <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure> </div> - <div class="chip-content"> + <div class="tile-content"> Tony Stark </div> </div> @@ -163,8 +166,8 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p> - <p>The autocomplete HTML structure is exampled below.</p> + <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focus</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p> + <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> </section> <!-- autocomplete example --> @@ -173,14 +176,9 @@ <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm selected"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-2.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip is-selected"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> + Thor Odinson <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>> <span class="com"><!-- autocomplete real input box --></span> @@ -191,11 +189,11 @@ <span class="com"><!-- menu list chips --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span> /> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> Steve Rogers <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -203,11 +201,11 @@ <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Yan Zhu"</span> /> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> Yan Zhu <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -357,22 +355,22 @@ <img class="img-responsive" src="img/osx-el-capitan.jpg" /> </div> <div class="card-header"> - <h4 class="card-title">Microsoft</h4> - <h6 class="card-meta">Software and hardware</h6> + <div class="card-title">Microsoft</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> Empower every person and every organization on the planet to achieve more. </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Do</a> + <a href="#cards" class="btn btn-primary">Do</a> </div> </div> </div> <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> + <div class="card-title">Apple</div> + <div class="card-meta">Hardware and software</div> </div> <div class="card-image"> <img class="img-responsive" src="img/osx-yosemite.jpg" /> @@ -392,8 +390,8 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Google</h4> - <h6 class="card-meta">Software and hardware</h6> + <div class="card-title">Google</div> + <div class="card-meta">Software and hardware</div> </div> <div class="card-body"> Organize the world’s information and make it universally accessible and useful. @@ -402,8 +400,8 @@ <img class="img-responsive" src="img/osx-yosemite-2.jpg" /> </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Search</a> - <a href="#" class="btn btn-link">Share</a> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> </div> </div> </div> @@ -413,8 +411,8 @@ <img class="img-responsive" src="img/osx-el-capitan.jpg" /> </div> <div class="card-footer"> - <a href="#" class="btn btn-primary">Buy</a> - <a href="#" class="btn btn-link">Share</a> + <a href="#cards" class="btn btn-primary">Buy</a> + <a href="#cards" class="btn btn-link">Share</a> </div> <div class="card-body"> <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. @@ -425,8 +423,8 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> + <div class="card-title">Apple</div> + <div class="card-meta">Hardware and software</div> </div> <div class="card-body"> To make a contribution to the world by making tools for the mind that advance humankind. @@ -439,22 +437,19 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <h4 class="card-title">Google I/O</h4> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. - </div> - <div class="card-footer"> - <div class="chip"> - <div class="chip-content"> - <div class="chip-title">Google</div> - <div class="chip-meta">Software and hardware</div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Google I/O</div> + <div class="tile-meta">Software and hardware</div> </div> - <div class="chip-action"> + <div class="tile-action"> <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> </div> </div> </div> + <div class="card-body"> + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + </div> </div> </div> </div> @@ -488,35 +483,35 @@ </section> <div class="columns"> <div class="column col-8 col-xs-12"> - <div class="chip-sm"> + <div class="chip"> Crime <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Drama <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Biography <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> Mystery <button class="btn btn-clear"></button> </div> </div> <div class="column col-8 col-xs-12"> - <div class="chip-sm"> + <div class="chip"> <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> Tony Stark <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar" /> Thor Odinson <button class="btn btn-clear"></button> </div> - <div class="chip-sm"> + <div class="chip"> <img src="img/avatar-4.png" class="avatar" /> Steve Rogers </div> @@ -524,34 +519,17 @@ </div> <section class="notes"> - <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> + <p>Add a container element with the class <code>chip</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> </section> - <div class="columns hide"> - <div class="column col-4 col-xs-12"> - <div class="chip"> - <div class="chip-icon"> - <img src="img/avatar-1.png" class="avatar" /> - </div> - <div class="chip-content"> - <div class="chip-title">Tony Stark</div> - <div class="chip-meta">Iron man</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - <!-- chips example --> <pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> <<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> Yan Zhu <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> @@ -689,11 +667,11 @@ <div class="column col-xs-6"> <ul class="menu"> <li class="menu-item"> - <div class="chip"> - <div class="chip-icon"> + <div class="tile tile-centered"> + <div class="tile-icon"> <img src="img/avatar-4.png" class="avatar" /> </div> - <div class="chip-content"> + <div class="tile-content"> Steve Rogers </div> </div> @@ -924,7 +902,7 @@ </section> <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header> <div class="columns"> - <div class="column"> + <div class="column col-8 col-sm-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#breadcrumbs"> @@ -1121,7 +1099,7 @@ <div class="column col-xs-12"> <ul class="pagination"> <li class="page-item"> - <a href="#pagination" disabled>Previous</a> + <a href="#pagination" disabled tabindex="-1">Previous</a> </li> <li class="page-item active"> <a href="#pagination">1</a> @@ -1151,7 +1129,7 @@ <pre> <code class="code lang-html" data-lang="HTML"><<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"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span>>Previous<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<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 active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>1<<span class="tag">/a</span>> @@ -1212,6 +1190,110 @@ </section> </section> + <section id="tiles" class="container"> + <header class="text-center"><h3>Tiles</h3></header> + <section class="notes"> + <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p> + </section> + <div class="columns"> + <div class="column col-sm-12 col-8"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-3.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + </div> + </div> + </div> + <div class="column col-sm-12 col-8"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The S.H.I.E.L.D.</p> + <p>The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + <p><button class="btn btn-primary btn-sm">Join</button></p> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add a container with the class <code>tile</code>. And add child elements with the class name <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code>. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>There are <code>tile-title</code> and <code>tile-meta</code> classes for title and meta text styles.</p> + </section> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"tile-title"</span>>The Avengers<<span class="tag">/p</span>> + <<span class="tag">p</span>>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<<span class="tag">/p</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Join<<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + + <section class="notes"> + <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> + <p>Add the class <code>tile-centered</code> 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> + </section> + <div class="columns"> + <div class="column col-sm-12 col-8"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-explore centered"></i> + </div> + </div> + <div class="tile-content"> + <div class="tile-title text-ellipsis">spectre-docs.pdf</div> + <div class="tile-meta text-ellipsis">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link"><i class="icon icon-more_vert"></i></button> + </div> + </div> + </div> + </div> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-explore centered"</span>><<span class="tag">/i</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-title text-ellipsis"</span>>spectre-docs.pdf<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-meta text-ellipsis"</span>>14MB · Public · 1 Jan, 2017<<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-more_vert"</span>><<span class="tag">/i</span>> + <<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + </section> + <section id="toasts" class="container"> <header class="text-center"><h3>Toasts</h3></header> <section class="notes"> |