index.html in web-app-theme-0.4.0 vs index.html in web-app-theme-0.5.0
- old
+ new
@@ -46,41 +46,38 @@
<body>
<div id="container">
<div id="header">
<h1><a href="index.html">Web App Theme</a></h1>
<div id="user-navigation">
- <ul>
+ <ul class="wat-cf">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a class="logout" href="#">Logout</a></li>
</ul>
- <div class="clear"></div>
</div>
<div id="main-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Main Page</a></li>
<li class="active"><a href="#block-text">Active</a></li>
<li><a href="#block-login">Login</a></li>
<li><a href="#block-signup">Signup</a></li>
</ul>
- <div class="clear"></div>
</div>
</div>
- <div id="wrapper">
+ <div id="wrapper" class="wat-cf">
<div id="main">
<div class="block" id="block-text">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="active first"><a href="#block-text">Text</a></li>
<li><a href="#block-tables">Tables</a></li>
<li><a href="#block-forms">Forms</a></li>
<li><a href="#block-messages">Messages</a></li>
<li><a href="#block-forms-2">2 Columns Forms</a></li>
<li><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">Text</h2>
<div class="inner">
<p class="first">
@@ -96,19 +93,18 @@
</div>
</div>
<div class="block" id="block-tables">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Text</a></li>
<li class="active"><a href="#block-tables">Tables</a></li>
<li><a href="#block-forms">Forms</a></li>
<li><a href="#block-messages">Messages</a></li>
<li><a href="#block-forms-2">2 Columns Forms</a></li>
<li><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">Tables</h2>
<div class="inner">
<form action="#" class="form">
@@ -132,35 +128,35 @@
</tr>
<tr class="even">
<td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>4</td><td>machoman</td><td>Macho Man</td><td>Randy Savage</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
</tr>
</table>
- <div class="actions-bar">
+ <div class="actions-bar wat-cf">
<div class="actions">
- <input type="submit" class="button" value="Delete" />
+ <button class="button" type="submit">
+ <img src="images/icons/cross.png" alt="Delete" /> Delete
+ </button>
</div>
<div class="pagination">
<span class="disabled prev_page">« Previous</span><span class="current">1</span><a rel="next" href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a><a rel="next" class="next_page" href="#">Next »</a>
</div>
- <div class="clear"></div>
</div>
</form>
</div>
</div>
</div>
<div class="block" id="block-forms">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Text</a></li>
<li><a href="#block-tables">Tables</a></li>
<li class="active"><a href="#block-forms">Forms</a></li>
<li><a href="#block-messages">Messages</a></li>
<li><a href="#block-forms-2">2 Columns Forms</a></li>
<li><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">Forms</h2>
<div class="inner">
<form action="#" method="get" class="form">
@@ -180,29 +176,33 @@
<div class="group">
<label class="label">Text area</label>
<textarea class="text_area" rows="10" cols="80"></textarea>
<span class="description">Write here a long text</span>
</div>
- <div class="group navform">
- <input type="submit" class="button" value="Save →" /> or <a href="#header">Cancel</a>
+ <div class="group navform wat-cf">
+ <button class="button" type="submit">
+ <img src="images/icons/tick.png" alt="Save" /> Save
+ </button>
+ <a href="#header" class="button">
+ <img src="images/icons/cross.png" alt="Cancel"/> Cancel
+ </a>
</div>
</form>
</div>
</div>
</div>
<div class="block" id="block-messages">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Text</a></li>
<li><a href="#block-tables">Tables</a></li>
<li><a href="#block-forms">Forms</a></li>
<li class="active"><a href="#block-messages">Messages</a></li>
<li><a href="#block-forms-2">2 Columns Forms</a></li>
<li><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">Messages</h2>
<div class="inner">
<div class="flash">
@@ -220,25 +220,24 @@
</div>
</div>
<div class="block" id="block-forms-2">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Text</a></li>
<li><a href="#block-tables">Tables</a></li>
<li><a href="#block-forms">Forms</a></li>
<li><a href="#block-messages">Messages</a></li>
<li class="active"><a href="#block-forms-2">2 Columns Forms</a></li>
<li><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">2 columns forms</h2>
<div class="inner">
<form action="#" method="get" class="form">
- <div class="columns">
+ <div class="columns wat-cf">
<div class="column left">
<div class="group">
<label class="label">Text field</label>
<input type="text" class="text_field" />
</div>
@@ -270,30 +269,33 @@
<input type="radio" name="radio" id="radio_2" class="checkbox" value="2" /> <label for="radio_2" class="radio">Option 2</label>
</div>
</div>
</div>
</div>
- <div class="clear"></div>
- <div class="group navform">
- <input type="submit" class="button" value="Save →" /> or <a href="#">Cancel</a>
+ <div class="group navform wat-cf">
+ <button class="button" type="submit">
+ <img src="images/icons/tick.png" alt="Save" /> Save
+ </button>
+ <a href="#header" class="button">
+ <img src="images/icons/cross.png" alt="Cancel"/> Cancel
+ </a>
</div>
</form>
</div>
</div>
</div>
<div class="block" id="block-lists">
<div class="secondary-navigation">
- <ul>
+ <ul class="wat-cf">
<li class="first"><a href="#block-text">Text</a></li>
<li><a href="#block-tables">Tables</a></li>
<li><a href="#block-forms">Forms</a></li>
<li><a href="#block-messages">Messages</a></li>
<li><a href="#block-forms-2">2 Columns Forms</a></li>
<li class="active"><a href="#block-lists">Lists</a></li>
</ul>
- <div class="clear"></div>
</div>
<div class="content">
<h2 class="title">Lists</h2>
<div class="inner">
<ul class="list">
@@ -373,11 +375,10 @@
<h4>Sidebar Inner block Title</h4>
<p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac <a href="#">aliquam blandit</a>, lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales. Aenean tempor venenatis dolor.</p>
</div>
</div>
</div>
- <div class="clear"></div>
</div>
<div id="box">
<h1>Web App Theme</h1>
<div class="block" id="block-login">
<h2>Login Box</h2>
@@ -386,71 +387,67 @@
<div class="message notice">
<p>Logged in successfully</p>
</div>
</div>
<form action="#" class="form login">
- <div class="group">
+ <div class="group wat-cf">
<div class="left">
<label class="label right">Login</label>
</div>
<div class="right">
<input type="text" class="text_field" />
</div>
- <div class="clear"></div>
</div>
- <div class="group">
+ <div class="group wat-cf">
<div class="left">
<label class="label right">Password</label>
</div>
<div class="right">
<input type="password" class="text_field" />
</div>
- <div class="clear"></div>
</div>
- <div class="group navform">
+ <div class="group navform wat-cf">
<div class="right">
- <input type="submit" class="button" value="Login" />
+ <button class="button" type="submit">
+ <img src="images/icons/key.png" alt="Save" /> Login
+ </button>
</div>
- <div class="clear"></div>
</div>
</form>
</div>
</div>
<div class="block" id="block-signup">
<h2>Sign up</h2>
<div class="content">
<form action="#" class="form">
- <div class="group">
+ <div class="group wat-cf">
<div class="left">
<label class="label">Login</label>
</div>
<div class="right">
<input type="text" class="text_field" />
<span class="description">Ex: web-app-theme</span>
</div>
- <div class="clear"></div>
</div>
- <div class="group">
+ <div class="group wat-cf">
<div class="left">
<label class="label">Email</label>
</div>
<div class="right">
<input type="text" class="text_field" />
<span class="description">Ex: test@example.com</span>
</div>
- <div class="clear"></div>
</div>
- <div class="group">
+ <div class="group wat-cf">
<div class="left">
<label class="label">Password</label>
</div>
<div class="right">
<input type="password" class="text_field" />
<span class="description">Must contains the word 'yeah'</span>
</div>
- <div class="clear"></div>
</div>
<div class="group">
<label class="label">Text field</label>
<input type="text" class="text_field" />
@@ -459,11 +456,13 @@
<div class="group">
<label class="label">Text field</label>
<input type="text" class="text_field" />
<span class="description">Ex: a simple text</span>
</div>
- <div class="group navform">
- <input type="submit" class="button" value="Sign up" />
+ <div class="group navform wat-cf">
+ <button class="button" type="submit">
+ <img src="images/icons/tick.png" alt="Save" /> Signup
+ </button>
</div>
</form>
</div>
</div>
</div>