Basic Rhtml Templates

Slate page templates are created using HTML, CSS, & Ruby on Rails (a server-side language), therefore the file extension on a template will always be .rhtml . Within the templates, you will see/use a variety of helper codes to pull page partials, automatically generate things like navigation links, and link to shared resources.

Developers Package

Every WVU web site must use the official theme. It includes HTML5, XHTML, & RHTML files, header and footer, and style sheets. The style sheet defines the typographic scale, underlying grid framework, and styling for typographic elements. The theme also includes a Photoshop template with grid, color swatches, and typography palette. We have set up an example page for your reference.

Visit UR: Web Design Guidelines and download the Slate Toolkit on Github.

Simplified Template Example

<!DOCTYPE>
<html>
  <head>
    <title><%= page_name %> | <%= site_name %> | West Virginia University</title>
    <link href="<%= theme_path %>/stylesheets/styles.css" rel="stylesheet" type="text/css" />
    <%= support_files %>
    <%= google_analytics -%>
  </head>
  <body>
    <%= admin_toolbar %>
    <div>
      <%= content_for(:main) %>
    </div>
  </body>
</html>

Common Template Helpers: defined

Code Description
<%= site_name %> Inserts the 'Name' of the site from Slate. Whatever the site space is named in Slate is what will appear here.
<%= page_name %> Inserts the name of the page from Slate. Whatever the page is titled in Slate Slate is what will appear here.
<%= theme_path %> Any links to documents/files within your theme need this helper at the beginning of the 'href' or 'src' attribute, as shown in the stylesheet link above. NOTE: This helper will essentially replace the beginning of your url with something like this: http://slate.wvu.edu/themes/THEME_NAME/...
<%= images_path %> Similar to <%= theme_path %>, this helper needs to be used in the beginning of the 'src' attribute of any image that is hard-coded into a template. NOTE: This helper will essentially replace the beginning of your image url with something like this: http://slate.wvu.edu/themes/THEME_NAME/images/...
<%= support_files %> The support files link should be included in all templates. This link attaches the core operational files that Slate needs to use this file as a template.
<%= google_analytics -%> This link inserts Google Analytics tracking code, and should always be included just after the opening body tag. To track pages, a tracking key must also be added to the site apace in Slate. That process is detailed here.
<%= admin_toolbar %> This helper should be included in all templates as well, it includes files to generate the User Interface on the Admin side when viewing pages.
<%= content_for(:main) %> This helper you will use regularly, it defines an editable region in the template. Whatever word used within the parenthesizes(after the colon), is what the editable region will be called in Slate. The example shown will make a region called 'Main'.
NOTE: In Slate, the Page ID and the editable region name are the two key factors used to associate content with a particular part of a page. For that reason, two content regions with the same name will result in duplicate content on a page. In addition, changing the name of a content region on a page template that is in use will result in the content that is currently associated with that area losing its association, and the area will then show up blank on any pages that were created prior to the change.
<%= partial :navigation -%>
     calls and inserts
_navigation.rhtml
This helper calls for a page partial. You can see the file naming convention for a partial on the third line to the left, page partials should always start with an underscore( _ ). The word after the colon in the helper is the name of the file being called for, minus the underscore. Click here for full documentation on using partials.
<ul>
<% for page in site_menu %>
<li><%= link_to_page page %></li>
<% end %>
</ul>
The code to the left will create an unordered list of top-level pages in the Slate site space (Hidden pages will not show). This code can be placed in your template where you would like your main navigation to be populated.
<%= link_to_default_page %>
<% for crumb in breadcrumbs %>
?» <%= link_to_page crumb %>
<% end %>
This code will create Breadcrumb links to show the user where they are in your site.

Conclusion

This has just been an overview of template basics. To get started, please download the starter theme kit at https://github.com/wvuweb/slate-toolkit and use the Rhtml templates and PS files supplied to get things under way.