endymion-origami 0.1.3 → 0.1.4

data/README.textile

@@ -1,6 +1,10 @@
 h1. Origami
 
-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.
+There are some fantastic "CSS frameworks":http://en.wikipedia.org/wiki/CSS_framework out there, and there a growing number of tools like "Sass":http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html and "Compass":http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html for working with those frameworks from a high level.
+
+However, you do not get the best results if you do your page layout purely with the grid positioning systems provided in CSS frameworks.  This is because the higher up content is in your page code, the more important it is considered by search engine algorithms. To make your website as optimized as possible your main page content must come before the side columns. Origami does exactly that: The main page comes first, then supplemental columns. You can also override the layouts to place your columns in any order you like.
+
+Origami is agnostic of CSS frameworks and it's easy to integrate with Compass and Sass, so that your layouts can easily use some of the fantastic frameworks like "Blueprint":http://www.blueprintcss.org/ that are provided by Compass.
 
 h2. The Problem
 
@@ -27,53 +31,49 @@ In your views:
     Put something here.
     <% end %>
 
-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.
+Your mental model for laying out a page consists of the normal page body, plus in some cases things like a "column_2" section, a "header", a "footer", etc.  Origami handles the implementation of those concepts for you.  It wraps your page body in the necessary divs, calculates the necessary dynamic styles, and applies them.  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.
 
 h2. Features
 
-h3. Blueprint
-
-Sensible CSS defaults from "BlueTrip":http://bluetrip.org
-
 h3. Matthew James Taylor templates
 
 Origami uses HTML/CSS layouts by "Matthew James Taylor":http://matthewjamestaylor.com/ which have many features:
 
-h3. No CSS Hacks
+h4. No CSS Hacks
 
 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.
 
-h3. SEO friendly 2-1 column ordering
+h4. SEO friendly 2-1 column ordering
 
-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.
+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 main page comes first, then any supplemental columns. The columns can also be configured in the opposite order if required.
 
-h3. Full length column background colours
+h4. Full length column background colours
 
-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!
+In these layouts 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!
 
-h3. No Images
+h4. No Images
 
-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?
+The layouts require 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?
 
-h3. No JavaScript
+h4. No JavaScript
 
 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.
 
-h3. Resizable text compatible
+h4. Resizable text compatible
 
-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?
+The layouts are 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?
 
-h3. No Quirks Mode
+h4. No Quirks Mode
 
-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.
+The liquid layouts do not require the XML declarations for them to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.
 
-h3. No IE Conditional Comments
+h4. No IE Conditional Comments
 
-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.
+Only one stylesheet is used with the layouts. 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.
 
-h3. Browser Compatibility
+h4. Browser Compatibility
 
-This left menu liquid Layout has been tested on the following browsers:
+The layouts have been tested on the following browsers:
 
 * iPhone & iPod Touch
 ** Safari
@@ -90,9 +90,9 @@ This left menu liquid Layout has been tested on the following browsers:
 ** Explorer 5.5, 6 & 7
 ** Netscape 8
 
-h3. Valid XHTML strict markup
+h4. Valid XHTML strict markup
 
-The HTML in this layout validates as XHTML 1.0 strict.
+The HTML in the layouts validates as XHTML 1.0 strict.
 
 h2. Customize
 
@@ -119,12 +119,6 @@ Origami is a Rails engine. It works with versions of Rails greater than 2.3.  It
 
 h2. Install
 
-Do this for now:
-
-	script/plugin install git://github.com/endymion/origami.git
-
-This is how I'm trying to get it to work but I'm currently having problems making Origami available as a Ruby Gem:
-
 In config/environment.rb:
 
     config.gem "endymion-origami",
@@ -136,3 +130,11 @@ Vendor the gem:
 
     rake gems:install
     rake gems:unpack
+
+Note: the unpack step is required because this gem is a Rails Engine plugin.
+
+Or, if you prefer to install it as a plugin:
+
+	script/plugin install git://github.com/endymion/origami.git
+
+

