playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Quick pass and updating content on the docs for tab bars.

pull/214/head
connors 11 years ago
parent
b5fdbbc60d
commit
431c4e972b
1 changed files with 11 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      docs/index.html

23
docs/index.html
Unescape View File

@ -277,38 +277,38 @@
<article class="component">
<h3 class="component-title">Tab bar</h3>
<p class="component-description">Icons should be around 24px by 18px. The gradient on an icon starts with pure white and goes to #e5e5e5 at the bottom.</p>
<p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p>
<div class="component-example component-example-fullbleed">
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<img class="tab-icon" src="img/icon-home.png">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-profile.png">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-messages.png">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-hamburger.png">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-settings.png">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
@ -321,31 +321,31 @@
&lt;ul class=&quot;tab-inner&quot;&gt;
&lt;li class=&quot;tab-item active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-home.png&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-profile.png&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-messages.png&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-hamburger.png&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-settings.png&quot;&gt;
&lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
@ -354,7 +354,6 @@
</pre>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
<p class="component-note"><strong>Credit:</strong> Icons by Marc Haumann and Spencer Cohen from The Noun Project</p>
</article>
<article class="component">

Write Preview
Loading…
Cancel
Save