origami
文件大小: unknow
源码售价: 5 个金币 积分规则     积分充值
资源说明:A Rails Engine plugin with opinions about how to lay out a web page.
h1. Origami

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

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:

	

	
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. h2. The Solution In your controller: layout '2_column_left_menu_pixel' In your views: Blah blah blah the body of your view automatically goes in "column_1", which will always be at the top of the HTML file and other columns will always come after it. <% content_for :column_2 do %> Put something here. <% end %> 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. Matthew James Taylor templates Origami uses HTML/CSS layouts by "Matthew James Taylor":http://matthewjamestaylor.com/ which have many features: 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. 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 main page comes first, then any supplemental columns. The columns can also be configured in the opposite order if required. h4. Full length column background colours 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! h4. No Images 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? 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. h4. Resizable text 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? h4. No 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. h4. No IE Conditional Comments 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. h4. Browser Compatibility The layouts have been tested on the following browsers: * iPhone & iPod Touch ** Safari * Mac ** Safari ** Firefox ** Opera 9.25 ** Netscape 9.0.0.5 & 7.1 * Windows ** Firefox 1.5, 2 & 3 ** Safari ** Opera 8.1 & 9 ** Google Chrome ** Explorer 5.5, 6 & 7 ** Netscape 8 h4. Valid XHTML strict markup The HTML in the layouts validates as XHTML 1.0 strict. h2. Customize 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. If you're in a hurry then you might rather just customize the page title and a few other things using environment.rb constants: TITLE = 'Your Web Site Title Here' DESCRIPTION = 'Your meta description tag.' # Optional. KEYWORDS = 'Your, Keywords, Here' # Optional. ICON = 'http://you/your/shortcut/icon.gif' THEME = 'blue' # Style sheet theme name. # Optional. WIDTH = '980px' # The overall page width, as a CSS value. ie: '980px', '100%', '100em' h2. Optional 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: GOOGLE_ANALYTICS_ACCOUNT = 'UA-376????-?' h2. Engine 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. h2. Install h3. As a Rails plugin script/plugin install git://github.com/endymion/origami.git h3. As a Ruby Gem I would really like to know why this method of installing it as a gem doesn't work? In config/environment.rb: config.gem "endymion-origami", :lib => 'origami', :source => 'http://gems.github.com', :version => '>=0.1.0' Vendor the gem: rake gems:install rake gems:unpack Note: the unpack step is required because this gem is a Rails Engine plugin.

本源码包内暂不包含可直接显示的源代码文件,请下载源码包。