Prid’x : une grille CSS responsive basée sur flex

pridx responsive css grid

Il y a quelques temps j’ai mis au point un framework CSS pour tous mes projets de sites : Prid. Il contient un reset, un sytème de grille responsive et quelques styles CSS de base, dont des styles d’éléments de formulaires. Au fil du temps je me suis rendu compte que je n’avais pas besoin d’autant d’éléments, le design étant spécifique pour chaque projet je surchargeais souvent pas mal de styles du framework… Finalement tout ce dont j’avais besoin c’était le système de grille pour la mise en page web.

Au début, Prid fonctionnait avec des div positionnées en float: left ce qui n’était pas la panacée… Par la suite je l’ai fait évoluer en utilisant display: inline-block pour les colonnes, c’était mieux, mais la gestion des white spaces était un peu pénible. Puis Flexbox est arrivé ! C’était magique 🙂

Avec Pridx, (x pour flex ^^) j’ai donc revu l’affichage des colonnes en utilisant display: flex et les propriétés CSS Flexbox, j’en ai aussi profité pour me débarrasser de tout le superflu… le reset et les styles seront désormais spécifiques au thème.

pridx demo site screenshot

Mais comment ça marche ?

Tout d’abord, il faut lier la feuille de styles dans la partie <head> de votre site :

<link rel="stylesheet" href="css/pridx.css" media="screen">

J’utilise Sass pour le CSS, vous pouvez donc éditer ce fichier pour, au besoin, recompiler la feuille de styles.

Ensuite, rien de plus classique, on segmente son contenu avec des rangées (row) et des colonnes (col-x). La base est de 12 colonnes :

<div class="row">
  <div class="col-12"></div> 
  <div class="col-6"></div>
  <div class="col-6"></div>
  ...
</div>

On peut également faire du nesting avec les colonnes :

<div class="row">
  <div class="col-12">
     <div class="row nested">
          <div class="col-3"></div>
          <div class="col-9"></div>
     </div> 
  </div>
  <div class="col-6"></div>
  <div class="col-6"></div>

</div>

Je vous laisse découvrir les autres options sur la page de démo de Pridx !

Utiliser Pridx dans son thème WordPress

Il vous suffit de télécharger Pridx et de le placer, par exemple, dans un répertoire « CSS » de votre thème. Ensuite, dans votre fichier functions.php, il vous suffit d’utiliser ce code :

function add_pridx_css() {
   wp_enqueue_style( 
        'pridx', 
        get_stylesheet_directory_uri() . '/css/pridx.css',
        array(), 
        '1.7', 
        'screen' 
   );
add_action( 'wp_enqueue_scripts', 'add_pridx_css' );

« 1.7 » c’est le numéro de la version actuelle, vous pourrez le changer lorsque vous utiliserez une version ultérieure.

En attendant (incessamment sous peu) de pouvoir utiliser les propriétés Grid CSS, amusez-vous bien avec Pridx !

Les liens utiles

Photo : Matthew Henry / unsplash.com

On en discute ?

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