...

1. Portlet email-preview
2. Portlet news-reader-portlet
3. Esup-Dematec (Bootstrap en version 2.3)

Intégration d'une portlet en pure CSS

L'utilisation de framework CSS n'est pas toujours utile, il se peut que parfois lorsque l'existant est trop lourd, ou que l'interface se révèle très sommaire il devient soit très fastidieux soit inutile de se baser sur des librairies aussi conséquentes. 

Dans le cadre de l'intégration d'une portlet en se basant sur un système déjà existant l'utilisation d'un framework obligera le développeur à reprendre quasiment entièrement la structure HTML de son site pour se conformer à la philosophie du framework. Il faudra reprendre chaque bloc un par un, appliquer les class CSS nécessaire à l'affichage des styles correspondant. Il sera aussi obligatoire de reprendre une bonne partie du code CSS afin d'en retirer les éléments qui viendraient en conflit des classes du framework afin d'éviter que la largeur soit surclassé par la feuille de style initial mais que ce soit bien celle de la librairie qui va être utilisée. Un autre point non négligeable est de s'assurer que les plugins JavaScript (ou jQuery) utilisés sur la portlet soient eux aussi responsive... et dans le cas contraire trouvés une librairie iso-fonctionnelle remplacer l'ancienne, avec tous les problèmes que cela peut occasionné...

On le comprend bien cela peut très vite devenir lourd et très compliqué pour atteindre le résultat attendu.

On retrouve aussi l'effet inverse dans le cadre d'une vue minimaliste dans une portlet, est-il nécessaire de charger autant de styles pour au final ne tirer partie que d'une infime partie de la librairie ? Il semble que non. 

Dans ces cas la il parait plus pertinent de partir sur une solution sans librairie de réaliser soit même l'intégration. 

Les class CSS conditionnelles 

Comme vu précédemment il est malheuresement impossible avec des médias queries de cibler la largeur de la 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 medias queries et passer par une technique alternative. La technique est de détecter en JavaScript le redimensionement de la fenêtre et d'appliquer une classe CSS a un élément HTML en fonction de sa taille. 

<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> 

En CSS classique tirant partie des médias queries nous aurions écrit quelque chose comme ça : 

@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 medias queries donc nous allons écrire quelque chose comme cela : 

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

Snippet Javascript

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

Selector Queries

C'est une toute petite librairie JavaScript qui permettra d'écrire les simili-medias 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 attributs data-* (compatible à partir de IE8+), ces attributs data-* ne sont pas présent pour cela à la base mais il n'existe aucune solution en CSS 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 maison

Il est également possible de reprendre le snippet JavaScript proposé pour la version bootstrap et en faire une version adaptée à 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);

Autres frameworks CSS

1. Foundation : concurrent direct de Twitter Bootstrap, on retrouve beaucoup de similitude avec ce dernier
2. Knacss : micro framework, très léger et ne contient aucun style graphique, juste une grille et des fonctionnalités de placement d'éléments, idéal pour des demandes graphiques très spécifiques
3. ...

Ressources utiles

• Can I use : liste de la prise en charge des différentes propriétés CSS par les différentes versions des navigateurs
• Modernizr : Librairie JavaScript de détection des capacités du navigateur
• Browserstack : Service permettant de lancer des VM en spécifiant l'OS, le navigateur et la version du navigateur (y compris pour des mobiles)
• HTML5Boilerplate : Bâse de projet regroupant toutes les bonnes pratiques du développement front-end
• Code Guide : Guide de bonne pratique de développement front par @mdo un des développeurs de Twitter Bootstrap