Présentation de la dist (SPIP3.1)

Structure du HTML

Le squelette est en XHTML 1.0 Transitionnel

Voici la structure des principaux blocs :

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

Dimensions des blocs principaux

Le bloc principal .page est centré et fait une taille de 960 pixels de large.
Le squelette est un minimum responsive et introduit deux points de ruptures à 767 pixels et 640 pixels de large.

Appel des feuilles de styles

L’appel des feuilles de style utilise la méthode dite daisy.
Elle consiste à respecter un ordre bien précis pour appeler les feuilles de styles pour faciliter leur compréhension, maintenance et personnalisation au sein d’un projet web.

On appelle donc les styles les plus généraux jusqu’aux styles les plus particuliers.

Dans le détail, voici les fichiers appelés par le squelette dist :

• 1. Les styles Tinytypo
  • reset.css ré-initialise les balises HTML
  • clear.css définit les modèles pour la composition et la mise en page (alignement, modèle de bloc,....)
  • font.css (facultatif) appel des polices typographiques personnalisées (souvent appelés "font-face")
  • links.css définition des liens hypertextes
  • typo.css base typographique
  • media.css habillage des images, vidéos, canvas, ...
  • form.css habillage de base des formulaires
  • grid.css (facultatif) grille
  • layout.css disposition des blocs principaux
• 2. Les styles de Spip ses plugins
  • spip.css styles générés par spip
  • styles générés par les plugins et insérés grâce à la balise #INSERT_HEAD_CSS
• 3. Vos feuilles de style pour l’habillage du site
  • theme.css thème général
  • variante.css (facultatif) variante du thème
  • perso.css (facultatif) réglages personnels sur le thème

Pour la performance, il est possible à l’administrateur du site d’activer la concaténation de toutes ces feuilles css au moyen de l’option prévue à cet effet (onglet "Fonctions avancées" du menu "Configuration" de la partie privée).