Prid’ : un framework CSS responsive

prid framework css responsive

Dans le cadre de divers projets de sites web responsive, j’ai fini par mettre au point une grille de mise en page CSS afin de ne pas ré-inventer la roue à chaque fois. Ce petit framework CSS offre les bases pour une mise en page de 12 colonnes et s’appelle Prid’ — pour Padding gRID. En effet, la particularité de cette grille est la gestion des marges à l’aide du padding (marges internes) des colonnes. Au lieu d’appliquer une marge droite de x pixels à chaque colonne et aucune marge à la dernière colonne, nous appliquons un padding global. Pour des gouttières de 10 pixels, par exemple, on appliquera à nos colonnes un padding global de 5 pixels. C’est assez simple et très souple, changer une valeur permet de changer les gouttières sans aucune autre modification des CSS.

Une grille CSS, mais pas que

Outre cette grille CSS fluide, Prid’ comprend également un reset CSS, quelques réglages typographiques de base, des styles de formulaires et la gestion responsive des images. Chacune de ces valeurs pouvant être modifiée par la feuille de style spécifique du projet. Pour commencer à travailler avec Prid’, rien de plus simple, on inclue d’abord la version minifiée du framework puis la ou les feuilles de styles spécifiques :

<link rel="stylesheet" href="prid.min.css" media="all">   /* Chargement de Prid' */
<link rel="stylesheet" href="style.css" media="all">  /* Vos styles */

Voir la démo du projet

prid css responsive grid

Prid’ est une base simple et pratique pour démarrer tout projet de responsive web design. Une fois les principes de la grille intégrés on peut alors effectuer très rapidement des mises en page adaptées aux écrans d’ordinateur, aux tablettes et aux smartphones.

Work in progress

Il existe déjà beaucoup de frameworks CSS, bien souvent plus denses ou plus complets que le notre… Mais je souhaite une approche très minimale afin de laisser le champs libre au traitement spécifique du design de chaque projet qui ne nécessite pas forcément beaucoup d’éléments. Ce projet est un work in progress, je vais l’améliorer au fil du temps et des mises en situation réelles.

Télécharger Prid, un framework CSS responsive.

On en discute ?

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