data/app/helpers/layout_helper.rb

@@ -5,12 +5,8 @@ module LayoutHelper
     concat render(:partial => partial_name, :locals => options)
   end
 
-  def layout_and_theme_stylesheets(layout, options = {}, &block)
-    block_to_partial('layouts/layout_and_theme_stylesheets', options.merge(:layout => layout), &block)
-  end
-
-  def head(options = {}, &block)
-    block_to_partial('layouts/head', options, &block)
+  def head(layout, options = {}, &block)
+    render(:partial => 'layouts/head', :locals => {:layout => layout})
   end
 
   def body(options = {}, &block)

data/app/views/layouts/1_column_pixel.html.erb

@@ -1,76 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
-<% head do %>
-		<title>The Full Page 1 column Liquid Layout. Pixel padding widths. Cross-Browser. Equal Height Columns.</title>
-		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
-		<meta name="description" content="The Full Page 1 column Liquid Layout. Pixel padding widths. Cross-Browser. Equal Height Columns." />
-		<meta name="keywords" content="The Full Page 1 column Liquid Layout. Pixel padding widths. Cross-Browser. Equal Height Columns." />
-		<meta name="robots" content="index, follow" />
-		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-		
-	<% layout_and_theme_stylesheets '1_column_pixel' do %>
-	    <style media="screen" type="text/css">
-	    /* <!-- */
-	    /* General styles */
-	    body {
-	        margin:0;
-	        padding:0;
-	        border:0;			/* This removes the border around the viewport in old versions of IE */
-	        width:100%;
-	        min-width:600px;    /* Minimum width of layout - remove line if not required */
-								/* The min-width property does not work in old versions of Internet Explorer */
-	    }
-		/* Header styles */
-	    #header {
-	        clear:both;
-	        float:left;
-	        width:100%;
-	    }
-		#header {
-			border-bottom:1px solid #000;
-		}
-		#header p,
-		#header h1,
-		#header h2 {
-		    padding:.4em 15px 0 15px;
-	        margin:0;
-		}
-		/* 'widths' sub menu */
-		#layoutdims {
-			clear:both;
-			border-top:4px solid #000;
-			margin:0;
-			padding:6px 15px !important;
-			text-align:right;
-		}
-		/* column container */
-		.colmask {
-			position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
-		    clear:both;
-		    float:left;
-	        width:100%;			/* width of whole page */
-			overflow:hidden;	/* This chops off any overhanging divs */
-		}
-		/* 1 column full page settings */
-		.fullpage .col1 {
-	        margin:0 15px;
-		}
-		/* Footer styles */
-		#footer {
-	        clear:both;
-	        float:left;
-	        width:100%;
-			border-top:1px solid #000;
-	    }
-	    #footer p {
-	        padding:10px;
-	        margin:0;
-	    }
-	    /* --> */
-	    </style>
-	<% end %>
-<% end %>
+<%= head '1_column_pixel' %>
 
 <% body do %>
 

data/app/views/layouts/3_column_blog_pixel.html.erb

