css and layout in rails

peryt

浏览: 55285 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ruby and rails

css rails layout

First, let's see a sample layout file in rails, and explain it step by step:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%= csrf_meta_tag %>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    
    <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
    <%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>
    <!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
    <%= stylesheet_link_tag 'custom', :media => 'screen' %>
  </head>
  <body>
    <div class="container">
      <header>
        <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
        <nav class="round">
          <ul>
            <li><%= link_to "Home", '#' %></li>
            <li><%= link_to "Help", '#' %></li>
            <li><%= link_to "Sign in", '#' %></li>
          </ul>
        </nav>
      </header>
      <section class="round">
        <%= yield %>
      </section>
    </div>
  </body>
</html>

1. rails 3 use html5 as default, as indicated in <!DOCTYPE html>

2. since html5 is too new, some old IE browsers like IE8 don't support totally support it, so we include some javascript code (known as "html5shiv")to work around it.

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

this code piece is weird.

it means, this line of script including will only be included if IE version is less than IE9.

[if lt IE 9] is not rails, it is conditional comment supported only by IE. This purpose is just supplying a way to provide code that only work in IE, not any other browsers. This is very useful

3. then

    <!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->

works the same way, if current browser less than IE8, it will include another css file.

This css file fixed many IE-only issues.

4. next, we include another css file, called "custom", to put your custom css, we haven't created it yet.

css is forgiving, even if there is no this file, our page still work fine.

5.next, we put all the contents in to a container div,

</div>

This is needed by blueprint,

the div tag in html is a generic division, it does nothing but divding the doc into distinct part.

in older html, div tags are used for nearly all site divisions, but html5 adds the "header", "nav" and "section" elements, for divisions common to many apps.

then, there are header and section elements, the header contains the site navigation(nav),

the section element contains the site's main content.

all html elements, including divs and the new html5 elements, can be assigned classed and ids.

these are merely labels, and are useful for styling with CSS. The main differences between classes and ids is that classed can be used multiple times on a page, but ids can only be use once.

<img alt="Sample App" class="round" src="/images/logo.png" />

6. inside the header is a rails helper called "image_tag"

<%= image_tag("logo.png", :alt => "Sample App", :class => "round")%>

note, we also passed a hash as second param,

let's see the html generated:

<img alt="Sample App" class="round" src="/images/logo.png" />

the alt attr is what will be displayed if there is no image.

a. you can see for a img tag, it is not <img></img>

instead, it is <img ....... />

this kind of tag are known as self-closing tags.

b. the alt attr is optional, if you don't specify this param, rails will auto use the file name of the image file, if image doesn't display.

c. rails helpers ofter take options hashes in this way, giving us the flexibility to add arbitrary html options without ever leaving Rails!

7. next is a list of navigation links, using unordered list tag <ul>

link_to is a rails helper to creat links, which will create <a href=""></a> as html.

the 1st argument is the link text.

the 2nd argument is the url, for now we just use "#" means blank link, link to itself. we will fill it with useful url later.

the generated html will be

<nav class="round">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Sign in</a></li>
  </ul>
</nav>

0
顶

0
踩

分享到：

add a sign up link to our home page | 4.4 play with class inheritance in ruby

2011-08-30 11:26
浏览 1082
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论