Voog standard theme definition

Every Voog standard theme consists of a certain set of components. Here's how you can build one too — or use it as a checklist to build a simple custom website for your customers.

A theme has a few different page layouts for different kind of content — a front page, text and blog pages). Common elements for different layouts can be defined as separate reusable components (e.g. header, footer, sidebar, body). In addition there are image files, stylesheets, javascripts and fonts supporting each design.

Start with this Pripyat design example (download from github) — or any other — as a reference point and keep in mind the following checklist:

Layouts

Front page

• 1 menu level
• Search box
• Header, footer, body

Text page

• 3 menu levels
• Search box
• Header, footer, body

Blog

A list of recent blog articles each of them featuring usually the following components:

• Title
• Author
• Publishing date
• Number of comments
• Article excerpt

Good alternatives to consider:

• Few latest articles on top have all the components. All the rest would only have titles and dates.
• A single-page blog, where each article is shown on the listing page as a whole.

Blog post

Whole blog post with comments and commenting area.

• Title
• Publishing date
• Number of comments
• Author's name,
• List of comments (with heading, e.g 5 comments)
• Comments (together with author, date)
• Commenting area (with heading (e.g. Add a comment), name, email and comment fields with labels and a submit button (e.g. Comment)).

Components

The following is just an example. For example you may decide to set menus into footer or sidebar instead. Also, you might have no header and use sidebar instead. Or divide body into columns etc.

Header

• 1-3 menu levels. Don't forget to design active states, hovers for each level
• Place for logo / Site name
• Language menu (again — active state and hover too)
• Search box (with a submit button or looking-glass icon)

Body

• Paragraph of text with paragraph style (Line space, indents, space between paragraphs)
• Plain text hyperlink
• Hyperlink with hover
• Header levels 1, 2, 3
• Bulleted list

Footer

• Contacts
• A link to Voog
• You should also include an analytics tag for reporting