Sahana CSS Convention

Introduction

Sahana uses valid CSS 2.1 for content styling and layout. The use of web standards enables Sahana to be accessible to the highest number of users, including differently-abled people and people using alternative browsing devices such as mobile phones and PDAs. It also allows Sahana interfaces to be light and fast loading, and be consistent across a wide number of web browsers.

Guidelines

There are 3 stylesheets for each theme:

  1. sahana.css (For media types screen and projection)
  2. mobile.css (For media type handheld)
  3. print.css (For media type print)

The following general guidelines should be adhered to when using/modifying Sahana interfaces:

  • Follow the Sahana HTML Convention for structural markup.
  • Define additional CSS classes or ids only if the existing ones can't target the required element
  • Validate your CSS with the W3C CSS Validator
  • When defining ids in the style sheets, place them in the order of their appearance in the html document.
  • The printing style sheet is used to take printouts of web forms used in the system so that they can be distributed to collect data. So the print style sheet must not contain any unnecessary items. Also it is used to take hard copies of search results.
  • The style sheet should work properly in “800×600” and “1024×768” resolutions.
  • Please make sure the style sheet would work in popular browsers as you intended.

Layout Elements

The following main elements are defined for the Sahana interface template.

container

This is the wrapper element for all contents of the page. It's right after the <body> tag.

The header element is where the Sahana logo and other header section content appears.

wrapper

The wrapper element contains the actual content specific to each page (i.e., everything except the header and the footer).

skip

The skip paragraph contains the quick links to the content section and the main menu. This is especially useful to mobile and screen reader users.

modmenuwrap

This element holds the module menu, which is an unordered list <ul id=“modmenu”>.

This element holds the main menu, which is an unordered list <ul id=“menu”>.

loginform

This element holds the login form.

content

The content element holds the crux of the page. This is where the page specific content is presented.

The footer element holds the footer content.

There are 2 main navigation elements in Sahana.

  1. Module Menu
  2. Main Menu

Module Menu

The module menu can go two levels deep. The following is an example xhtml which identifies the IDs used in the module menu.

<ul id="modulemenu">
	<li id="modactive"><a href="http://www.sahana.lk/" id="modcurrent">Add Camp</a>
		<ul id="modsubmenu">
			<li><a href="http://www.sahana.lk/">Add Camp</a></li>
			<li id="modsubactive"><a href="http://www.sahana.lk/" id="modsubcurrent">Search camp</a></li>
			<li><a href="http://www.sahana.lk/">View Camps</a></li>
		</ul>
	</li>
	<li><a href="http://www.sahana.lk/">Search camp</a></li>
	<li><a href="http://www.sahana.lk/">View Camps</a></li>
	<li><a href="http://www.sahana.lk/">Statistics</a></li>
</ul>

The menu is in an unordered list ul with the modulemenu ID. The currently selected main option should have modactive ID on the li element, and modcurrent on the a element. If there's a sub menu for this selected link, it should be contained within the li element, in an unordered list ul with the modsubmenu ID. If a sub menu item is selected, it should have the modsubactive ID on its li element, and modsubcurrent on the a element.

Like the module menu, the main menu too can go two levels deep. The following is an example xhtml which identifies the IDs used in the main menu.

<ul id="menu">
	<li><a href="#">Disaster Victim Registry</a></li>
	<li id="active"><a href="#" id="current">Camp Management System</a>
		<ul id="submenu">
			<li><a href="http://www.sahana.lk/">Add Camp</a></li>
			<li id="subactive"><a href="http://www.sahana.lk/" id="subcurrent">Search camp</a></li>
			<li><a href="http://www.sahana.lk/">View Camps</a></li>
			<li><a href="http://www.sahana.lk/">Statistics</a></li>
		</ul>
	</li>
	<li><a href="#">Request and Assistance Management System</a></li>
	<li><a href="#">Organization Registry</a></li>
	<li><a href="#">News</a></li>
</ul>

The menu is in an unordered list ul with the menu ID. The currently selected main option should have active ID on the li element, and current on the a element. If there's a sub menu for this selected link, it should be contained within the li element, in an unordered list ul with the submenu ID. If a sub menu item is selected, it should have the subactive ID on its li element, and subcurrent on the a element.

Thus, the example shows the currently selected main menu item as Home > Camp Management System > Search Camp.

Arrangement of Elements

The following is the basic arrangement of these elements:

<div id=”container”>
  <div id=”header”></div>
  <div id="wrapper">
    <p id="skip"></p>
    <div id="modmenuwrap"></div>
    <div id="menuwrap"></div>
    <div id="loginform"></div>
    <div id="content"></div>
  </div>
  <div id=”footer”></div>
</div>

Form Elements

Several main elements have been introduced to create forms.

formcontainer

This is the container for all the forms within a page.

formset

This includes the styles for a single form within the page.

Form creation

All the form template handlers are located in the library inc/lib_forms.inc. Here is an example of some code you would write to create a form:

    shn_form_fopen('dbsetup', 'admin');  // open the form with action dbsetup and module admin
 
    shn_form_fsopen('Database');
    shn_form_select(
        array( 'mysql' => 'MySQL 4.1'),
                "Database Type", "dbtype");
    shn_form_text('Database Host:Port','dbhost','size="30"',
                array('value'=>'localhost','req'=>true ));
    shn_form_text('Database Name','dbname','size="30"',
                array('value'=>'sahana', 'req'=>true));
    shn_form_text('Database User','dbuser','size="30"',
                array('value'=>'root', 'req'=>true));
    shn_form_password('Database Password','dbpass','size="30"', array('req'=>true));
    shn_form_fsclose();
 
    shn_form_fsopen('Schema\'s to Install');
    shn_form_checkbox('Create Main Database tables','dbcreate',"checked",
                        array('value'=>'y'));
    shn_form_checkbox('Default Configuration','dbconfig',"checked",
                        array('value'=>'y'));
    shn_form_checkbox('Sample Data','dbsample','',
                        array('value'=>'y'));
    shn_form_fsclose();
    shn_form_submit('Setup Database >>');
 
    shn_form_fclose();

And it generates something like this:

    <div id="formcontainer">
    <form method="POST" action="index.php?mod=admin&act=dbsetup" id="formset" >
    <fieldset>

    <legend>Database</legend>
    <label>Database Type</label>
    <select name="dbtype"  >
        <option value="mysql" selected>MySQL 4.1</option>
    </select> 

    <br/>
    <label>Database Host:Port</label>

    <input type="text" name="dbhost" value="localhost" size="30" />

    <b>*(req)</b>

    <br/>
    <label>Database Name</label>
    <input type="text" name="dbname" value="sahana" size="30" />

    <b>*(req)</b>

    <br/>
    <label>Database User</label>
    <input type="text" name="dbuser" value="root" size="30" />

    <b>*(req)</b>

    <br/>
    <label>Database Password</label>

    <input type="password" name="dbpass" value="" size="30" />

    <b>*(req)</b>

    <br/>
    </fieldset>
    <fieldset>
    <legend>Schema's to Install</legend>
    <label>Create Main Database tables</label>

    <input type="checkbox" name="dbcreate" value="y" checked  />

    <br/>
    <label>Default Configuration</label>
    <input type="checkbox" name="dbconfig" value="y" checked  />

    <br/>
    <label>Sample Data</label>
    <input type="checkbox" name="dbsample" value="y"   />

    <br/>
    </fieldset>
    <input type="submit" value="Setup Database >>"/>
    </form>
    </div> <!-- /formcontainer -->

Tabular Results Elements

Several elements have been included to format tabular results.

result

This is the container of the table with results.

Example Results Set

An example results set using above mentioned elements is gieven below.

<div id ="result">
    <h2>Organization Registry</h2>
    <table>
    <thead>
         <td>Organization Name</td>
         <td>Contact Address</td>
    </thead>
    <tbody>
         <tr>
         <td>Test Name</td>
         <td>Test Address</td>
         </tr>
    </tbody>
    </table>
</div> 

Error Element

To indicate errors generated by the system error id has been used. You can use this id to highlight errors.

error

This is the container for the error and a unordered list of comments.

Example Error Element

The following example shows how the error id has been used.

<div id="error">
    <p><em>Sorry, you do not have permission to access this section</em>.<br/><br/>This could be because:</ul>
    <ul>
       <li>You have not logged in or Anonymous access is not allowed to this section</li>
       <li>Your user name has not been given permission to access this section</li>
    </ul>
    <p>To gain access to this section please contact the administrator</p>
</div>

Navigation
QR Code
QR Code dev:css_convention (generated for current page)