diff options
Merge pull request #151 from picturepan2/feature/components v0.2.5
Feature/components
1 files changed, 205 insertions, 44 deletions
| -rw-r--r-- | docs/layout.html | 249 |
diff --git a/docs/layout.html b/docs/layout.html index ced292a..7b1d134 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,7 +12,7 @@ <link rel="stylesheet" href="font/style.css" /> </head> <body> - <section class="section section-header bg-grey"> + <section class="section section-header bg-gray"> <section class="grid-header container grid-960"> <nav class="navbar"> <section class="navbar-section"> @@ -72,61 +72,61 @@ </section> <div class="columns"> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> <div class="column"> - <div class="bg-grey"></div> + <div class="bg-gray docs-block"></div> </div> </div> <div class="columns"> <div class="column col-12"> - <div class="bg-grey">col-12 (100%)</div> + <div class="bg-gray docs-block">col-12 (100%)</div> </div> </div> <div class="columns"> <div class="column col-9"> - <div class="bg-grey">col-9 (75%)</div> + <div class="bg-gray docs-block">col-9 (75%)</div> </div> </div> <div class="columns"> <div class="column col-6"> - <div class="bg-grey">col-6 (50%)</div> + <div class="bg-gray docs-block">col-6 (50%)</div> </div> </div> <div class="columns"> <div class="column col-3"> - <div class="bg-grey">col-3 (25%)</div> + <div class="bg-gray docs-block">col-3 (25%)</div> </div> </div> @@ -137,10 +137,10 @@ <div class="columns col-gapless"> <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> + <div class="bg-gray docs-block">col-6 (gapless)</div> </div> <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> + <div class="bg-gray docs-block">col-6 (gapless)</div> </div> </div> @@ -150,10 +150,10 @@ <div class="columns col-oneline"> <div class="column col-8"> - <div class="bg-grey">col-8</div> + <div class="bg-gray docs-block">col-8</div> </div> <div class="column col-8"> - <div class="bg-grey">col-8</div> + <div class="bg-gray docs-block">col-8</div> </div> </div> @@ -179,37 +179,35 @@ <header class="text-center"><h3>Responsive grid</h3></header> <div class="columns col-multiline"> <div class="column col-md-6 col-xs-12"> - <div class="bg-grey">col-md-6</div> + <div class="bg-gray docs-block">col-md-6</div> </div> <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> + <div class="bg-gray docs-block">col-md-3</div> </div> <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> + <div class="bg-gray docs-block">col-md-3</div> </div> </div> - <div class="columns"> <div class="column col-sm-6"> - <div class="bg-grey">col-sm-6</div> + <div class="bg-gray docs-block">col-sm-6</div> </div> <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> + <div class="bg-gray docs-block">col-sm-3</div> </div> <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> + <div class="bg-gray docs-block">col-sm-3</div> </div> </div> - <div class="columns"> <div class="column col-xs-6"> - <div class="bg-grey">col-xs-6</div> + <div class="bg-gray docs-block">col-xs-6</div> </div> <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> + <div class="bg-gray docs-block">col-xs-3</div> </div> <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> + <div class="bg-gray docs-block">col-xs-3</div> </div> </div> @@ -235,6 +233,62 @@ <<span class="tag">/div</span>> </code></pre> + <header class="text-center"><h4>Responsive visibility</h4></header> + <table class="docs-table table"> + <thead> + <tr class="text-center"> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td>hide-xs</td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td>hide-sm</td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td>hide-md</td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td>hide-lg</td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td>hide-xl</td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + </tr> + </tbody> + </table> + <section class="notes"> <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> <ul> @@ -244,6 +298,72 @@ <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> </ul> + </section> + + <table class="docs-table table"> + <thead> + <tr class="text-center"> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td>show-xs</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + </tr> + <tr> + <td>show-sm</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + </tr> + <tr> + <td>show-md</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + </tr> + <tr> + <td>show-lg</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-gray docs-dot"></div></td> + </tr> + <tr> + <td>show-xl</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + </tbody> + </table> + + <section class="notes"> + <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> + <ul> + <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li> + <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>. </li> + <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>. </li> + <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li> + <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> + </ul> <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code>.</p> </section> </section> @@ -305,17 +425,39 @@ <div class="columns"> <div class="column col-8 col-xs-12"> <section class="empty"> - <i class="icon icon-markunread"></i> - <p class="empty-title">You have no new messages</p> - <p class="empty-meta">Click the button to start a conversation.</p> - <button class="empty-action btn btn-primary">Send a message</button> + <div class="empty-icon"> + <i class="icon icon-markunread"></i> + </div> + <h4 class="empty-title">You have no new messages</h4> + <p class="empty-meta">Click the button to start a conversation</p> + <div class="empty-action"> + <button class="btn btn-primary">Send a message</button> + </div> </section> </div> <div class="column col-8 col-xs-12"> <section class="empty"> - <i class="icon icon-people"></i> - <p class="empty-title">You are not following anyone</p> - <div class="empty-action input-group"> + <div class="empty-icon"> + <i class="icon icon-drafts"></i> + </div> + <h4 class="empty-title">You've successfully signed up</h4> + <p class="empty-meta">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> + </section> + </div> + <div class="column col-8 col-xs-12"> + <section class="empty"> + <div class="empty-icon"> + <i class="icon icon-people"></i> + </div> + <h4 class="empty-title">You are not following anyone</h4> + <p class="empty-meta">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> @@ -324,15 +466,19 @@ </div> <section class="notes"> - <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> + <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> </section> <!-- 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">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title"</span>>You have no new messages<<span class="tag">/p</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">h4</span> <span class="atn">class</span>=<span class="atv">"empty-title"</span>>You have no new messages<<span class="tag">/h4</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-meta"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"empty-action btn btn-primary"</span>>Send a message<<span class="tag">/button</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> @@ -359,7 +505,22 @@ </section> </section> - <footer class="bg-grey"> + <section class="container grid-960"> + <section class="grid-ads"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- Spectre.css --> + <ins class="adsbygoogle" + style="display:block" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="5007685125" + data-ad-format="auto"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </section> + </section> + + <footer class="bg-gray"> <section id="copyright" class="grid-footer container grid-960"> <p> <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | Version <span class="version"></span> |