Historique de la page

...

Les classes CSS conditionnelles 

Comme vu expliqué précédemment, il est malheureusement impossible avec des médias media-queries de cibler la largeur de la portlet. Nous d'une portlet => nous sommes obligés de nous baser sur la largeur de la fenêtre (pour mieux comprendre cette problématique, un article explique bien les problèmes d'implémentation de cette fonctionnalité nommée Element Query).

Il faudra donc s'abstraire des media-queries et passer par une technique alternative. La technique est Nous proposons donc de détecter en JavaScript le redimensionnement de la fenêtre et d'appliquer une classe CSS à un élément HTML en fonction de sa taille (calculée à la volée). 

<div class="container">	
	<!-- prendra la classe "small" si la taille de ce bloc est inférieur à 600px -->
	<!-- prendra la classe "medium" si la taille de ce bloc est supérieur à 600px et inférieur à 1100px -->
	<!-- prendra la classe "large" si la taille de ce bloc est supérieur à 1100px -->
</div> 

Avec un une CSS classique tirant partie parti des médias media-queries nous aurions écrit ceci : 

@media screen and (max-width: 600px) {
  /* règles pour les écrans "small" */
}
 
@media screen and (min-width: 601px) and (max-width: 1100px) {
  /* règles pour les écrans "medium" */
}
 
[...] 

Nous ne pourrons plus tirer partie des Dans la mesure où nous ne pouvons pas nous appuyer sur les media-queries donc , il nous allons faut écrire quelque chose comme cela : 

.container.small .mon-selecteur-css {
   /* mes propriétés ... */
}
 
.container.medium .mon-selecteur-css {
 	/* ... */
}
 
.container.large .mon-selecteur-css {
   /* ... */
}

...

Pour mettre en oeuvre ce qui est présenté dans la partie précédente, nous n'avons d'autres choix que de nous reposer sur JavaScript. Il existe actuellement deux solutions : 

...

C'est une toute petite librairie JavaScript qui permettra d'écrire les "simili - media-queries" dans le code HTML afin d'appliquer une classe CSS si les conditions sont validées. Voir les sources sur Github

<div data-squery="min-width:1100px=large max-width:600px=small">
    <!-- ... -->
</div>

Cela tire partie des Cette solution s'appuie sur les attributs data-* (compatible compatibles à partir de IE8+) , : ces attributs attributs data-* ne sont pas prévus pour cela à la base, mais il aucune solution CSS n'existe aucune solution en CSS actuellement pour le réaliser. L'avantage de cette librairie est qu'elle est relativement légère et qu'elle permet de mettre en place rapidement des points de bascules personnalisés.

Solution

...

"homemade"

Il est également possible de reprendre le snippet JavaScript proposé pour la version Bootstrap et en faire une version adaptée , en l'adaptant à vos besoins :

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .container
    	$portletContainers = $(".container");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
	        var $that = $(this);
	        var portletWidth = $that.width()
	        $that.removeClass("small medium large");
	        if(portletWidth < 600)
	            $that.addClass("small");
	        if(portletWidth >= 600 && portletWidth < 1100)
	            $that.addClass("medium");
	        if(portletWidth >= 1100)
	            $that.addClass("large");
    	});
	}
})(jQuery);

...

Une grille fonctionne toujours de la même manière, c'est tout d'abord un nombre de colonne colonnes défini avec un espacement entre chaque (que l'on appellera "gouttière") qui va former une ligne. Le système de grille le plus répandu se base sur 12 colonnes mais il est autant possible d'en avoir 16 ou 8.

Dans le cadre d'un développement de ce site il Il est hautement recommandé de se baser sur une grille existante. Il est possible de se baser sur , comme celle de Bootstrap ou même Foundation, ces de Foundation par exemple. Ces deux frameworks offrent la possibilité de choisir quelles partie module de la librairie télécharger. Il devient alors possible de n'avoir que les grillescustomizer ces librairies en sélectionnant les parties/modules du framework que l'on souhaite utiliser => Il est alors possible de ne "charger" que le système de grille...

Intégration de portlet au sein d'une iframe

...