Source

Akhet / docs / default_content.rst

Default templates and stylesheet

The default home page was redesigned in Akhet 1.0 final to be a simple base you can start with and add to if you wish. It consists of four files:

  • A home page, zzz/templates/index.html
  • A site template, zzz/templates/site.html
  • A stylesheet, zzz/static/stylesheets/default.css
  • A "reset" stylesheet, zzz/static/stylesheets/reset.css

The HTML files are Mako templates. The stylesheets are static files.

index.html

This is a page template, so it contains the specific text for this page. It contains just the HTML body, not the tags around it or the HTML header. Those will be added by the site template. The first three lines are Mako constructs:

Line 1 makes the template inherit from the site template, which will add the surrounding HTML tags.

Lines 2 and 3 are Mako methods; they return values which will be used by the site template. Line 2 is the title for the "<title>" tag. Line 3 is the title to display inside the page. 'project' is a variable the view method passes via its return dict. The rest of the page is ordinary HTML so we won't bother showing it.

Site template

The site template contains everything around the page content: the "<html>" container tag, the HTML header, and the parts of the page body that are the same on every page. The most important construct here is the "${self.body()}" placeholder, which is where the entire page template will be rendered. Mako's 'self' construct chooses the highest-level variable available, which allows a page template to override a default value in a parent template the way Python class attributes override superclass attributes.

The "<head>" section contains the usual title, character set, stylesheet, and the like. You can modify these as you wish.

The "<body>" section contains a standardized header and footer; you can modify these as you wish to put the same doodads on all your pages.

Three "<%def>" methods are defined at the bottom of the file, which page templates can override:

The site template also has a stanza to display flash messages:

<div id="content">
<div id="flash-messages">
% for message in request.session.pop_flash():
    <div class="info">${message}</div>
% endfor
</div>

Flash messages are a queue of messages in the session which are displayed on the next page rendered. Normally a view will push a success or failure message and redirect, and the redirected-to page will display the message. If you call 'pop_flash' without a queue name, the default queue is used. This is enough for many programs. You can also define multiple queues for different kinds of messages, and then pop each queue separately and display it in a different way. For instance:

% for message in request.session.pop_flash("error"):
    <div class="error">${message}</div>
% endfor
% for message in request.session.pop_flash("warn"):
    <div class="error">${warning}</div>
% endfor

Reset stylesheet

This is an industry-standard reset stylesheet by Eric Meyer, which is in the public domain. The original site is http://meyerweb.com/eric/tools/css/reset/ . It resets all the tag styles to be consistent across browsers.

The top part of the page is Meyer's original stylesheet; the bottom contains some overrides. Meyers does remove some attributes which have generally been assumed to be intrinsic to the tag, such as margins around <p> and <h*>. His reasoning is that you should start with nothing and consciously re-add the styles you want. Some people may find this attitude to be overkill. The reset stylesheet is just provided as a service if you want to use it. In any case, we re-add some expected styles, and I also set <dt> to bold which is a pet peeve of mine.

If you want something with more bells and whistles, some Pyramid developers recommend HTML5 Boilerplate. It's also based on Meyer's stylesheet.

Default stylesheet

This is the stylesheet referenced in the page template; it inherits the reset stylesheet. It defines some styles the default home page needs. You'll probably want to adjust them for your layout.

The bottom section has styles for flash messages. The ".info" stanza is used by the default application. The ".warning" and ".error" styles are not used by default but are provided as extras.

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.