Infrastructure de conception de sites Web adaptatifs

Ces technologies et modèles de conception incluent les fonctions suivantes :

• Présentations et grilles fluides (Exemple)
• Empilement des colonnes
• Imbrication des colonnes
• Ordre d'empilement

Le fragment de code ci-dessous présente une page avec une grille fluide :

		<div class="row">
			<div class="col12"></div>
		</div>
		<div class="row">
			<div class="col6"></div>
			<div class="col6"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col4"></div>
			<div class="col4"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
			<div class="col3"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
			<div class="col2"></div>
		</div>
		<div class="row">
			<div class="col1"></div>
			<div class="col11"></div>
		</div>
		<div class="row">
			<div class="col2"></div>
			<div class="col10"></div>
		</div>
		<div class="row">
			<div class="col3"></div>
			<div class="col9"></div>
		</div>
		<div class="row">
			<div class="col4"></div>
			<div class="col8"></div>
		</div>
		<div class="row">
			<div class="col5"></div>
			<div class="col7"></div>
		</div>

Notez les points ci-dessous à prendre en compte lorsque vous utilisez des présentations et des grilles fluides :

• Une ligne est toujours divisée en 12 colonnes, indépendamment de la délimitation.
• Un élément enfant d'une ligne peut s'étendre sur 1 à 12 colonnes, indépendamment du point d'arrêt en utilisant l'une des classes col*.
• Si une ligne possède des éléments enfants qui s'étendent sur plus de 12 colonnes en tout, ces éléments sont positionnés en fonction de la façon dont le code HTML gère les éléments flottants.
  Par exemple, pour une ligne qui contient trois éléments enfants qui s'étendent sur 8, 8 et 4 colonnes, comme suit :

  1. Le premier élément enfant est positionné dans la partie supérieure gauche de la ligne qui s'étend sur 8 colonnes. C'est-à-dire 2/3 de la largeur de la ligne.
  2. Le deuxième élément enfant est positionné sous le premier élément enfant et s'étend lui aussi sur 8 colonnes.
  3. Le troisième élément enfant est positionné à droite du deuxième élément enfant et s'étend sur 4 colonnes. C'est-à-dire, 1/3 de la largeur de la ligne.
• Un élément enfant d'une ligne peut s'adapter aux points d'arrêt RWD-A et RWD-C en utilisant la classe acol* pour RWD-A ou la classe ccol* pour RWD-C.

  Par exemple, un élément enfant d'une ligne peut s'étendre sur 6 colonnes par défaut et sur 12 colonnes dans le point d'arrêt RWD-A en utilisant class="col6 acol12".

• Les lignes et leurs éléments enfants doivent avoir une hauteur flexible ou automatique, car une hauteur de ligne fixe interférerait avec les colonnes empilées. Des hauteurs fixes pour les éléments enfants sont généralement admises, mais doivent être évitées, car la hauteur peut varier en cas de redimensionnement horizontal des éléments enfants d'une ligne avec la fenêtre d'affichage.
• Le système de grille fluide ne comporte pas de gouttières, ou de marges, intégrées entre des éléments enfants d'une ligne. Un ensemble de règles CSS distinct est utilisé pour définir les marges entre les widgets.
• N'appliquez pas de marge à des éléments enfants d'une ligne pour éviter que la largeur totale des colonnes dépassent 100%.
• Evitez les bordures ou les marges intérieures pour les éléments enfant d'une ligne, car cela implique d'utiliser la balise box-sizing: border-box. Cette règle s'applique également aux lignes. En revanche, les marges de ligne sont admises.
• Les classes col* ne contiennent aucun point d'arrêt. Les éléments qui ne comportent que des classes col* ne s'empilent pas, indépendamment de la largeur de la fenêtre d'affichage.

L'empilement des colonnes est implémenté de la façon suivante : tous les éléments enfant d'une ligne utilisent acol12. Par exemple, pour une ligne qui contient deux éléments enfant, comportant l'un des classes col4 acol12 et l'autre, des classes col8 acol12. Dans ce scénario, les éléments enfants sont côte-à-côté par défaut et s'étendent respectivement sur 4 et 8 colonnes. Du fait de la classe acol12, en revanche, les éléments enfant s'étendent chacun sur 12 colonnes dans le point d'arrêt RWD-A afin qu'ils soient disposés verticalement et s'étendent chacun sur toute la largeur de la ligne.