PluxThèmes

Répartitions sur Zones.

Avant d'aller plus loin et rendre les choses moins fouillis, ranger les différents aspect de notre page dans des zones et fichiers distincts est une bonne idée.

Pour éviter de s'éparpiller commençons à identifier quelques zones du document HTML que reconstruit PluXml.

Frontières

Le document peut-être découper en 3 premières zones en séparant la partie visible.

html (lang et type de document)
	head (cette zone ne s'affiche pas)
    - métadonnées
    - titre de la page (afficher dans l'onglet du navigateur)
    - link (feuilles de style, fil RSS,...)
    - script (javascript, json, ...)
	fermeture de head  
	*********************************************************************************************************************
	body (zone d'affichage)  
    - entete (généralement commun à toutes les pages)
    - contenus spécifique d'une page
    - contenus complémentaire navigation et fonctionnalité interne du site  (généralement communes à toutes les pages)
    - pied de page (généralement commun à toutes les pages)
    - fin des contenus visibles 
	*********************************************************************************************************************
    - chargement de script modifiant ou interagissant avec la page 
	fermeture de body
	fermeture du document  

Zones invisibles

Ces zones serviront à stockées les infos relatives de la page à l'attention de votre navigateur et moteurs de recherches par exemple.

Ces zones serviront aussi à charger les ressources nécessaire (feuille de style, script,...)

Zones dans le visible

C'est la zone où les styles serviront à personnalisé l'affichage.

Ce découpage va dépendre du design et de l'organisation visuelle de votre thème, reprenons une structure classique.

	haut de page
	**********************************
	contenus
	**********************************
bas de page

Ces 3 zones peuvent être déclinée en 5 zones ou plus si vous avez des composants spécifiques comme des zones interactives ou de contenus distants.

	entête
	**********************************
	navigation
	**********************************
	contenus
	**********************************
	contenus et navigation secondaires
	**********************************
pied de page

Entre les parties non visibles et visibles, nous avons 7 zones que nous pouvons répartir dans 7 fichiers (ou 6 si vous regrouper entête et navigation ensemble. En rappel, voir créer un thème - fichier étape 02

Répartition et fichiers

Cela semble compliquer les choses en premier abord, en effet , c'est plusieurs fichiers pour un seul document.

En fait c'est plusieurs type de données que l'on regroupe pour un document et il sera beaucoup plus facile de s'occuper de ces données individuellement.

description du document et chargement des ressources
**********************************
	entête
	**********************************
	navigation
	**********************************
	contenus
	**********************************
	contenus et navigation secondaires
	**********************************
	pied de page
*********************************
fermeture du document, chargement de ressource

Ce découpage vous permettra de styler ces zones indépendamment et de mettre à jour les structures HTML pour les conformer a un framework, a un script ou tout simplement à l'organisation des class de votre feuille de styles.

En repartissant nos zones en fichiers, on se focalisera sur chacune d'elles à des moments différents.

On passera de l'une à l'autre sans se soucier outre mesures des autres.

Pour nos styles, la première étapes consistera donc à éditer la première zone invisible pour appeler nos feuilles de styles.

Ceci fait et fonctionnel, cette zone peut-être rangée et oubliée.

Les styles

Votre thème est maintenant en mesure de charger vos feuilles de styles, que ce soit un framework ou une feuille de style maison il faut vérifier que les styles s'applique correctement.

Répartition sur Zone visible: Les grilles

Premières précautions

Souvent oubliée et rarement surveillée au fil de la création du contenu ou de l’intégration de script, il s'agit de la validité de votre structure HTML.

La grille principale

Lorsque vous vous êtes lancé dans la création d'un thème vous aviez probablement déjà votre modèle de mise en page en tête si ce n'est sur papier ou en fichier image.

Ce que l'on voit fréquemment sont des modèles avec un entête , dessous une a plusieurs colonnes et un pied de page informatif.

Tous les frameworks permettent cette répartition visuelle à partir d'une structure HTML classique et des class qui leurs sont propres.

Les feuilles de styles maisons s’appuieront sur un conteneur principal avec une class pour l'identifier et des conteneurs enfants avec des class pour les placer.

CSS disposent de plusieurs modèle de grilles (layout) , pour la grille principale de la page, flex ou grid sont recommander pour leur efficience.

Notre structure de base pourra ressembler à ceci:

  <header>entête</header>
  <main>Contenu</main>
  <footer>pied de page</footer>
  

Pour une structure d'une simple colonne, un systeme de grille n'est pas forcément requis. grid sera néanmoins trés paratique pour partagé l'espace visuelle.

Nous avons un conteneur principal implicite et unique qui est body. Il n'est pas forcément nécessaire de lui appliqué une class, faites le pour le principe si vous réutiliser un systeme de grille similaire sur une autre portion du code.

Appelons cette class grid-box et inserons la dans la feuille de style:

.grid-box {
  display:grid;
} 

Cette class crée une grille de type grid d'une colonne. Lélément recevant cette class beneficiera de toutes les fonctionnalité CSS d'une grille.

Appliquons cette class, notre structure de base ressemble maintenant à ceci:

<body class="grid-box" > 
  <header>entête</header>
  <main>Contenu</main>
  <footer>pied de page</footer>
</body> 
  

Pour remplir la fenêtre du navigateur par défaut, ajoutons a body une hauteur minimale et définissons la répartition des cellules:

body {
  min-height:100vh;
  grid-template-rows: auto 1fr auto;
} 
  

Ajoutons quelques couleurs et des espacements pour reproduire la premiere grille:

Voir en ligne sur codepen grille 1 by gc-nomade (@gc-nomade) on CodePen.

Pour la deuxieme grille, nous complétons le conteneur central avec deux balises: <section> et <aside> et modifions et complétons la feuille de style.

Pour ce conteneur central nous pouvons utiliser le système de grille en flex qui sera plus fluide à l'usage.

See the Pen grille 2 by gc-nomade (@gc-nomade) on CodePen.

Cette deuxième grille affiche la colonne aside avant section. dans le code c'est l'opposé. Nous pouvons faire usage d'un point de rupture et modifier son ordre d'affichage lorsque l'affichage est en colonne. Nous trouvons un point de rupture autour de 877px. Nous appliquerons au delà de celui-ci la règle order avec une valeur négative.

@media (min-width: 877px) {
  aside {
    /* remise en avant */
    order: -1;
  }
}

order C'est une fonctionnalité que l'on retrouve dans les système de grille de type flex et grid qui permet de réorganiser le sens d'affichage.

Pour reproduire la troisième grille, le code HTML reste à l'identique et on retire le point de rupture de la feuille de style.

Pour la quatrième grille avec 3 colonnes, nous ajoutons un element aside dans le HTML

Coté CSS, nous ajustons les largeurs, reprenons un points de rupture en ne ciblant que le premier aside qui repassera devant lorsqu'il y a la palce d'afficher 3 colonnes.

See the Pen grille 2 by gc-nomade (@gc-nomade) on CodePen.

Répartir les données du document

La repartition des données visuelles et non visuelles peut-être aussi vu comme les couches d'un club-sandwich.

<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
	<head>
		<! -- metadonnées, chargement des ressources, ... -->
	</head>
	<body>
		<!-- =======================✀=========================== -->
		<header>
			<!-- titre et navigation principale par exemple -->	
		</header>
		<main>
		<!-- =======================✀=========================== -->
			<section><!-- contenu de la page --></section>
			<aside><!-- contenus annexe --></aside>
		<!-- =======================✀=========================== -->
		</main>
		<footer><!-- pied de page visible --></footer>
		<!-- =======================✀=========================== -->
		<!-- chargement ressources eventuelles -->
	</body>
</html>

Vue d'ensemble