improved page layout and typography

This commit is contained in:
Todd Parker 2010-10-11 14:31:33 -04:00
parent 5b24a75f3c
commit 2a481b5e90
3 changed files with 27 additions and 15 deletions

View file

@ -15,31 +15,36 @@
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Icon position options</h2>
<p>No icon</p>
<p><strong>No icon</strong></p>
<a href="index.html" data-role="button">My button</a>
<p>Left icon (default) - <code>data-iconpos="left"</code></p>
<p><strong>Left icon</strong> (default) - data-iconpos="left"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p>Right icon - <code>data-iconpos="right"</code></p>
<p><strong>Right icon</strong> - data-iconpos="right"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">My button</a>
<p>Icon only - <code>data-iconpos="notext"</code></p>
<p><strong>Icon only</strong> - data-iconpos="notext"</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">My button</a>
<h2>Icon glyphs</h2>
<p>Left arrow - <code>data-icon="arrow-u"</code></p>
<p><strong>Left arrow</strong> - data-icon="arrow-u"</p>
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
<p>Right arrow - <code>data-icon="arrow-d"</code></p>
<p><strong>Right arrow</strong> - data-icon="arrow-d"</p>
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
<p>Up arrow - <code>data-icon="arrow-u"</code></p>
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
<p>Down arrow - <code>data-icon="arrow-d"</code></p>
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
<p>Delete - <code>data-icon="delete"</code></p>
<p><strong>Delete</strong> - data-icon="delete"</p>
<a href="index.html" data-role="button" data-icon="delete">My button</a>
<p>Plus - <code>data-icon="plus"</code></p>
<p><strong>Plus</strong> - data-icon="plus"</p>
<a href="index.html" data-role="button" data-icon="plus">My button</a>
<p>Minus - <code>data-icon="minus"</code></p>
<p><strong>Minus</strong> - data-icon="minus"</p>
<a href="index.html" data-role="button" data-icon="minus">My button</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

View file

@ -32,10 +32,7 @@
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Move</a>
</div>
</div>
</div>
</div><!-- /ui-body wrapper -->

View file

@ -15,18 +15,28 @@
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<p><strong>Link</strong> based button</p>
<a href="index.html" data-role="button">Link element</a>
<p><strong>Button</strong> based button</p>
<button>Button element</button>
<p><strong>Input type="button"</strong> based button</p>
<input type="button" value="Input type=button" />
<p><strong>Input type="submit"</strong> based button</p>
<input type="submit" value="Input type=submit" />
<p><strong>Input type="reset"</strong> based button</p>
<input type="reset" value="Input type=reset" />
<p><strong>Input type="image"</strong> based button</p>
<input type="image" value="Input type=image" />
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->