Semantic CSS Classes

Introduction

A lot of JSP pages use table for layout and fragile CSS class names (for example_, fontnormalRedBold_, bluetableborder, etc). Tables, liberal use of CSS classes tend to clutter the page, making it hard to read and maintain. Semantic CSS classes solve this by abstract presentation logic out of HTML into CSS. The result is cleaner, more compact HTML that is easier to read. Classes can be reused on a new page - making a good looking page a snap.

Supported Classes

You can find semantic classes in app.css. To see them in action, fire up your local Mifos instance and point your browser to http://localhost:8080/mifos/showcaseCss.ftl.

Some Guidelines

• When adding a new semantic CSS class, please update showcaseCss.ftl for everyone's benefit.
• Some semantic CSS classes are best applied to a wrapper div. Use standard HTML tags to markup the content inside the wrapper. For example:

  <div class="preview">
    <p>This is a preview</p>
    <br/>
    <div class="row">
      <div class="attribute">Foo</div>
      <div class="value">Bar</div>
    </div>
    <div class="row">
      <div class="attribute">Foo2</div>
      <div class="value">Bar2</div>
    </div>
  </div>
  

• Avoid using tables. Instead wrap the content with a div tag and assign an existing or new CSS class. Rows and columns should be wrapped in div tags. See example above. The exception to this is if you are creating the table for @widget.datatable.