@@ -1,164 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
-<% head do %>
-
-		<title>The Blog Style 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.</title>
-		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
-		<meta name="description" content="The Blog Style 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns." />
-		<meta name="keywords" content="The Blog Style 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns." />
-		<meta name="robots" content="index, follow" />
-		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-	<% end %>
-	<% layout_and_theme_stylesheets '3_column_blog_pixel' do %>
-	    <style media="screen" type="text/css">
-	    /* <!-- */
-	    /* General styles */
-	    body {
-	        margin:0;
-	        padding:0;
-	        border:0;			/* This removes the border around the viewport in old versions of IE */
-	        width:100%;
-	        background:#fff;
-	        min-width:600px;    /* Minimum width of layout - remove line if not required */
-								/* The min-width property does not work in old versions of Internet Explorer */
-	    }
-		/* Header styles */
-	    #header {
-	        clear:both;
-	        float:left;
-	        width:100%;
-	    }
-		#header {
-			border-bottom:1px solid #000;
-		}
-		#header p,
-		#header h1,
-		#header h2 {
-		    padding:.4em 15px 0 15px;
-	        margin:0;
-		}
-		#header ul {
-		    clear:left;
-		    float:left;
-		    width:100%;
-		    list-style:none;
-		    margin:10px 0 0 0;
-		    padding:0;
-		}
-		#header ul li {
-		    display:inline;
-		    list-style:none;
-		    margin:0;
-		    padding:0;
-		}
-		#header ul li a {
-		    display:block;
-		    float:left;
-		    margin:0 0 0 1px;
-		    padding:3px 10px;
-		    text-align:center;
-		    background:#eee;
-		    color:#000;
-		    text-decoration:none;
-		    position:relative;
-		    left:15px;
-			line-height:1.3em;
-		}
-		#header ul li a:hover {
-		    background:#369;
-			color:#fff;
-		}
-		#header ul li a.active,
-		#header ul li a.active:hover {
-		    color:#fff;
-		    background:#000;
-		    font-weight:bold;
-		}
-		#header ul li a span {
-		    display:block;
-		}
-		/* 'widths' sub menu */
-		#layoutdims {
-			clear:both;
-			background:#eee;
-			border-top:4px solid #000;
-			margin:0;
-			padding:6px 15px !important;
-			text-align:right;
-		}
-		/* column container */
-		.colmask {
-			position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
-		    clear:both;
-		    float:left;
-	        width:100%;				/* width of whole page */
-			overflow:hidden;		/* This chops off any overhanging divs */
-		}
-		/* 3 column blog style settings */
-		.blogstyle {
-		    background:#ff9;    	/* Right column background colour */
-		}
-	    .blogstyle .colmid {
-	        float:left;
-	        width:200%;
-	        margin-left:-200px; 	/* Width of right column */
-	        position:relative;
-	        right:100%;
-	        background:#FFD8B7;    	/* Centre column background colour */
-	    }
-	    .blogstyle .colleft {
-	        float:left;
-	        width:100%;
-	        margin-left:-200px; 	/* Width of centre column */
-	        background:#fff;    	/* Left column background colour */
-	    }
-	    .blogstyle .col1wrap {
-	        float:left;
-		    width:50%;
-		    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
-		}
-		.blogstyle .col1 {
-	        margin:0 15px 0 415px;	/* Centre column side padding:
-	                            	Left padding = left column width + centre column left padding width
-	                            	Right padding = right column width + centre column right padding width */
-	        position:relative;
-		    left:100%;
-		    overflow:hidden;
-		}
-	    .blogstyle .col2 {
-	        float:right;
-	        width:170px;        	/* Width of left column content (left column width minus left and right padding) */
-	        position:relative;
-	        left:185px;         	/* Width of the left-had side padding on the left column */
-	    }
-	    .blogstyle .col3 {
-	        float:right;
-	        width:170px;        	/* Width of right column content (right column width minus left and right padding) */
-	        position:relative;
-	        left:555px;
-	    }
-		/* Footer styles */
-		#footer {
-	        clear:both;
-	        float:left;
-	        width:100%;
-			border-top:1px solid #000;
-	    }
-	    #footer p {
-	        padding:10px;
-	        margin:0;
-	    }
-	    /* --> */
-	    </style>
-	    <!--[if lt IE 7]>
-	    <style media="screen" type="text/css">
-	    .col1 {
-		    width:100%;
-		}
-	    </style>
-	    <![endif]-->
-<% end %>
+<%= head '3_column_blog_pixel' %>
 
 <% body do %>
 

data/app/views/layouts/_head.html.erb

@@ -15,9 +15,15 @@
 <% end -%>
 <meta name="robots" content="index, follow" />
 
