Quem Somos

The SquareMile template is based on our own CSS framework named Pragma.

Why create another CSS framework – you may ask – don't we already have too many? Well, indeed there are many CSS frameworks available, we have used some of them them in our projects and they are great. However, in every framework we tried something was missing and we ended up writing a lot of custom CSS. Using one framework we often thought of features included in another and wished it had them as well. This made us think whether we could combine some of these features and create a new framework which had everything we needed. Thus the Pragma framework was born. It is loosely based on concepts found in the YUI CSS framework, 960 Grid System and the OOCSS.

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.

The main principle of the pragma framework is separation:

• conceptual separation of the document layers
• and physical separation (separate files) of CSS responsible for different aspects of the design

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

To summarise the SquareMile template structure:

• The HTML document contains document sections, document sections contain grids, grids contain modules with content inside.
• The CSS is split between multiple files. You shouldn't need to modify the framework CSS (reset.css, base.css, base_sizes_[size].css, grid.css), but you my want to add or change something in the template CSS files (template.css, template-colors.css).

This was just an introduction showing the concepts behind the SquareMile template and its underlying framework. It didn't explain every detail, but should give you enough information to further explore yourself all the different pages included in the SquareMile template.