Anatomy of the SquareMile template

The document is divided into 3 layers:

• Document sections (headers, body sections and footers)
• Sections contain grids
• Grids contain modules

On the code level the CSS is split into several files:

• Generic framework CSS
  • reset.css – this is the CSS reset from YUI
  • base.css – typography base and some other global CSS definitions (excluding sizes and colours)
  • base_sizes_[size].css – typography size definitions
  • grid.css – document sections, grids and generic modules
• Template CSS
  • template.css – template specific modules and other non-generic CSS
  • template-colors.css – only colours and backgrounds

Our goal was to create a framework which would maximize re-usability and minimize the need to write custom CSS, but at the same time be flexible enough to allow a lot of design freedom. I think we have come pretty close to achieving this. Please refere to other sections to learn more about SquareMile template framework.