Page Layout and Styling Standards

Layout and styling standards will be iterated on this page until we have a solid set of guidelines. Please add / revise as you see fit for now.

HTML Coding

• Output should be standards compliant
  • Strict XHTML1.1 output
  • CSS2.1

• Pages should primarily consist of <div>, <h1,2,n>, <form, input..>, and <p> tags.

• Tables should only be used to present tabular data. We will attempt to accomplish all other positioning and alignment using styled <div>s.
  • this site has some good info on styling technique for form label and field alignment: http://www.themaninblue.com/experiment/InForm/margin.htm

• We should learn about and try to follow W3C Accessibility Guidelines
  • Guidelines here: http://www.w3.org/TR/WCAG20/
  • Accessibility compliance testing tool here: http://bobby.watchfire.com/bobby/html/en/index.jsp
  • (let's list most important specifics rules here...)
  • Accessibility features should be automated (handled in the PHP page/form element creation code) as much as possible

Styling Guidelines

• Page elements should be styled using classes rather than identifiers as much as possible. This will help limit the size and complexity of the stylesheets and facilitate the automated application of styles by the php page creation code.

• For our Drupal implementation, we should use existing Drupal conventions for class naming and assignment as much as possible (i.e. don't invent our own classes if an existing class is semantically appropriate).
  • Check out Drupal admin pages to find usage conventions for classifying various page, table and form elements.
  • Example: we'll use the Drupal-standard <div class="messages error"> to style our page level error message blocks.
  • Example: we assign class="form-text required" to required <input type="text" /> fields, and add error child class if displaying field w/ validation error ("form-text required error")

• All CRM-specific style rules will go in a separate stylesheet for our 'module' - civicrm.css. (I will work with Lobo to create this file and put it in the 'correct' spot and include it in the page headers)
  • We will wrap our main content block with <div id="crm-container">...our stuff..</div>. This allows us to still use semantically appropriate classes (e.g. .form-text ) - but override their styling by putting new display rules for the class in our own stylesheet. For example:

Text input fields will be sized via stylesheet child class(es). The HTML size= attribute will be inserted, but will not be relied on to control field size. Field size classes corresponding to the field length/size constants are defined in CRM/type.php.

• Identifiers SHOULD be assigned to major page elements/blocks. We will use these id's for styling only when necessary for default positioning, and/or to handle UNIQUE styling needs. However, having id's on all important elements will ALLOW for styling by 3rd party designers.