Draft document for developing a set of standards for form and page markup (HTML) and styling (CSS).

Public vs Backend Pages

CSS for Public Pages should inherit CMS styles as much as possible. CSS for "back-office" pages should specify styles for all page elements so the pages have a consistent look regardless of CMS theme.

We already set a flag for this ($urlIsPublic) so differentiating the main container class (crm-container -> crm-container-public OR crm-container-backend) would be easy. Then have to limit the classes used for 'public' to only the absolutely needed ones - and let those pages inherit from the CMS for most elements.

Markup and styling - things that we need to define standards for:

1. All forms

2. Simple forms - Stack of single fields (Label + Field Element)

layout for form elements with labels should comply with the following standard wherever possible:

<div class="section {$form.item.id}-section">
            <div class="label">{$form.item.label}</div>
            <div class="content">{$form.item.html}</div>
            <div class="clear"></div>
</div>

layout for form elements without labels should comply with the following standard wherever possible:

<div class="section {$form.item.id}-section">
            <div class="content">{$form.item.html}</div>
</div>

if the variable {$form.item.id} is not available, {$form.item.name} may be subsituted (although this is only possible if the name will be a LEGAL css declaration (no "(", "[" etc...)

if the neither {$form.item.id} nor {$form.item.name} is usable, then you may substitute a descriptive name in lowercase with underscores for breaks between words such that:

<div class="section custom_item-section">
            <div class="content">{$form.custom_item.html}</div>
</div>

for logical groups of fields (such as an address block) - the entire groupd of fields should be wrapped in a div:

<div class="section description_of_group-section">

** Disagree with below -- non-sematic clearing div is bad. Instead somthing like drupal's clear-block/easy-clearing should be implemented on the .section element **

<div class="section {$form.item.id}-section">
            <div class="label">{$form.item.label}</div>
            <div class="content">{$form.item.html}</div>
            <div class="clear"></div>
</div>

<div class="section {$form.item.id}-section">
            <div class="content">{$form.item.html}</div>
</div>

<div class="section {$form.item.id}-section">
            <div class="content">{$form.item.html}</div>
</div>

</div>

any div with class "section" whose parent also has class "section" will have a reduced bottom margin, which implies "grouping" of the child divs.

form fields may have additional information added just to the right :

<div class="section {$form.credit_card_number.name}-section">
                            <div class="label">{$form.credit_card_number.label}</div>
                            <div class="content">{$form.credit_card_number.html}<br />
                                <span class="description">Enter numbers only, no spaces or dashes.</span>
                            </div>
                            <div class="clear"></div>
                        </div>

or directly below it:
<div class="section {$form.credit_card_number.name}-section">
                            <div class="label">{$form.credit_card_number.label}</div>
                            <div class="content">{$form.credit_card_number.html}<br />
                                <div class="description">Enter numbers only, no spaces or dashes.</div>
                            </div>
                            <div class="clear"></div>
                        </div>

3. Complex forms (more than 1 column of fields)

4. Dynamic Forms (profiles)

5. Wizards (multi-step processes)

6. Tables

6a. Record listings (aka selectors)

6b. Reports

(same as record listings ?)

6c. Summary tables  (e.g. dashboards, import summary, ...)

7. Menu blocks (e.g. Global Settings, Configure Contribution Page / Event)

8. Pages

When do we use H1 2 and 3 and divs, jquery widgets.

How do we use divs to divide pages into sections