Presentatie van de dist (SPIP3.1)

Structuur van de HTML

Het skelet is in XHTML 1.0 Transitional

Dit is de structuur van de hoofdblokken:

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

Afmetingen van de hoofdblokken

Het blok .page is gecentreerd en heeft een breedte van 960 pixels.
Het skelet is "minimum responsive" en heeft twee afbreekpunten op een breedte van 767 en 640 pixels.

Aanroepen van stylesheets

Het aanroepen van de stylesheets gebeurt volgens de methode daisy.
Ze is gebaseerd op een strikt aan te houden volgorde voor het aanroepen van de stylesheets om zo hun duidelijkheid, onderhoud en aanpassing aan persoonlijke wensen te vergemakkelijken.

Het aanroepen begint met de meest globale sheets en eindigt met de meest specifieke.

In meer detail zijn dit de stylesheets die door het skelet worden aangeroepen:

• 1. De Tinytypo stylesheets
  • reset.css doet een her-initialisatie van de HTML tags
  • clear.css definieert de modellen voor de samenstelling en indeling (aliniëring, model van de blokken,....)
  • font.css (facultatief) roept de aangepaste lettertypes aan ("font-faces")
  • links.css definieert de hyperlinks
  • typo.css vormt de typografische basis
  • media.css weergave van afbeeldingen, video’s, canvas, ...
  • form.css layout van formulieren
  • grid.css (facultatief) rooster
  • layout.css plaatsbepaling van de hoofdblokken
• 2. De stylesheets van SPIP en de plugins
  • spip.css door SPIP aangemaakte stijlen
  • stylesheets voor plugins via het baken #INSERT_HEAD_CSS
• 3. Persoonlijke stylesheets voor de styping van de site
  • theme.css algemeen thema
  • variante.css (facultatief) variant van het thema
  • perso.css (facultatief) persoonlijke aanpassingen op het thema

Voor een betere prestatie kan de beheerder van de site het samenvoegen van alle stylesheets activeren via een optie in de geavanceerde configuratie van de site.