Une autre grille responsive en CSS avec SASS / Compass

Grille responsive en CSS

Je suis intégratrice depuis quelques années et la découverte des grilles pour l’intégration a changé ma vie (si si !). Au début, lorsqu’on ne parlait pas encore de responsive webdesign, j’utilisais 960.gs et puis, il a fallu changer avec le responsive… Alors, j’ai découvert Gridpak que j’ai trouvé vraiment pas mal fichu.

Mais, il s’est finalement avéré qu’il me fallait autre chose car cela ne correspondait pas à ma méthode de travail et aux besoins. J’ai donc créé ma propre grille responsive en m’aidant de Gridpak et de 960.gs ; puis j’ai voulu la partager avec vous. Je l’ai intégrée dans un framework dit “layout-only” c’est-à-dire qu’il ne contient que des styles de mise en page, aucune fioriture.

“Layout-only responsive framework with fluid grid”

Ce framework est assez simple. Il fonctionne avec :

  • CSS / SASS uniquement (aucun JavaScript)
  • normalize.css v3.0.1 – et quelques bouts de code en plus, comme des classes génériques de mise en page
  • une grille responsive créée avec SASS / Compass basée sur le fonctionnement de Gridpak et de 960.gs
  • aucun style superficiel de mise en forme (pas de couleurs, etc.)

» Voir mon projet “Layout-only responsive framework with fluid grid” sur Github

Le plus important dans tout ça reste la grille ; voici donc comment elle fonctionne.

La grille classique : fluid-grid.css

Ma feuille de style est divisée en 3 parties selon des breakpoints définis :

  • 0 – 640px (2 colonnes) / préfixe “col-s-“
  • 641px – 1024px (6 colonnes – avec un max-width à 960px) / préfixe “col-m-“
  • 1025px – infini (12 colonnes – avec un max-width à 1140px) / préfixe “col-l-“.

Il va de soi que, si une partie du design capote entre d’autres définitions, on ajoute les media queries qu’il faut pour que le site soit beau partout ! Les max-width sont là pour éviter au contenu de trop s’étaler. Ils se modifient aisément.

Cette grille fonctionne avec des classes que l’on ajoute dans le code HTML pour créer son architecture de façon claire et compréhensible. On crée un groupe de colonnes (.container-col) puis une ligne qui nettoie les colonnes flottantes (.row) puis les colonnes (.col.col-l-12.col-m-6.col-s-2) ; voir ci-dessus dans la liste pour la correspondance des préfixes.

Exemple de mise en place dans le code HTML

<header class="container-col">
	<div class="row">
		<div class="col col-l-3 col-m-3 col-s-1">
			Logo
		</div>
		<div class="col col-l-9 col-m-3 col-s-1">
			Baseline
		</div>
	</div>
	<div class="row">
		<div class="col col-l-10 col-m-4 col-s-2">
			Adresse
		</div>
		<div class="col col-l-2 col-m-2 col-s-2">
			Drapeaux de langue
		</div>
	</div>
</header>

La grille Pull / Push (inversement de colonnes) : fluid-grid-pull-push.css

Si votre site web a une sidebar et qu’elle se situe à gauche du contenu principal (par exemple), il faut utiliser une grille alternative car le contenu principal de la page devrait toujours se trouver en premier, avant la sidebar qui est moins importante dans le code HTML.

Le bloc du contenu et celui de la sidebar se retrouvent donc avec les classes aux préfixes “push” et “pull” adaptées pour qu’à l’affichage de la page, les 2 blocs soient inversés.

Ici, pour les écrans à partir de 1025px de large (“col-l-“), on a poussé le contenu de 4 colonnes (taille de la sidebar) et on a tiré la sidebar de 8 colonnes (taille du bloc de contenu de la page).

Exemple de mise en place dans le code HTML

<div class="container-col">
	<div class="row">
		<div class="col col-l-8 push-l-4 col-m-4 push-m-2 col-s-2">
			Contenu de ma page
		</div>
		<aside class="col col-l-4 pull-l-8 col-m-2 pull-m-4 col-s-2">
			Contenu de ma sidebar
		</aside>
	</div>
</div>

Le cas Internet Explorer <= 8

Si vous devez assurer la compatibilité pour IE <= 8, sachez, sans surprise, qu’ils ont quelques problèmes de compréhension des media queries et, pour IE <= 7, de la propriété CSS “box-sizing”. Il faut donc ajouter css3-mediaqueries.js exclusivement pour IE8 et inférieur. Pour ie7, il faudra aussi mettre les padding de la classe “col” à 0 : c’est tout collé, c’est pas beau mais, au moins, ça fonctionne et c’est le principal (dégradation gracieuse) ! Il y a sans doute d’autres solutions mais assurer une compatibilité maximale pour ie7 est loin d’être une priorité pour moi.

<!--[if lte IE 8]>
	<script type="text/javascript" src="/scripts/css3-mediaqueries.js"></script>
<![endif]-->
.ie7 .col{
    padding-left: 0;
    padding-right: 0;
}

Les plus de cette grille

De manière générale, avec les grilles, on évite les intégrations “foireuses” à la WordPress avec son thème Twenty Thirteen où la sidebar, par exemple, est en position absolue et passe par dessus le pied de page lorsque le contenu principal est plus petit qu’elle en hauteur.

Parfois, à partir d’une certaine définition d’écran si on utilise une grille unique, certains éléments deviennent trop étroits (je pense notamment aux fameuses sidebars). Là, au moins, on a la possibilité d’adapter leur taille très simplement à partir de cette définition en question.

On évite aussi d’aligner les éléments dans le CSS de la grille (de type “.col-3, #sidebar, .element1, .element2, …”) ; le code semble plus clair.

Chacun sa méthode pour le responsive, voici la mienne. Qu’en est-il de la vôtre ?


2 commentaires... Et vous, qu'en pensez-vous ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *