BluePrint for CSS

Original Sahana CSS documented here: DeveloperGuidelines/Themes

We have moved to a full page design to allow maximal screen real estate to be available for list views & data entry. Ours is based on:

• ​http://matthewjamestaylor.com/blog/perfect-full-page.htm
• This was inspired by the work done on Sahana PHP: ​http://demo.respere.com/dnn/
• Link on doing something similar with the default web2py menu: ​http://groups.google.com/group/web2py/browse_thread/thread/ecffcd0427af0fec

The logo font is Brush Script.

Q: Should we migrate to ​BlueTrip?
A: Probably not as their value isn't proven.

CSS can be previewed in different browsers, however no interaction is possible:

• ​http://browsershots.org/
• IE only: ​http://ipinfo.info/netrenderer/

Maximal usability ideas:

• ​http://www.alistapart.com/articles/progressiveenhancementwithcss

HTML5 Cross-browser polyfills:

• ​https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Menus

BluePrintMenu

Alternative layouts

We should include alternate layouts which different views can inherit from (common areas included into these to be DRY):

• Site home & Module homes act as portals, which require a more complex layout, such as:
  • 3 columns: ​http://matthewjamestaylor.com/blog/perfect-3-column.htm
  • Stackable: ​http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm

Q: How to {{include}} content into multiple areas? (How is it done with the JPolite app?)

Can use LOAD to import a component into an area of a webpage. Updates to this component happen independently to the rest of the page:

• ​http://www.web2py.com/AlterEgo/default/show/252

Right-to-Left theme

We already have a simple:

body {
    direction: rtl;
}

This is currently set using the Theme.

We could look at setting this based on a lookup of the current locale.

Print View

Provide a view which allows for better Printing

• CSS sufficient? (media=print)

Browsers don't print pages in identical ways...if this is key, need to use PDF (like for format=ocr).

Print on a Map

Mobile View

Provide a cut-down version for use on low-screensize, low-bandwidth devices, such as Mobiles.

• BluePrint/Mobile/Portal

Current Issues

Are there any big ones?

• Main page content displays well as text reflows due to nice column layout
• Top-menu works fine, but fixed-width means a lot of scrolling (could use improvement, but hard to fix)
  • GIS Catalogue Toolbar also needs scrolling - ugly, but usable
• dataTables work but need some scrolling (not sure this is possible to work around & seems OK)