HTML Configuration
Meta Data
Don't forget to edit your page titles, meta keywords, and meta descriptions for each page. Also edit /_assets/includes/site-meta.html to change the references to the author, help, copyright notice and sitemap.
Structure Your HTML
While you can use CSS to lay out your pages pretty much however you want, you should have your HTML in the correct order in the source. For Roots, it's like this:
- <body>
- <div id="page">
- <div id="header">
- <div id="section-header"> (optional)
- <div id="content">
- <div id="main-content" class="section main">
- <div id="auxiliary-content" class="section auxiliary"> (optional)
- <div id="tertiary-content" class="section tertiary"> (optional)
- <div id="footer">
- <div id="page">
In order to correctly use a layout grid, you'll need to have the right HTML "hooks" in place. These hooks are just classes on your elements. For your main column, you'll use class="section main"; for a second column, use class="section auxiliary"; for a third, use class="section tertiary". All of these elements should be inside the #content div, in that order.
You'll be editing the layout grid CSS files in the CSS section.
Edit Included Files
There are several files you should edit—all of which are in the /_assets/includes/ folder—to make Roots specific to your site. Here's the rundown:
- header.html
- This file is for your logo and your menu, and for the auto-detection of per-section headers, which is discussed after this section.
- global-menu.html
- header.html references this file, which is the main menu for your site. Include this file wherever you want your menu to appear (maybe you want it to be in the footer too?). Make sure to edit the links and text to fit your site. If you change the class names on the menu items, you'll also need to update the color scheme files (discussed in more detail in the CSS section).
- site-meta.html
- As discussed in the Meta Data section, this is for including references to the site map, and search page of your site
- news.html and search.html
- These files are optional, and are for inclusion anywhere on your site that you feel is appropriate.
- footer.html
- This file is for copyright notices, etc.
- assets.html
- This file is for including any CSS or JS files that should be included on EVERY page of the site. Use Section Includes if you need them to be included on only a certain section of your site.
Section Includes
Roots supports automatically including files based on the directory you're currently in. For example, http://labs.zorked.com/roots/ gives us "roots" as the section. The header.html and footer.html files in the /_assets/includes/ folder will attempt to include /_assets/includes/sections/roots/header.html or /_assets/includes/sections/roots/footer.html, respectively. You can turn either or both of these off, or prevent them from working for certain directories.
For example, in the header.html file, you will see a section of code: <!--#set var="USE_SECTION_HEADER" value="true"-->. Set "true" = "false" to stop it from checking entirely.
To prevent certain directories from triggering the includes, add them to the if block in the SSI file.
Before
<!--#if expr="
$USE_SECTION_HEADER = true &&
$CURRENT_SECTION != 'index' &&
$CURRENT_SECTION != 'directory-with-no-section-header'
"-->
After>
<!--#if expr="
$USE_SECTION_HEADER = true &&
$CURRENT_SECTION != 'index' &&
$CURRENT_SECTION != 'directory-with-no-section-header' &&
$CURRENT_SECTION != 'new-directory'
"-->
You can take this concept and apply it anywhere within your pages. A good use might be for variably including certain CSS files based on the section of the site you're on.