= !BluePrint for CSS =
[[TOC]]

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 [http://bluetrip.org BlueTrip]? [[BR]]
A: Probably not as their value isn't proven.

The CSS could still do with some cleaning up to remove unused styles.

CSS can be previewed in different browsers, however no interaction is possible:
 * http://browsershots.org/
 * IE only: http://ipinfo.info/netrenderer/

Original Sahana CSS documented here: [wiki:DeveloperGuidelinesCSS]

Maximal usability ideas:
 * http://www.alistapart.com/articles/progressiveenhancementwithcss

HTML5 Cross-browser polyfills:
 * https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

== Theme Manager ==
 * The selection & application of a theme should be moved to the same (or related) area as the Theme Editor, rather than hiding it within the main Settings area.
 * 'Apply Theme' should be an explicit option.

 * Ext Theme Builders:
  * Online: http://extbuilder.dynalias.com/springapp/mainpage.htm
  * Eclipse plugin: http://spket.com/ext-theme-builder.html

== 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).

[PakistanDevelopers#Printing 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

 * http://www.slideshare.net/nickf/mobile-web-user-experience
 * http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Theme which works well on both Desktops & Mobiles:
 * http://yoko.elmastudio.de

jQuery Mobile? 
 * http://jquerymobile.com/


Also want touch support really...

CSS sufficient?
 * http://mobiforge.com/Designing
 * http://www.slideshare.net/nickf/mobile-ux (eye opening examples on mobile usability)
 * http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Detection:
 * Client-side with javascript 
   * http://www.modernizr.com/
 * Server-side most reliable:
  * http://pypi.python.org/pypi/pywurfl/
   * [http://code.google.com/p/djangobile/ Djangobile] can be used for ideas on how to integrate into web2py
  * http://www.handsetdetection.com/
 * If not,possible then call fallback to client-side:
  * http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
   * http://code.google.com/p/mobileesp/source/browse/JavaScript/mdetect.js

Mobile Emulators:
 * http://mobiforge.com/emulators/page/mobile-emulators
 * http://www.opera.com/mobile/demo/ (No !JavaScript)
 * Nokia screen sizes: http://forum.mobiles24.com/showthread.php?t=9980
  * Remember that some screen lost for nav tools & that usually used in portrait mode

Examples:
 * http://blog.bestpractical.com/2010/08/mobile-rt.html

Could consider using the RESTlike CRUD controller's ?format=plain

==== 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)