ABANDONED EXPLANATION

I'll trying to explain how to design a custom theme using HTML5 Zen 7.x-5.1.

Before using this page, you must install Zen as a base theme. Then, you must create a Zen subtheme and set it as the 'default' theme.

KNOWING THE THEME STRUCTURE

Theme Structure:

You basically have the following directories into your Theme:

> root directory
>> logo.png (Logo displayed in header section of page.)
>> screenshot.png (Icon displayed in appearance settings).
>> STARTERKIT.info.txt (you renamed this in step 3.)
>> template.php (This file isolates the logical layer of the presentation layer)
>> theme-settings.php ( Functions,forms and variables to set theme's configuration. )

> css directory:

"The most important files":
>> normalize.css
>> pages.css
>> navigation.css
>> nodes.css
>> blocks.css
>> forms.css
>> comments.css
>> fields.css
>> tabs.css
>> views-styles.css
>> wireframes.css
>> print.css

"Other css files":
"*-rtl.css" are CSS files needed to style content written in Right-to-Left languages, such as Arabic and
Hebrew. If your website doesn't use such languages, you can safely delete all of those CSS files.

>> normalize-rtl.css,pages-rtl.css,navigation-rtl.css,forms-rtl.css,tabs-rtl.css

>> drupal7-reference.css (*) Isn't used directly by your sub-theme

>> layouts directory IMPORTANT.

>>> fixed-width.css
>>> responsive-sidebars (*) It's the default layout in the .info file.

"Other css files":
>>> responsive-sidebars-rtl,fixed-width-rtl

> templates directory

It's empty at first.
You must put templates into this directory if you want to override the render process.

For example if you want to change the order that blocks are shown in the page structure. You can override the page.tpl.php template. This template is localized in your installation directory of Drupal on the path:
/drupal7.x/modules/system

> images directory
>>(*) Minimal initial set of theme's images.

> images-source (*)
>> screenshot.psd (*)psd of the Image displayed on the Appearance settings
> js
>> script.js

Sass (Sass is an extension of CSS3) The Zen Theme has been developed using Sass, which is then translated to CSS. Zen contains the Sass templates, if you want work with this technology.

> sass
> sass-extensions

CUSTOMIZING OUR THEME

In the previous sections we studied all the structure of StarterKit's Subtheme, but now we'll look for a easy way of customize our personal site once you have choice your web design in xhtml or psd format.

We can divide our web design in:

Page Structure.
Images,fonts and colors.
Order and content that we want to apply to this structure.

Page Structure

We have at least three ways of view the page structure:

In the web browser: View page code
In the Mozilla web browser: Installing a plugin like Firebug
Studying the page.tpl.php template

I recommend you uses Firebug and study at least the page.tpl.php template.

You can copy the page.tpl.php template from drupal7.x/modules/system

page.tpl.php

<div id="navigation"><div class="section">
$main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>
$secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
</div></div>

layout/responsive-sidebars.css

/*
* Navigation bar
*/

@media all and (min-width: 480px) {
#main {
padding-top: 3em; /* Move all the children of #main down to make room. */
position: relative;
}

#navigation {
position: absolute;
top: 0; /* Move the navbar up inside #main's padding. */
height: 3em;
width: 100%;
}
}

page.tpl.php shows the page content.
layout/responsive-sidebars.css determine position,size,and struture properties via css.

Images,fonts and colors.

Is very important to write styles like colours,fonts in distinct files that positions styles.
And very important too that you follows a hierarchical structure to configure your style's set.

Always that you can you must be as specifically as you can, by example: If you want apply a style to a menu that contains <li> label. Don't define a property for li selector. You must define a property that affects only to this menu. #menu li

Well, basically we'll establish two sets of archives:

One set that we'll call colours,fonts and images.
And another that we'll call layout.

All relative to first style's set can be configured using the following archives:

A first subset of styles archive can be:

pages.css

When we're creating a drupal theme, it contains a set of regions that determine how the content is shown in a site.
page.css file basically is used for configure properties about this regions. But properties like "float" or "height" must not be configurated here.
For example you can set a font for #site-slogan subregion.
#site-slogan { /* The slogan (or tagline) of a website */
margin: 0;
font-size: 1em;
}

but it'snt a good idea put
#site-slogan {
height...
position...
}
There are properties that you have to define in layout/responsive-sidebars.css stylessheet.

If you create new regions for your theme, you can configure its aspects in this file. You before must define this region in .info file.

navigation.css

This file is used to set menu styles. Main Menu, Secondary menu and others.

nodes.css

Node styling. In this file you can configure node presentation properties like title,promoted,sticky and comments

blocks.css

Block styling. In this file you can configure blocks presentation.
There are classes for Custom blocks and System blocks like block-user-login

forms.css

In this file you can define html form's controls styles like input control or label control. You can use this file to redefine by example the user access form.

comments.css

Comment Styling. This file contains classes about comments contents and styles that determines the way in wich these comments are shown in its containers.

normalize.css

This file must be changed once you have configured the rest of the files.
Why i say you this?
Because you can choice a down top desing in wich you set the specific styles first.
All content without styles must be covered with styles defined in normalize.css.

By example if you don't define a style from secondary menu in navigation.css file, you can define a style for li selector in navigaton.css and secondary menu will take this style in its list item.

>> fields.css
>> tabs.css
>> views-styles.css
>> wireframes.css
>> print.css