Presentation of the dist (SPIP3.1)

HTML structure

The templates are in Transitional XHTML 1.0

Here is the structure of the main blocks:

• body
  • .page
    • .header
    • .nav
    • .main
      • .wrapper
        • .content
      • .aside
    • .footer

Dimensions of the main blocks

The main block .page is centred and is 960 pixels wide.
The template is minimally responsive and introduces two break points at 767 pixels and 640 pixels wide.

Style Sheets call

The style sheets call uses the daisy method.
It follows a strict calling order of the style sheets to facilitate their understanding, maintenance and customization in a web project.

Therefore the style sheets are called from the most general to the most specific.

In detail, here are the files called by the dist templates:

• 1. The styles Tinytypo
  • reset.css reset HTML tags
  • clear.css define models for the composition and layout (alignment, block model, ...)
  • font.css (Optional) call personalized fonts (often called "font-face")
  • links.css hyperlinks definition
  • typo.css typographic base
  • media.css layout of images, videos, canvas, ...
  • form.css basic layout of forms
  • grid.css (optional) grid
  • layout.css layout of the main blocks

• 2. Styles of SPIP and its plugins
  • spip.css styles generated by SPIP
  • styles generated by plugins and inserted the #INSERT_HEAD_CSS tag

• 3. Your style sheets for the site layout
  • theme.css general theme
  • variante.css (optional) variant of the theme
  • perso.css (Optional) personal settings on the theme

For better performance, it is possible for the site administrator to activate the concatenation of all these css sheets using the option provided for this purpose (tab "Advanced" menu "Configuration" of the private area).