Here are some random ramblings about the design I'm shooting for with the new dgm theme, and other considerations and goals that I have.

CSS

First, tables are evil. They do not degrade well, and they are inflexible. By converting everything to CSS, it is possible to rearrange everything simply by changing the css file. To do this requires a bit of knowledge of CSS, especially the IE bugs documented at places like: http://www.positioniseverything.net/explorer.html

Here's how I'm designing it: All logical items are contained in div or span tags. Use id attributes to name blocks that have only one instance, and class tags to define all others. Actually, due to an IE bug, just do almost everything as a class attribute.

I have several important css files:

  • layout.css contains overall page layout settings
  • color.css contains all color related settings
  • style.css contains overall stylistic settings
  • pagename.css contains page-specific settings for "pagename.tpl"

styles for on item can be aggregated from multiple places, so a block with id="header" can have its color defined in color.css, and its font in style.css.

For objects that have similar colors, combined multiple classes into one declaration: 

.color1, .header, .cache, .somethingselse {
background: red;
}

That will give the background color to all four classes. Those classes can also be included elsewhere: 

.cache, .foo {
border: .1em;
}

Use "em" measurements wherever possible, because it scales with the default font size of the browser. Thus, when you use ctrl+/- in firebird, the page retains its layout. Pictures can be scaled using ems, too.

Smarty Templates

pages should assign content into various smarty variables, and then call container.tpl at the end: 

{capture assign="maincontent"}
content...
{/capture}
{capture assign="headercontent"}
header stuff...
{/capture}
{include file="container.tpl"}

container.tpl can then include the logical blocks in appropriate wrappers. Section variables to assign currently include:

  • page_css
  • page_javascript
  • headerrightcontent (automatically assigned in container.tpl)
  • headercontent
  • maincontent
  • menu (automatically assigned in container.tpl)