endymion-origami 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. data/MIT-LICENSE +20 -0
  2. data/README.textile +138 -0
  3. data/Rakefile +39 -0
  4. data/app/helpers/layout_helper.rb +44 -0
  5. data/app/views/layouts/1_column_em.html.erb +110 -0
  6. data/app/views/layouts/1_column_percentage.html.erb +127 -0
  7. data/app/views/layouts/1_column_pixel.html.erb +110 -0
  8. data/app/views/layouts/2_column_left_menu_em.html.erb +209 -0
  9. data/app/views/layouts/2_column_left_menu_percentage.html.erb +181 -0
  10. data/app/views/layouts/2_column_left_menu_pixel.html.erb +216 -0
  11. data/app/views/layouts/2_column_right_menu_em.html.erb +204 -0
  12. data/app/views/layouts/2_column_right_menu_percentage.html.erb +227 -0
  13. data/app/views/layouts/2_column_right_menu_pixel.html.erb +240 -0
  14. data/app/views/layouts/3_column_blog_em.html.erb +257 -0
  15. data/app/views/layouts/3_column_blog_percentage.html.erb +255 -0
  16. data/app/views/layouts/3_column_blog_pixel.html.erb +268 -0
  17. data/app/views/layouts/3_column_holy_grail_em.html.erb +262 -0
  18. data/app/views/layouts/3_column_holy_grail_percentage.html.erb +255 -0
  19. data/app/views/layouts/3_column_holy_grail_pixel.html.erb +262 -0
  20. data/app/views/layouts/_body.html.erb +7 -0
  21. data/app/views/layouts/_column_1.html.erb +5 -0
  22. data/app/views/layouts/_column_2.html.erb +5 -0
  23. data/app/views/layouts/_column_3.html.erb +5 -0
  24. data/app/views/layouts/_flashes.html.erb +15 -0
  25. data/app/views/layouts/_footer.html.erb +5 -0
  26. data/app/views/layouts/_google_analytics_tracker.html.erb +8 -0
  27. data/app/views/layouts/_head.html.erb +23 -0
  28. data/app/views/layouts/_header.html.erb +5 -0
  29. data/app/views/layouts/_image_replacement.html.erb +3 -0
  30. data/app/views/layouts/_javascript_includes.html.erb +1 -0
  31. data/app/views/layouts/_layout_and_theme_stylesheets.html.erb +8 -0
  32. data/app/views/layouts/stacked_columns.html.erb +418 -0
  33. data/assets/bluetrip-css-framework/LICENSE +312 -0
  34. data/assets/bluetrip-css-framework/README.rst +37 -0
  35. data/assets/bluetrip-css-framework/css/ie.css +21 -0
  36. data/assets/bluetrip-css-framework/css/print.css +49 -0
  37. data/assets/bluetrip-css-framework/css/screen.css +409 -0
  38. data/assets/bluetrip-css-framework/css/style.css +7 -0
  39. data/assets/bluetrip-css-framework/examples/grid.html +232 -0
  40. data/assets/bluetrip-css-framework/examples/index.html +263 -0
  41. data/assets/bluetrip-css-framework/examples/test-small.jpg +0 -0
  42. data/assets/bluetrip-css-framework/img/grid.png +0 -0
  43. data/assets/bluetrip-css-framework/img/icons/cross.png +0 -0
  44. data/assets/bluetrip-css-framework/img/icons/doc.png +0 -0
  45. data/assets/bluetrip-css-framework/img/icons/email.png +0 -0
  46. data/assets/bluetrip-css-framework/img/icons/external.png +0 -0
  47. data/assets/bluetrip-css-framework/img/icons/feed.png +0 -0
  48. data/assets/bluetrip-css-framework/img/icons/im.png +0 -0
  49. data/assets/bluetrip-css-framework/img/icons/information.png +0 -0
  50. data/assets/bluetrip-css-framework/img/icons/key.png +0 -0
  51. data/assets/bluetrip-css-framework/img/icons/pdf.png +0 -0
  52. data/assets/bluetrip-css-framework/img/icons/tick.png +0 -0
  53. data/assets/bluetrip-css-framework/img/icons/visited.png +0 -0
  54. data/assets/bluetrip-css-framework/img/icons/xls.png +0 -0
  55. data/init.rb +1 -0
  56. data/install.rb +1 -0
  57. data/lib/chaise.rb +9 -0
  58. data/origami.gemspec +118 -0
  59. data/public/stylesheets/1_column_em.css +117 -0
  60. data/public/stylesheets/1_column_percentage.css +134 -0
  61. data/public/stylesheets/1_column_pixel.css +117 -0
  62. data/public/stylesheets/2_column_left_menu_em.css +149 -0
  63. data/public/stylesheets/2_column_left_menu_percentage.css +142 -0
  64. data/public/stylesheets/2_column_left_menu_pixel.css +149 -0
  65. data/public/stylesheets/2_column_right_menu_em.css +148 -0
  66. data/public/stylesheets/2_column_right_menu_percentage.css +142 -0
  67. data/public/stylesheets/2_column_right_menu_pixel.css +148 -0
  68. data/public/stylesheets/3_column_blog_pixel.css +162 -0
  69. data/rails/init.rb +1 -0
  70. data/rdoc/classes/ApplicationController.html +151 -0
  71. data/rdoc/created.rid +1 -0
  72. data/rdoc/files/README_textile.html +363 -0
  73. data/rdoc/files/lib/chaise_rb.html +101 -0
  74. data/rdoc/fr_class_index.html +27 -0
  75. data/rdoc/fr_file_index.html +28 -0
  76. data/rdoc/fr_method_index.html +27 -0
  77. data/rdoc/index.html +24 -0
  78. data/rdoc/rdoc-style.css +208 -0
  79. data/tasks/chaise_tasks.rake +15 -0
  80. data/test/chaise_test.rb +26 -0
  81. data/test/test_helper.rb +3 -0
  82. data/uninstall.rb +1 -0
  83. metadata +136 -0
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2009 [name of plugin creator]
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,138 @@
1
+ h1. Origami
2
+
3
+ A Rails Engine plugin that handles the tedious parts of setting up HTML/CSS layouts. Developing Rails apps is a very high-level pursuit, but at some point you have to code an HTML layout and styling for your web applications. That can be pretty tedious unless you have A Way. There is no One True Way to lay out a web page, any more than there is One True Way to watch a sunset. But Origami is a nice way.
4
+
5
+ h2. The Problem
6
+
7
+ Properly coding an HTML layout is a pain in the neck. You have to put down your beautiful high-level Ruby code to deal with ugliness like:
8
+
9
+ <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
10
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
11
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></code></pre>
12
+
13
+ Code like this is important, but it's clutter that disrupts your thought processes. Apply Feng Shui to your application and get the clutter out of sight.
14
+
15
+ h2. The Solution
16
+
17
+ In your controller:
18
+
19
+ layout '2_column_left_menu_pixel'
20
+
21
+ In your views:
22
+
23
+ Blah blah blah the body of your view automatically goes in "column_1", which
24
+ will always be at the top of the HTML file and other columns will always
25
+ come after it.
26
+ <% content_for :column_2 do %>
27
+ Put something here.
28
+ <% end %>
29
+
30
+ Origami does the rest. It wraps your page body in the necessary divs, calculates the necessary styles, and applies them using app/views/layouts/application.rb. You get validating HTML code that works in any browser and you don't have to think about HTML or CSS. You focus on your application instead.
31
+
32
+ h2. Features
33
+
34
+ h3. Blueprint
35
+
36
+ Sensible CSS defaults from "BlueTrip":http://bluetrip.org
37
+
38
+ h3. Matthew James Taylor templates
39
+
40
+ Origami uses HTML/CSS layouts by "Matthew James Taylor":http://matthewjamestaylor.com/ which have many features:
41
+
42
+ h3. No CSS Hacks
43
+
44
+ The CSS used for the layouts in Origami are 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.
45
+
46
+ h3. SEO friendly 2-1 column ordering
47
+
48
+ The higher up content is in your page code, the more important it is considered by search engine algorithms. To make your website as optimised as possible your main page content must come before the side columns. This layout does exactly that: The the right-hand main page comes first, then the left column (see the nested div structure diagram for more info). The columns can also be configured in the opposite order if required.
49
+
50
+ h3. Full length column background colours
51
+
52
+ In this layout the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns!
53
+
54
+ h3. No Images
55
+
56
+ This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?
57
+
58
+ h3. No JavaScript
59
+
60
+ JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.
61
+
62
+ h3. Resizable text compatible
63
+
64
+ This layout is fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. So far this trackpad is only available on the MacBook Air but it will soon be rolled out to all of their systems. Is your website text-resizing compatible?
65
+
66
+ h3. No Quirks Mode
67
+
68
+ This liquid layout does not require the XML declaration for it to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.
69
+
70
+ h3. No IE Conditional Comments
71
+
72
+ Only one stylesheet is used with this layout This means that IE conditional comments are not needed to set extra CSS rules for older versions of Internet Explorer. This also means that ActivePackager can compress and consolidate the styles without breaking them.
73
+
74
+ h3. Browser Compatibility
75
+
76
+ This left menu liquid Layout has been tested on the following browsers:
77
+
78
+ * iPhone & iPod Touch
79
+ ** Safari
80
+ * Mac
81
+ ** Safari
82
+ ** Firefox
83
+ ** Opera 9.25
84
+ ** Netscape 9.0.0.5 & 7.1
85
+ * Windows
86
+ ** Firefox 1.5, 2 & 3
87
+ ** Safari
88
+ ** Opera 8.1 & 9
89
+ ** Google Chrome
90
+ ** Explorer 5.5, 6 & 7
91
+ ** Netscape 8
92
+
93
+ h3. Valid XHTML strict markup
94
+
95
+ The HTML in this layout validates as XHTML 1.0 strict.
96
+
97
+ h2. Customize
98
+
99
+ You can override any of the templates in the app/views/layouts folder in Origami. For example, if you're particular about your HTML DTD or something then copy the app/views/layouts/_head.html.erb file to your application and change it. Rails 2.3 will use your template instead of the one from Origami.
100
+
101
+ If you're in a hurry then you might rather just customize the page title and a few other things using environment.rb constants:
102
+
103
+ TITLE = 'Your Web Site Title Here'
104
+ DESCRIPTION = 'Your meta description tag.' # Optional.
105
+ KEYWORDS = 'Your, Keywords, Here' # Optional.
106
+ ICON = 'http://you/your/shortcut/icon.gif'
107
+ THEME = 'blue' # Style sheet theme name. # Optional.
108
+ WIDTH = '980px' # The overall page width, as a CSS value. ie: '980px', '100%', '100em'
109
+
110
+ h2. Optional
111
+
112
+ Google Analytics snippets are a common enough layout element that you can generate one automatically by just setting your Google Analytics account code in your environment.rb:
113
+
114
+ GOOGLE_ANALYTICS_ACCOUNT = 'UA-376????-?'
115
+
116
+ h2. Engine
117
+
118
+ Origami is a Rails engine. It works with versions of Rails greater than 2.3. It will not work with previous version of Rails because they will not import the layout templates from app/views/layouts in Origami. It may be possible to make Origami work with the Rails Engine plugin, but currently it only works with Rails 2.3.
119
+
120
+ h2. Install
121
+
122
+ Do this for now:
123
+
124
+ script/plugin install http://github.com/endymion/origami/tree/master
125
+
126
+ This is how I'm trying to get it to work but I'm currently having problems making Origami available as a Ruby Gem:
127
+
128
+ In config/environment.rb:
129
+
130
+ config.gem "endymion-origami",
131
+ :lib => 'origami',
132
+ :source => 'http://gems.github.com',
133
+ :version => '>=0.1.0'
134
+
135
+ Vendor the gem:
136
+
137
+ rake gems:install
138
+ rake gems:unpack
@@ -0,0 +1,39 @@
1
+ require 'rake'
2
+ require 'rake/testtask'
3
+ require 'rake/rdoctask'
4
+
5
+ desc 'Default: run unit tests.'
6
+ task :default => :test
7
+
8
+ desc 'Test the Origami plugin.'
9
+ Rake::TestTask.new(:test) do |t|
10
+ t.libs << 'lib'
11
+ t.libs << 'test'
12
+ t.pattern = 'test/**/*_test.rb'
13
+ t.verbose = true
14
+ end
15
+
16
+ desc 'Generate documentation for the Origami plugin.'
17
+ Rake::RDocTask.new(:rdoc) do |rdoc|
18
+ rdoc.rdoc_dir = 'rdoc'
19
+ rdoc.title = 'Origami'
20
+ rdoc.options << '--line-numbers' << '--inline-source'
21
+ rdoc.rdoc_files.include('README.textile')
22
+ rdoc.rdoc_files.include('lib/**/*.rb')
23
+ end
24
+
25
+ begin
26
+ require 'jeweler'
27
+ Jeweler::Tasks.new do |gemspec|
28
+ gemspec.name = "origami"
29
+ gemspec.summary = "A Rails Engine plugin for handling layouts."
30
+ gemspec.email = "rap@endymion.com"
31
+ # gemspec.homepage = "http://endymion.com/gems/origami"
32
+ gemspec.description = <<-EOF
33
+ Origami is a Rails Engine plugin that handles the tedious parts of setting up HTML/CSS layoutspec.
34
+ EOF
35
+ gemspec.authors = ["Ryan Porter", "Matthew James Taylor"]
36
+ end
37
+ rescue LoadError
38
+ puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
39
+ end
@@ -0,0 +1,44 @@
1
+ module LayoutHelper
2
+
3
+ def block_to_partial(partial_name, options = {}, &block)
4
+ options.merge!(:content => capture(&block))
5
+ concat render(:partial => partial_name, :locals => options)
6
+ end
7
+
8
+ def layout_and_theme_stylesheets(layout, options = {}, &block)
9
+ block_to_partial('layouts/layout_and_theme_stylesheets', options.merge(:layout => layout), &block)
10
+ end
11
+
12
+ def head(options = {}, &block)
13
+ block_to_partial('layouts/head', options, &block)
14
+ end
15
+
16
+ def body(options = {}, &block)
17
+ block_to_partial('layouts/body', options, &block)
18
+ end
19
+
20
+ def header(options = {}, &block)
21
+ block_to_partial('layouts/header', options, &block)
22
+ end
23
+
24
+ def column_1(options = {}, &block)
25
+ block_to_partial('layouts/column_1', options, &block)
26
+ end
27
+
28
+ def column_2(options = {}, &block)
29
+ block_to_partial('layouts/column_2', options, &block)
30
+ end
31
+
32
+ def column_3(options = {}, &block)
33
+ block_to_partial('layouts/column_3', options, &block)
34
+ end
35
+
36
+ def footer(options = {}, &block)
37
+ block_to_partial('layouts/footer', options, &block)
38
+ end
39
+
40
+ def google_analytics_tracker(account_id, options = {})
41
+ render(:partial => 'layouts/google_analytics_tracker', :locals => options.merge(:account_id => account_id))
42
+ end
43
+
44
+ end
@@ -0,0 +1,110 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
+ <html xmlns="http://www.w3.org/1999/xhtml">
4
+ <% head do %>
5
+ <title>The Full Page 1 column Liquid Layout. Em padding widths. Cross-Browser. Equal Height Columns.</title>
6
+ <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
7
+ <meta name="description" content="The Full Page 1 column Liquid Layout. Em padding widths. Cross-Browser. Equal Height Columns." />
8
+ <meta name="keywords" content="The Full Page 1 column Liquid Layout. Em padding widths. Cross-Browser. Equal Height Columns." />
9
+ <meta name="robots" content="index, follow" />
10
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
11
+
12
+ <% layout_and_theme_stylesheets '1_column_em' do %>
13
+ <style media="screen" type="text/css">
14
+ /* <!-- */
15
+ /* General styles */
16
+ body {
17
+ margin:0;
18
+ padding:0;
19
+ border:0; /* This removes the border around the viewport in old versions of IE */
20
+ width:100%;
21
+ min-width:600px; /* Minimum width of layout - remove line if not required */
22
+ /* The min-width property does not work in old versions of Internet Explorer */
23
+ }
24
+ /* Header styles */
25
+ #header {
26
+ clear:both;
27
+ float:left;
28
+ width:100%;
29
+ }
30
+ #header {
31
+ border-bottom:1px solid #000;
32
+ }
33
+ #header p,
34
+ #header h1,
35
+ #header h2 {
36
+ padding:.4em 15px 0 15px;
37
+ margin:0;
38
+ }
39
+ /* 'widths' sub menu */
40
+ #layoutdims {
41
+ clear:both;
42
+ border-top:4px solid #000;
43
+ margin:0;
44
+ padding:6px 15px !important;
45
+ text-align:right;
46
+ }
47
+ /* column container */
48
+ .colmask {
49
+ position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
50
+ clear:both;
51
+ float:left;
52
+ width:100%; /* width of whole page */
53
+ overflow:hidden; /* This chops off any overhanging divs */
54
+ }
55
+ /* 1 column full page settings */
56
+ .fullpage .col1 {
57
+ margin:0 1em;
58
+ }
59
+ /* Footer styles */
60
+ #footer {
61
+ clear:both;
62
+ float:left;
63
+ width:100%;
64
+ border-top:1px solid #000;
65
+ }
66
+ #footer p {
67
+ padding:10px;
68
+ margin:0;
69
+ }
70
+ /* --> */
71
+ </style>
72
+ <% end %>
73
+ <% end %>
74
+
75
+ <% body do %>
76
+
77
+ <div id="header">
78
+ <% header do %>
79
+ <p><a href="http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths" title="Ultimate multi-column liquid layouts (em and pixel widths)">&laquo; Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
80
+ <h1>The 'Full Page' 1 column Liquid Layout (Em-widths)</h1>
81
+ <h2>No CSS hacks. No Images. No JavaScript. Cross-browser.</h2>
82
+ <ul>
83
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm">3 Column <span>Holy Grail</span></a></li>
84
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-ems.htm">3 Column <span>Blog Style</span></a></li>
85
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm">2 Column <span>Left Menu</span></a></li>
86
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-ems.htm">2 Column <span>Right Menu</span></a></li>
87
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-ems.htm" class="active">1 Column <span>Full Page</span></a></li>
88
+ <li><a href="http://matthewjamestaylor.com/blog/ultimate-stacked-columns-ems.htm">Stacked <span>Columns</span></a></li>
89
+ </ul>
90
+ <p id="layoutdims">Measure columns in: <a href="http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm">Pixel widths</a> | <strong>Em widths</strong> | <a href="http://matthewjamestaylor.com/blog/perfect-full-page.htm">Percentage widths</a></p>
91
+ <% end %>
92
+ </div>
93
+ <div class="colmask fullpage">
94
+ <div class="col1">
95
+ <%= render :partial => 'layouts/flashes' -%>
96
+ <% column_1 do %>
97
+ <!-- Your page content will end up in here. -->
98
+ <% end %>
99
+ </div>
100
+ </div>
101
+ <div id="footer">
102
+ <% footer do %>
103
+ <p>This page uses the <a href="http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-ems.htm">'Full Page' 1 column Liquid Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
104
+ <% end %>
105
+ </div>
106
+
107
+ <%= google_analytics_tracker GOOGLE_ANALYTICS_ACCOUNT if defined?(GOOGLE_ANALYTICS_ACCOUNT) -%>
108
+
109
+ <% end %>
110
+ </html>
@@ -0,0 +1,127 @@
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" xml:lang="en-GB">
3
+ <% head do %>
4
+ <title>The Perfect full page Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.</title>
5
+ <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
6
+ <meta name="description" content="The Perfect full page Liquid Layout (double page): No CSS hacks. SEO friendly. iPhone compatible." />
7
+ <meta name="keywords" content="The Perfect full page Liquid Layout (double page): No CSS hacks. SEO friendly. iPhone compatible." />
8
+ <meta name="robots" content="index, follow" />
9
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
10
+
11
+ <% layout_and_theme_stylesheets '1_column_percentage' do %>
12
+ <style media="screen" type="text/css">
13
+ /* <!-- */
14
+ /* General styles */
15
+ body {
16
+ margin:0;
17
+ padding:0;
18
+ border:0; /* This removes the border around the viewport in old versions of IE */
19
+ width:100%;
20
+ min-width:600px; /* Minimum width of layout - remove line if not required */
21
+ /* The min-width property does not work in old versions of Internet Explorer */
22
+ }
23
+ /* Header styles */
24
+ #header {
25
+ clear:both;
26
+ float:left;
27
+ width:100%;
28
+ }
29
+ #header {
30
+ border-bottom:1px solid #000;
31
+ }
32
+ #header p,
33
+ #header h1,
34
+ #header h2 {
35
+ padding:.4em 15px 0 15px;
36
+ margin:0;
37
+ }
38
+ /* 'widths' sub menu */
39
+ #layoutdims {
40
+ clear:both;
41
+ border-top:4px solid #000;
42
+ margin:0;
43
+ padding:6px 15px !important;
44
+ text-align:right;
45
+ }
46
+ /* column container */
47
+ .colmask {
48
+ position:relative; /* This fixes the IE7 overflow hidden bug */
49
+ clear:both;
50
+ float:left;
51
+ width:100%; /* width of whole page */
52
+ overflow:hidden; /* This chops off any overhanging divs */
53
+ }
54
+ /* common column settings */
55
+ .colright,
56
+ .colmid,
57
+ .colleft {
58
+ float:left;
59
+ width:100%;
60
+ position:relative;
61
+ }
62
+ .col1,
63
+ .col2,
64
+ .col3 {
65
+ float:left;
66
+ position:relative;
67
+ padding:0 0 1em 0;
68
+ overflow:hidden;
69
+ }
70
+ /* Full page settings */
71
+ .fullpage .col1 {
72
+ width:96%; /* page width minus left and right padding */
73
+ left:2%; /* page left padding */
74
+ }
75
+ /* Footer styles */
76
+ #footer {
77
+ clear:both;
78
+ float:left;
79
+ width:100%;
80
+ border-top:1px solid #000;
81
+ }
82
+ #footer p {
83
+ padding:10px;
84
+ margin:0;
85
+ }
86
+ /* --> */
87
+ </style>
88
+ <% end %>
89
+ <% end %>
90
+
91
+ <% body do %>
92
+
93
+ <div id="header">
94
+ <% header do %>
95
+ <p><a href="http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts" title="Perfect multi-column liquid layouts - iPhone compatible">&laquo; Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
96
+ <h1>The Perfect Full Page Liquid Layout</h1>
97
+ <h2>No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser &amp; iPhone compatible.</h2>
98
+ <ul>
99
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm">3 Column <span>Holy Grail</span></a></li>
100
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm">3 Column <span>Blog Style</span></a></li>
101
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm">2 Column <span>Left Menu</span></a></li>
102
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm">2 Column <span>Right Menu</span></a></li>
103
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm">2 Column <span>Double Page</span></a></li>
104
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-full-page.htm" class="active">1 Column <span>Full Page</span></a></li>
105
+ <li><a href="http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm">Stacked <span>columns</span></a></li>
106
+ </ul>
107
+ <p id="layoutdims">Measure columns in: <a href="http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm">Pixel widths</a> | <a href="http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-ems.htm">Em widths</a> | <strong>Percentage widths</strong></p>
108
+ <% end %>
109
+ </div>
110
+ <div class="colmask fullpage">
111
+ <div class="col1">
112
+ <%= render :partial => 'layouts/flashes' -%>
113
+ <% column_1 do %>
114
+ <!-- Your page content will end up in here. -->
115
+ <% end %>
116
+ </div>
117
+ </div>
118
+ <div id="footer">
119
+ <% footer do %>
120
+ <p>This page uses the <a href="http://matthewjamestaylor.com/blog/perfect-full-page.htm">Perfect 'Full Page' 1 column Liquid Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
121
+ <% end %>
122
+ </div>
123
+
124
+ <%= google_analytics_tracker GOOGLE_ANALYTICS_ACCOUNT if defined?(GOOGLE_ANALYTICS_ACCOUNT) -%>
125
+
126
+ <% end %>
127
+ </html>