Generic GeoNode Theme

Layout

The generic theme calls for a six-column layout with an overall width of 960px. Each of the three primary columns or sidebars are 300px wide, with 10px margins and 20px padding that result in a content area that is 260px across. Double-wide columns are 640px across, with 10px margins and 20px padding that result in a content area that is 600px across. The full-span column is 920px across with 10px margins and 20px padding that result in a content area that is 880px across.

Examples

Application View

There is a different treatment for our full-screen application views—namely the content and header are no longer centered, the footer is dropped, and the navigation dispenses with tabs in favor of breadcrumbs. (Does that last option make sense?)

Typography and Forms

The typography conventions should hew pretty closely to those of  Boilerplate CSS, with the primary typefaces being Helvetica Neue, Arial, Helvetica, and FreeSans (in that order).

Because of our adoption of ExtJS throughout the GeoNode project, we should probably match the Ext style for forms and buttons. We can explore this further later, but for now we made our bed and now we have to sleep in it. (Will their use of Tahoma as a typeface be an issue?)

Colors

  • #00A6D3 (accent color, header)
  • #008CB4 (accent color, header)
  • #003C4C (for headings and links)
  • #CDE2E8 (for border of footer or callout boxes)
  • #F1F6F7 (for background of footer or callout boxes)
  • #111111 (for primary text)
  • #888888 (for secondary text, help text, etc)
  • #D8D8D8 (for horizontal rules, etc)

Notes

See also, this article on  theming the Django admin interface to match the color scheme of the rest of the theme.

Precedents

Attachments