web-app-theme 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. data/.gitignore +2 -0
  2. data/LICENSE +21 -0
  3. data/README.md +22 -0
  4. data/Rakefile +25 -0
  5. data/VERSION +1 -0
  6. data/features/step_definitions/layout_steps.rb +55 -0
  7. data/features/step_definitions/themed_steps.rb +19 -0
  8. data/features/support/env.rb +82 -0
  9. data/features/theme_generator.feature +51 -0
  10. data/features/themed_generator.feature +52 -0
  11. data/images/avatar.png +0 -0
  12. data/index.html +474 -0
  13. data/javascripts/jquery-1.3.min.js +19 -0
  14. data/javascripts/jquery.localscroll.js +104 -0
  15. data/javascripts/jquery.scrollTo.js +150 -0
  16. data/lib/web_app_theme.rb +2 -0
  17. data/rails_generators/theme/USAGE +4 -0
  18. data/rails_generators/theme/templates/view_layout_administration.html.erb +48 -0
  19. data/rails_generators/theme/templates/view_layout_sign.html.erb +15 -0
  20. data/rails_generators/theme/templates/web_app_theme_override.css +1 -0
  21. data/rails_generators/theme/theme_generator.rb +39 -0
  22. data/rails_generators/themed/USAGE +4 -0
  23. data/rails_generators/themed/templates/view_edit.html.erb +20 -0
  24. data/rails_generators/themed/templates/view_form.html.erb +10 -0
  25. data/rails_generators/themed/templates/view_new.html.erb +19 -0
  26. data/rails_generators/themed/templates/view_show.html.erb +23 -0
  27. data/rails_generators/themed/templates/view_sidebar.html.erb +13 -0
  28. data/rails_generators/themed/templates/view_signin.html.erb +39 -0
  29. data/rails_generators/themed/templates/view_signup.html.erb +56 -0
  30. data/rails_generators/themed/templates/view_tables.html.erb +54 -0
  31. data/rails_generators/themed/templates/view_text.html.erb +18 -0
  32. data/rails_generators/themed/themed_generator.rb +95 -0
  33. data/stylesheets/base.css +336 -0
  34. data/stylesheets/themes/bec-green/style.css +290 -0
  35. data/stylesheets/themes/bec/style.css +301 -0
  36. data/stylesheets/themes/blue/style.css +280 -0
  37. data/stylesheets/themes/default/style.css +267 -0
  38. data/stylesheets/themes/djime-cerulean/style.css +298 -0
  39. data/stylesheets/themes/drastic-dark/style.css +373 -0
  40. data/stylesheets/themes/kathleene/style.css +272 -0
  41. data/stylesheets/themes/orange/style.css +263 -0
  42. data/stylesheets/themes/reidb-greenish/style.css +301 -0
  43. data/stylesheets/themes/warehouse/style.css +391 -0
  44. data/test/spec_helper.rb +5 -0
  45. data/test/themed_generator_spec.rb +115 -0
  46. metadata +101 -0
data/.gitignore ADDED
@@ -0,0 +1,2 @@
1
+ .DS_Store
2
+ pkg
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ == MIT License
2
+
3
+ Copyright (c) 2009, Andrea Franz - (http://gravityblast.com)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,22 @@
1
+ Web App Theme
2
+ ===
3
+
4
+ A simple layout by [Andrea Franz](http://gravityblast.com) that you can use in your web applications.
5
+ Inspired by cool themes like [Lighthouse](http://lighthouseapp.com/), [Basecamp](http://basecamphq.com/), [RadiantCMS](http://radiantcms.org/) and others,
6
+ it wants to be an idea to start developing a complete web application layout.
7
+
8
+ Contributing
9
+ ---
10
+
11
+ * Fork this repository.
12
+ * Duplicate the 'themes/default' folder and rename it.
13
+ * Modify the style.css file adding your favorite colors.
14
+ * Add a link to your theme in the 'Switch Theme' block inside the index.html file.
15
+ * Send a pull request.
16
+
17
+ ![Web App Theme screenshot](http://gravityblast.com/wp-content/uploads/2009/01/web-app-theme-current.jpg)
18
+
19
+ Contributors
20
+ ---
21
+
22
+ Nelson Fernandez ('Bec' theme and refactoring)
data/Rakefile ADDED
@@ -0,0 +1,25 @@
1
+ require "rubygems"
2
+ require "cucumber/rake/task"
3
+ require "spec/rake/spectask"
4
+
5
+ Cucumber::Rake::Task.new
6
+
7
+ Spec::Rake::SpecTask.new do |t|
8
+ t.spec_files = FileList['test/**/*_spec.rb']
9
+ end
10
+
11
+ task :default => [:spec, :cucumber]
12
+
13
+ begin
14
+ require 'jeweler'
15
+ Jeweler::Tasks.new do |gemspec|
16
+ gemspec.name = "web-app-theme"
17
+ gemspec.summary = "Web app theme generator"
18
+ gemspec.description = "Web app theme generator for rails projects"
19
+ gemspec.email = "andrea@gravityblast.com"
20
+ gemspec.homepage = "http://github.com/pilu/web-app-theme"
21
+ gemspec.authors = ["Andrea Franz"]
22
+ end
23
+ rescue LoadError
24
+ puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
25
+ end
data/VERSION ADDED
@@ -0,0 +1 @@
1
+ 0.3.0
@@ -0,0 +1,55 @@
1
+ Given /^I have a new rails app$/ do
2
+ generate_rails_app
3
+ end
4
+
5
+ Given /^I have no layouts$/ do
6
+ remove_layouts
7
+ end
8
+
9
+ Given /^I have no stylesheets$/ do
10
+ remove_stylesheets
11
+ end
12
+
13
+ Given /^I generate a theme$/ do
14
+ generate_layout
15
+ end
16
+
17
+ Given /^I generate a theme with name "([^\"]*)"$/ do |name|
18
+ generate_layout(name)
19
+ end
20
+
21
+ Given /^I generate a theme choosing the "([^\"]*)" theme$/ do |theme_name|
22
+ generate_layout(:theme => theme_name)
23
+ end
24
+
25
+ Then /^I should have a layout named "([^\"]*)"$/ do |filename|
26
+ layout_exists?(filename).should be_true
27
+ end
28
+
29
+ Then /^I should have a stylesheet named "([^\"]*)"$/ do |filename|
30
+ stylesheet_exists?(filename).should be_true
31
+ end
32
+
33
+ Given /^I generate a theme without layout choosing the "([^\"]*)" theme$/ do |theme_name|
34
+ generate_layout(:theme => theme_name, :no_layout => true )
35
+ end
36
+
37
+ Then /^I should not have any layouts$/ do
38
+ layouts_count.should == 0
39
+ end
40
+
41
+ Given /^I generate a theme with application name "([^\"]*)"$/ do |name|
42
+ generate_layout(:app_name => name )
43
+ end
44
+
45
+ Then /^the layout "([^\"]*)" should have "([^\"]*)" as page title$/ do |layout, title|
46
+ layout_title(layout).should == title
47
+ end
48
+
49
+ Given /^I generate a theme for signin and signup$/ do
50
+ generate_layout(:layout_type => :sign)
51
+ end
52
+
53
+ Then /^I should have a layout named "([^\"]*)" with just a box$/ do |layout|
54
+ layout_with_box?(layout).should be_true
55
+ end
@@ -0,0 +1,19 @@
1
+ Given /^a model "([^\"]*)"$/ do |model_name|
2
+ generate_model(model_name)
3
+ end
4
+
5
+ Given /^I generate views for controller "([^\"]*)"$/ do |controller_path|
6
+ generate_views(controller_path)
7
+ end
8
+
9
+ When /^I generate views for controller "([^\"]*)" and model "([^\"]*)"$/ do |controller_path, model_name|
10
+ generate_views(controller_path, model_name)
11
+ end
12
+
13
+ When /^I generate text views for "([^\"]*)"/ do |controller_path|
14
+ generate_views(controller_path, :themed_type => :text)
15
+ end
16
+
17
+ Then /^I should have a view named "([^\"]*)"$/ do |view_path|
18
+ view_exists?(view_path).should be_true
19
+ end
@@ -0,0 +1,82 @@
1
+ $:.unshift(File.dirname(__FILE__) + "/../../rails_generators")
2
+ require "rubygems"
3
+ require "rails_generator"
4
+ require 'rails_generator/scripts/generate'
5
+ require "fileutils"
6
+ require "theme/theme_generator"
7
+
8
+ web_app_theme_root = File.join(File.dirname(__FILE__), "/../../")
9
+ tmp_rails_app_name = "tmp_rails_app"
10
+ tmp_rails_app_root = File.join(web_app_theme_root, tmp_rails_app_name)
11
+
12
+ Rails::Generator::Base.append_sources(Rails::Generator::PathSource.new(:plugin, "#{web_app_theme_root}/rails_generators/"))
13
+
14
+ module GeneratorHelpers
15
+ def generate_rails_app
16
+ FileUtils.mkdir(File.join(@app_root))
17
+ end
18
+
19
+ def remove_layouts
20
+ FileUtils.rm_rf(File.join(@app_root, "app", "views", "layouts"))
21
+ end
22
+
23
+ def remove_stylesheets
24
+ FileUtils.rm_rf(File.join(@app_root, "public", "stylesheets"))
25
+ end
26
+
27
+ def generate(*args)
28
+ options = !args.empty? && args.last.is_a?(Hash) ? args.pop : {}
29
+ options.merge!({:destination => @app_root, :quiet => true})
30
+ Rails::Generator::Scripts::Generate.new.run(args, options)
31
+ end
32
+
33
+ def generate_layout(*args)
34
+ generate(:theme, *args)
35
+ end
36
+
37
+ def generate_views(*args)
38
+ generate(:themed, *args)
39
+ end
40
+
41
+ def generate_model(model_name)
42
+ Object.const_get(model_name)
43
+ rescue NameError
44
+ Object.const_set(model_name, Class.new)
45
+ klass = Object.const_get(model_name)
46
+ def klass.columns; []; end
47
+ end
48
+
49
+ def layouts_count
50
+ Dir[File.join(@app_root, "app", "views", "layouts", "**", "*.erb")].size
51
+ end
52
+
53
+ def layout_exists?(filename)
54
+ File.exists?(File.join(@app_root, "app", "views", "layouts", filename))
55
+ end
56
+
57
+ def view_exists?(view_path)
58
+ File.exists?(File.join(@app_root, "app", "views", view_path))
59
+ end
60
+
61
+ def stylesheet_exists?(relative_path)
62
+ File.exists?(File.join(@app_root, "public", "stylesheets", relative_path)).should be_true
63
+ end
64
+
65
+ def layout_title(layout)
66
+ File.open(File.join(@app_root, "app", "views", "layouts", layout), "r").read.match(/<title>([^<]*)<\/title>/)[1]
67
+ end
68
+
69
+ def layout_with_box?(layout)
70
+ File.open(File.join(@app_root, "app", "views", "layouts", layout), "r").read =~ %r|<div id="box">|
71
+ end
72
+ end
73
+
74
+ Before do
75
+ @app_root = tmp_rails_app_root
76
+ end
77
+
78
+ After do
79
+ FileUtils.rm_rf(tmp_rails_app_root)
80
+ end
81
+
82
+ World(GeneratorHelpers)
@@ -0,0 +1,51 @@
1
+ Feature: Layout generation
2
+ In order to create a great application
3
+ I should be able to generate a layout with Web App Theme
4
+
5
+ # script/generate theme
6
+ Scenario: Generate a layout
7
+ Given I have a new rails app
8
+ And I have no layouts
9
+ And I have no stylesheets
10
+ When I generate a theme
11
+ Then I should have a layout named "application.html.erb"
12
+ And I should have a stylesheet named "web_app_theme.css"
13
+ And I should have a stylesheet named "web_app_theme_override.css"
14
+ And I should have a stylesheet named "themes/default/style.css"
15
+
16
+ # script/generate theme admin
17
+ Scenario: Generate a layout with a name
18
+ Given I have a new rails app
19
+ And I have no layouts
20
+ And I generate a theme with name "admin"
21
+ Then I should have a layout named "admin.html.erb"
22
+
23
+ # script/generate theme --theme="drastic-dark"
24
+ Scenario: Generate a layout choosing a theme
25
+ Given I have a new rails app
26
+ And I have no stylesheets
27
+ And I generate a theme choosing the "drastic-dark" theme
28
+ Then I should have a stylesheet named "themes/drastic-dark/style.css"
29
+
30
+ # script/generate theme --theme=bec --no_layout
31
+ Scenario: Generate only stylesheets without layout
32
+ Given I have a new rails app
33
+ And I have no layouts
34
+ And I generate a theme without layout choosing the "bec" theme
35
+ Then I should have a stylesheet named "themes/bec/style.css"
36
+ But I should not have any layouts
37
+
38
+ # script/generate theme --app_name="My New Application"
39
+ Scenario: Generate layout with application name
40
+ Given I have a new rails app
41
+ And I have no layouts
42
+ And I generate a theme with application name "My New Application"
43
+ Then the layout "application.html.erb" should have "My New Application" as page title
44
+
45
+ # script/generate theme --type=sign
46
+ Scenario: Generate layout for signin and signup
47
+ Given I have a new rails app
48
+ And I have no layouts
49
+ And I generate a theme for signin and signup
50
+ Then I should have a layout named "sign.html.erb"
51
+ And I should have a layout named "sign.html.erb" with just a box
@@ -0,0 +1,52 @@
1
+ Feature: Theme generation
2
+ In order to create a great application
3
+ I should be able to creare theme after creating a layout
4
+
5
+ # script/generate themed posts
6
+ Scenario: Creating CRUD views with controller path
7
+ Given I have a new rails app
8
+ And a model "Post"
9
+ When I generate views for controller "posts"
10
+ Then I should have a view named "posts/index.html.erb"
11
+ And I should have a view named "posts/new.html.erb"
12
+ And I should have a view named "posts/show.html.erb"
13
+ And I should have a view named "posts/edit.html.erb"
14
+
15
+ # script/generate themed items Post
16
+ Scenario: Creating CRUD views with controller path and model name
17
+ Given I have a new rails app
18
+ And a model "Post"
19
+ When I generate views for controller "items" and model "Post"
20
+ Then I should have a view named "items/index.html.erb"
21
+ And I should have a view named "items/new.html.erb"
22
+ And I should have a view named "items/show.html.erb"
23
+ And I should have a view named "items/edit.html.erb"
24
+
25
+ # script/generate themed admin/items Post
26
+ Scenario: Creating CRUD views with controller path "admin/items" and model name
27
+ Given I have a new rails app
28
+ And a model "Post"
29
+ When I generate views for controller "admin/items" and model "Post"
30
+ Then I should have a view named "admin/items/index.html.erb"
31
+ And I should have a view named "admin/items/new.html.erb"
32
+ And I should have a view named "admin/items/show.html.erb"
33
+ And I should have a view named "admin/items/edit.html.erb"
34
+
35
+ # script/generate themed admin/gallery_pictures
36
+ Scenario: Creating CRUD views with controller path "admin/gallery_pictures"
37
+ Given I have a new rails app
38
+ And a model "GalleryPicture"
39
+ When I generate views for controller "admin/gallery_pictures"
40
+ Then I should have a view named "admin/gallery_pictures/index.html.erb"
41
+ And I should have a view named "admin/gallery_pictures/new.html.erb"
42
+ And I should have a view named "admin/gallery_pictures/show.html.erb"
43
+ And I should have a view named "admin/gallery_pictures/edit.html.erb"
44
+
45
+ # script/generate themed homes --type=text
46
+ Scenario: Creating text theme
47
+ Given I have a new rails app
48
+ When I generate text views for "homes"
49
+ Then I should have a view named "homes/show.html.erb"
50
+ And I should have a view named "homes/_sidebar.html.erb"
51
+
52
+
data/images/avatar.png ADDED
Binary file
data/index.html ADDED
@@ -0,0 +1,474 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
+ <title>Web App Theme</title>
6
+ <link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="screen" />
7
+ <link rel="stylesheet" id="current-theme" href="stylesheets/themes/default/style.css" type="text/css" media="screen" />
8
+ <script type="text/javascript" charset="utf-8" src="javascripts/jquery-1.3.min.js"></script>
9
+ <script type="text/javascript" charset="utf-8" src="javascripts/jquery.scrollTo.js"></script>
10
+ <script type="text/javascript" charset="utf-8" src="javascripts/jquery.localscroll.js"></script>
11
+ <script type="text/javascript" charset="utf-8">
12
+ // <![CDATA[
13
+ var Theme = {
14
+ activate: function(name) {
15
+ window.location.hash = 'themes/' + name
16
+ Theme.loadCurrent();
17
+ },
18
+
19
+ loadCurrent: function() {
20
+ var hash = window.location.hash;
21
+ if (hash.length > 0) {
22
+ matches = hash.match(/^#themes\/([a-z0-9\-_]+)$/);
23
+ if (matches && matches.length > 1) {
24
+ $('#current-theme').attr('href', 'stylesheets/themes/' + matches[1] + '/style.css');
25
+ } else {
26
+ alert('theme not valid');
27
+ }
28
+ }
29
+ }
30
+ }
31
+
32
+ $(document).ready(function() {
33
+ Theme.loadCurrent();
34
+ $.localScroll();
35
+ $('.table :checkbox.toggle').each(function(i, toggle) {
36
+ $(toggle).change(function(e) {
37
+ $(toggle).parents('table:first').find(':checkbox:not(.toggle)').each(function(j, checkbox) {
38
+ checkbox.checked = !checkbox.checked;
39
+ })
40
+ });
41
+ });
42
+ });
43
+ // ]]>
44
+ </script>
45
+ </head>
46
+ <body>
47
+ <div id="container">
48
+ <div id="header">
49
+ <h1><a href="index.html">Web App Theme</a></h1>
50
+ <div id="user-navigation">
51
+ <ul>
52
+ <li><a href="#">Profile</a></li>
53
+ <li><a href="#">Settings</a></li>
54
+ <li><a class="logout" href="#">Logout</a></li>
55
+ </ul>
56
+ <div class="clear"></div>
57
+ </div>
58
+ <div id="main-navigation">
59
+ <ul>
60
+ <li class="first"><a href="#block-text">Main Page</a></li>
61
+ <li class="active"><a href="#block-text">Active</a></li>
62
+ <li><a href="#block-login">Login</a></li>
63
+ <li><a href="#block-signup">Signup</a></li>
64
+ </ul>
65
+ <div class="clear"></div>
66
+ </div>
67
+ </div>
68
+ <div id="wrapper">
69
+ <div id="main">
70
+
71
+ <div class="block" id="block-text">
72
+ <div class="secondary-navigation">
73
+ <ul>
74
+ <li class="active first"><a href="#block-text">Text</a></li>
75
+ <li><a href="#block-tables">Tables</a></li>
76
+ <li><a href="#block-forms">Forms</a></li>
77
+ <li><a href="#block-messages">Messages</a></li>
78
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
79
+ <li><a href="#block-lists">Lists</a></li>
80
+ </ul>
81
+ <div class="clear"></div>
82
+ </div>
83
+ <div class="content">
84
+ <h2 class="title">Text</h2>
85
+ <div class="inner">
86
+ <p class="first">
87
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
88
+ </p>
89
+ <p> <span class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
90
+ <p> <span class="gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</span></p>
91
+ <hr />
92
+ <p>
93
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
94
+ </p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="block" id="block-tables">
100
+ <div class="secondary-navigation">
101
+ <ul>
102
+ <li class="first"><a href="#block-text">Text</a></li>
103
+ <li class="active"><a href="#block-tables">Tables</a></li>
104
+ <li><a href="#block-forms">Forms</a></li>
105
+ <li><a href="#block-messages">Messages</a></li>
106
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
107
+ <li><a href="#block-lists">Lists</a></li>
108
+ </ul>
109
+ <div class="clear"></div>
110
+ </div>
111
+ <div class="content">
112
+ <h2 class="title">Tables</h2>
113
+ <div class="inner">
114
+ <form action="#" class="form">
115
+ <table class="table">
116
+ <tr>
117
+ <th class="first"><input type="checkbox" class="checkbox toggle" /></th>
118
+ <th>ID</th>
119
+ <th>Login</th>
120
+ <th>Name</th>
121
+ <th>Surname</th>
122
+ <th class="last">&nbsp;</th>
123
+ </tr>
124
+ <tr class="odd">
125
+ <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>1</td><td>hulk</td><td>Hulk</td><td>Hogan</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
126
+ </tr>
127
+ <tr class="even">
128
+ <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>2</td><td>ultimate</td><td>Ultimate</td><td>Warrior</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
129
+ </tr>
130
+ <tr class="odd">
131
+ <td><input type="checkbox" class="checkbox" name="id" value="1" /></td><td>3</td><td>andre</td><td>Andre</td><td>The Giant</td><td class="last"><a href="#">show</a> | <a href="#">edit</a> | <a href="#">destroy</a></td>
132
+ </tr>
133
+ <tr class="even">
134
+ <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>
135
+ </tr>
136
+ </table>
137
+ <div class="actions-bar">
138
+ <div class="actions">
139
+ <input type="submit" class="button" value="Delete" />
140
+ </div>
141
+ <div class="pagination">
142
+ <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>
143
+ </div>
144
+ <div class="clear"></div>
145
+ </div>
146
+ </form>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="block" id="block-forms">
152
+ <div class="secondary-navigation">
153
+ <ul>
154
+ <li class="first"><a href="#block-text">Text</a></li>
155
+ <li><a href="#block-tables">Tables</a></li>
156
+ <li class="active"><a href="#block-forms">Forms</a></li>
157
+ <li><a href="#block-messages">Messages</a></li>
158
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
159
+ <li><a href="#block-lists">Lists</a></li>
160
+ </ul>
161
+ <div class="clear"></div>
162
+ </div>
163
+ <div class="content">
164
+ <h2 class="title">Forms</h2>
165
+ <div class="inner">
166
+ <form action="#" method="get" class="form">
167
+ <div class="group">
168
+ <label class="label">Text field</label>
169
+ <input type="text" class="text_field" />
170
+ <span class="description">Ex: a simple text</span>
171
+ </div>
172
+ <div class="group">
173
+ <div class="fieldWithErrors">
174
+ <label class="label" for="post_title">Title</label>
175
+ <span class="error">can't be blank</span>
176
+ </div>
177
+ <input type="text" class="text_field" />
178
+ <span class="description">Ex: a simple text</span>
179
+ </div>
180
+ <div class="group">
181
+ <label class="label">Text area</label>
182
+ <textarea class="text_area" rows="10" cols="80"></textarea>
183
+ <span class="description">Write here a long text</span>
184
+ </div>
185
+ <div class="group navform">
186
+ <input type="submit" class="button" value="Save &rarr;" /> or <a href="#header">Cancel</a>
187
+ </div>
188
+ </form>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="block" id="block-messages">
194
+ <div class="secondary-navigation">
195
+ <ul>
196
+ <li class="first"><a href="#block-text">Text</a></li>
197
+ <li><a href="#block-tables">Tables</a></li>
198
+ <li><a href="#block-forms">Forms</a></li>
199
+ <li class="active"><a href="#block-messages">Messages</a></li>
200
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
201
+ <li><a href="#block-lists">Lists</a></li>
202
+ </ul>
203
+ <div class="clear"></div>
204
+ </div>
205
+ <div class="content">
206
+ <h2 class="title">Messages</h2>
207
+ <div class="inner">
208
+ <div class="flash">
209
+ <div class="message error">
210
+ <p>Error message</p>
211
+ </div>
212
+ <div class="message warning">
213
+ <p>Warning message</p>
214
+ </div>
215
+ <div class="message notice">
216
+ <p>Notice message</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="block" id="block-forms-2">
224
+ <div class="secondary-navigation">
225
+ <ul>
226
+ <li class="first"><a href="#block-text">Text</a></li>
227
+ <li><a href="#block-tables">Tables</a></li>
228
+ <li><a href="#block-forms">Forms</a></li>
229
+ <li><a href="#block-messages">Messages</a></li>
230
+ <li class="active"><a href="#block-forms-2">2 Columns Forms</a></li>
231
+ <li><a href="#block-lists">Lists</a></li>
232
+ </ul>
233
+ <div class="clear"></div>
234
+ </div>
235
+ <div class="content">
236
+ <h2 class="title">2 columns forms</h2>
237
+ <div class="inner">
238
+ <form action="#" method="get" class="form">
239
+ <div class="columns">
240
+ <div class="column left">
241
+ <div class="group">
242
+ <label class="label">Text field</label>
243
+ <input type="text" class="text_field" />
244
+ </div>
245
+ <div class="group">
246
+ <label class="label">Text area</label>
247
+ <textarea class="text_area" rows="10" cols="80"></textarea>
248
+ </div>
249
+ </div>
250
+ <div class="column right">
251
+ <div class="group">
252
+ <label class="label">Select</label>
253
+ <select><option value="1">Choose...</option></select>
254
+ </div>
255
+ <div class="group">
256
+ <label class="label">Check box</label>
257
+ <div>
258
+ <input type="checkbox" name="checkbox" id="checkbox_1" class="checkbox" value="1" /> <label for="checkbox_1" class="checkbox">Option 1</label>
259
+ </div>
260
+ <div>
261
+ <input type="checkbox" name="checkbox" id="checkbox_2" class="checkbox" value="2" /> <label for="checkbox_2" class="checkbox">Option 2</label>
262
+ </div>
263
+ </div>
264
+ <div class="group">
265
+ <label class="label">Radio</label>
266
+ <div>
267
+ <input type="radio" name="radio" id="radio_1" class="checkbox" value="1" /> <label for="radio_1" class="radio">Option 1</label>
268
+ </div>
269
+ <div>
270
+ <input type="radio" name="radio" id="radio_2" class="checkbox" value="2" /> <label for="radio_2" class="radio">Option 2</label>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <div class="clear"></div>
276
+ <div class="group navform">
277
+ <input type="submit" class="button" value="Save &rarr;" /> or <a href="#">Cancel</a>
278
+ </div>
279
+ </form>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="block" id="block-lists">
285
+ <div class="secondary-navigation">
286
+ <ul>
287
+ <li class="first"><a href="#block-text">Text</a></li>
288
+ <li><a href="#block-tables">Tables</a></li>
289
+ <li><a href="#block-forms">Forms</a></li>
290
+ <li><a href="#block-messages">Messages</a></li>
291
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
292
+ <li class="active"><a href="#block-lists">Lists</a></li>
293
+ </ul>
294
+ <div class="clear"></div>
295
+ </div>
296
+ <div class="content">
297
+ <h2 class="title">Lists</h2>
298
+ <div class="inner">
299
+ <ul class="list">
300
+ <li>
301
+ <div class="left">
302
+ <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
303
+ </div>
304
+ <div class="item">
305
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
306
+ </div>
307
+ </li>
308
+ <li>
309
+ <div class="left">
310
+ <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
311
+ </div>
312
+ <div class="item">
313
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
314
+ </div>
315
+ </li>
316
+ <li>
317
+ <div class="left">
318
+ <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
319
+ </div>
320
+ <div class="item">
321
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
322
+ </div>
323
+ </li>
324
+ </ul>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div id="footer">
329
+ <div class="block">
330
+ <p>Copyright &copy; 2009 Your Site.</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div id="sidebar">
335
+ <div class="block">
336
+ <h3>Simple Block</h3>
337
+ <div class="content">
338
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
339
+ </div>
340
+ </div>
341
+ <div class="block">
342
+ <h3>Switch Theme</h3>
343
+ <ul class="navigation">
344
+ <li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
345
+ <li class="last"><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
346
+ <li class="last"><a href="#" onclick="Theme.activate('bec-green'); return false;">Bec-Green</a></li>
347
+ <li><a href="#" onclick="Theme.activate('blue'); return false;">Blue</a></li>
348
+ <li><a href="#" onclick="Theme.activate('djime-cerulean'); return false;">Djime-Cerulean</a></li>
349
+ <li><a href="#" onclick="Theme.activate('reidb-greenish'); return false;">Greenish</a></li>
350
+ <li><a href="#" onclick="Theme.activate('kathleene'); return false;">Kathleene</a></li>
351
+ <li><a href="#" onclick="Theme.activate('orange'); return false;">Orange</a></li>
352
+ <li><a href="#" onclick="Theme.activate('drastic-dark'); return false;">Drastic Dark</a></li>
353
+ <li><a href="#" onclick="Theme.activate('warehouse'); return false;">Warehouse</a></li>
354
+ </ul>
355
+ </div>
356
+ <div class="block">
357
+ <h3>Sidebar</h3>
358
+ <ul class="navigation">
359
+ <li><a href="#block-text">Text</a></li>
360
+ <li><a href="#block-tables">Tables</a></li>
361
+ <li><a href="#block-forms">Forms</a></li>
362
+ <li><a href="#block-messages">Messages</a></li>
363
+ <li><a href="#block-forms-2">2 Columns Forms</a></li>
364
+ <li><a href="#block-lists">Lists</a></li>
365
+ </ul>
366
+ </div>
367
+ <div class="block notice">
368
+ <h4>Notice Title</h4>
369
+ <p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac aliquam blandit, 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>
370
+ </div>
371
+ <div class="block">
372
+ <div class="sidebar-block">
373
+ <h4>Sidebar Inner block Title</h4>
374
+ <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>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="clear"></div>
379
+ </div>
380
+ <div id="box">
381
+ <h1>Web App Theme</h1>
382
+ <div class="block" id="block-login">
383
+ <h2>Login Box</h2>
384
+ <div class="content login">
385
+ <div class="flash">
386
+ <div class="message notice">
387
+ <p>Logged in successfully</p>
388
+ </div>
389
+ </div>
390
+ <form action="#" class="form login">
391
+ <div class="group">
392
+ <div class="left">
393
+ <label class="label right">Login</label>
394
+ </div>
395
+ <div class="right">
396
+ <input type="text" class="text_field" />
397
+ </div>
398
+ <div class="clear"></div>
399
+ </div>
400
+ <div class="group">
401
+ <div class="left">
402
+ <label class="label right">Password</label>
403
+ </div>
404
+ <div class="right">
405
+ <input type="password" class="text_field" />
406
+ </div>
407
+ <div class="clear"></div>
408
+ </div>
409
+ <div class="group navform">
410
+ <div class="right">
411
+ <input type="submit" class="button" value="Login" />
412
+ </div>
413
+ <div class="clear"></div>
414
+ </div>
415
+ </form>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="block" id="block-signup">
420
+ <h2>Sign up</h2>
421
+ <div class="content">
422
+ <form action="#" class="form">
423
+ <div class="group">
424
+ <div class="left">
425
+ <label class="label">Login</label>
426
+ </div>
427
+ <div class="right">
428
+ <input type="text" class="text_field" />
429
+ <span class="description">Ex: web-app-theme</span>
430
+ </div>
431
+ <div class="clear"></div>
432
+ </div>
433
+ <div class="group">
434
+ <div class="left">
435
+ <label class="label">Email</label>
436
+ </div>
437
+ <div class="right">
438
+ <input type="text" class="text_field" />
439
+ <span class="description">Ex: test@example.com</span>
440
+ </div>
441
+ <div class="clear"></div>
442
+ </div>
443
+ <div class="group">
444
+ <div class="left">
445
+ <label class="label">Password</label>
446
+ </div>
447
+ <div class="right">
448
+ <input type="password" class="text_field" />
449
+ <span class="description">Must contains the word 'yeah'</span>
450
+ </div>
451
+ <div class="clear"></div>
452
+ </div>
453
+
454
+ <div class="group">
455
+ <label class="label">Text field</label>
456
+ <input type="text" class="text_field" />
457
+ <span class="description">Ex: a simple text</span>
458
+ </div>
459
+ <div class="group">
460
+ <label class="label">Text field</label>
461
+ <input type="text" class="text_field" />
462
+ <span class="description">Ex: a simple text</span>
463
+ </div>
464
+ <div class="group navform">
465
+ <input type="submit" class="button" value="Sign up" />
466
+ </div>
467
+ </form>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </body>
473
+ </html>
474
+