-<%= stylesheet_link_tag 'screen', :media => 'screen, projection' %>
-<%= stylesheet_link_tag 'style', :media => 'screen, projection' %>
-<%= stylesheet_link_tag 'print', :media => 'print' %>
+<%= render :partial => 'layouts/stylesheets', :locals => { :layout => layout } %>
+<%  theme = THEME if defined?(THEME)
+	theme = @theme unless @theme.nil?
+	if theme.nil? -%>
+<% else -%>
+<%= stylesheet_link_tag "layouts/#{layout}" %>
+<%= stylesheet_link_tag theme %>
+<% end -%>
 
 <%= render :partial => 'layouts/javascript_includes' %>
+
 </head>

data/app/views/layouts/_javascript_includes.html.erb

@@ -1 +1 @@
-<%= javascript_include_tag :defaults %>
+<%= javascript_include_tag :defaults %>

data/app/views/layouts/_stylesheets.html.erb

@@ -0,0 +1,6 @@
+<% if defined?(BLUEPRINT) -%>
+<%= stylesheet_link_tag 'compiled/screen', :media => 'screen, projection' %>
+<%= stylesheet_link_tag 'compiled/style', :media => 'screen, projection' %>
+<%= stylesheet_link_tag 'compiled/print', :media => 'print' %>
+<!--[if IE]><%= stylesheet_link_tag 'compiled/ie', :media => 'screen, projection' %><![endif]-->
+<% end -%>

data/lib/origami.rb

@@ -1,9 +0,0 @@
-class ApplicationController < ActionController::Base
-
-  # Override render so that it will look for a layout setting.
-  def render(options = {}, extra_options = {}, &block)
-    options.merge!(:layout => @layout) unless @layout.nil?
-    super(options, extra_options, &block)
-  end
-
-end

data/origami.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{origami}
-  s.version = "0.1.3"
+  s.version = "0.1.4"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Ryan Porter", "Matthew James Taylor"]
-  s.date = %q{2009-05-18}
+  s.date = %q{2009-05-19}
   s.description = %q{Origami is a Rails Engine plugin that handles the tedious parts of setting up HTML/CSS layoutspec.}
   s.email = %q{rap@endymion.com}
   s.extra_rdoc_files = [
@@ -43,30 +43,8 @@ Gem::Specification.new do |s|
      "app/views/layouts/_header.html.erb",
      "app/views/layouts/_image_replacement.html.erb",
      "app/views/layouts/_javascript_includes.html.erb",
-     "app/views/layouts/_layout_and_theme_stylesheets.html.erb",
+     "app/views/layouts/_stylesheets.html.erb",
      "app/views/layouts/stacked_columns.html.erb",
-     "assets/bluetrip-css-framework/LICENSE",
-     "assets/bluetrip-css-framework/README.rst",
-     "assets/bluetrip-css-framework/css/ie.css",
-     "assets/bluetrip-css-framework/css/print.css",
-     "assets/bluetrip-css-framework/css/screen.css",
-     "assets/bluetrip-css-framework/css/style.css",
-     "assets/bluetrip-css-framework/examples/grid.html",
-     "assets/bluetrip-css-framework/examples/index.html",
-     "assets/bluetrip-css-framework/examples/test-small.jpg",
-     "assets/bluetrip-css-framework/img/grid.png",
-     "assets/bluetrip-css-framework/img/icons/cross.png",
-     "assets/bluetrip-css-framework/img/icons/doc.png",
-     "assets/bluetrip-css-framework/img/icons/email.png",
-     "assets/bluetrip-css-framework/img/icons/external.png",
-     "assets/bluetrip-css-framework/img/icons/feed.png",
-     "assets/bluetrip-css-framework/img/icons/im.png",
-     "assets/bluetrip-css-framework/img/icons/information.png",
-     "assets/bluetrip-css-framework/img/icons/key.png",
-     "assets/bluetrip-css-framework/img/icons/pdf.png",
-     "assets/bluetrip-css-framework/img/icons/tick.png",
-     "assets/bluetrip-css-framework/img/icons/visited.png",
-     "assets/bluetrip-css-framework/img/icons/xls.png",
      "init.rb",
      "install.rb",
      "lib/origami.rb",