Transformer un site 960 grid.gs en version responsive!!

Dans ce petit tutoriel, on va voir comment transformer un site construit à l’aide de 960 grid.gs en un site entièrement responsive.

960 grid.gs, permet de créer jusqu’à 24 colonnes avec un container_24, contrairement à Bootstrap par exemple qui se limite à 12 colonnes. Certains thèmes premium étaient encore et son peut-être encore codés à l’aide de ce framework.

Tenter de basculer un tel site en version bootstrap, est fastidieux car les width des colonnes sont générées dynamiquement via des fichiers de fonctions du thème parent..bref, trop de code à modifier.

En fouillant sur le net, on s’aperçoit qu’il existe des versions 960 grid responsives!!!

Il existe un site très utile dans ce cas précis, ce site, dont on peut se servir pour rendre son site responsive. Dans le fichier du thème premium construit sous 960 grid.js, je remplace le css par celui-ci

@media only screen and (min-width: 768px) and (max-width: 995px) {

    body {min-width: 768px;}

    /* Container | 768px */
    .container {width: 768px;overflow:hidden;}

    /* Global | 768px */
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {margin-left: 8px;
              margin-right: 8px;}


    /* Base Grid | 768px */
    .container .grid_1 {width: 48px;}
    .container .grid_2 {width: 112px;}
    .container .grid_3 {width: 176px;}
    .container .grid_4 {width: 240px;}
    .container .grid_5 {width: 304px;}
    .container .grid_6 {width: 368px;}
    .container .grid_7 {width: 432px;}
    .container .grid_8 {width: 496px;}
    .container .grid_9 {width: 560px;}
    .container .grid_10 {width: 624px;}
    .container .grid_11 {width: 688px;}
    .container .grid_12 {width: 752px;}

    /* Prefix Extra Space | 768px */
    .container .prefix_1 {padding-left: 64px;}
    .container .prefix_2 {padding-left: 128px;}
    .container .prefix_3 {padding-left: 192px;}
    .container .prefix_4 {padding-left: 256px;}
    .container .prefix_5 {padding-left: 320px;}
    .container .prefix_6 {padding-left: 384px;}
    .container .prefix_7 {padding-left: 448px;}
    .container .prefix_8 {padding-left: 512px;}
    .container .prefix_9 {padding-left: 576px;}
    .container .prefix_10 {padding-left: 640px;}
    .container .prefix_11 {padding-left: 704px;}

    /* Suffix Extra Space | 768px */
    .container .suffix_1 {padding-right: 64px;}
    .container .suffix_2 {padding-right: 128px;}
    .container .suffix_3 {padding-right: 192px;}
    .container .suffix_4 {padding-right: 256px;}
    .container .suffix_5 {padding-right: 320px;}
    .container .suffix_6 {padding-right: 384px;}
    .container .suffix_7 {padding-right: 448px;}
    .container .suffix_8 {padding-right: 512px;}
    .container .suffix_9 {padding-right: 576px;}
    .container .suffix_10 {padding-right: 640px;}
    .container .suffix_11 {padding-right: 704px;}

    /* Push Space | 768px */
    .container .push_1 {left: 64px;}
    .container .push_2 {left: 128px;}
    .container .push_3 {left: 192px;}
    .container .push_4 {left: 256px;}
    .container .push_5 {left: 320px;}
    .container .push_6 {left: 384px;}
    .container .push_7 {left: 448px;}
    .container .push_8 {left: 512px;}
    .container .push_9 {left: 576px;}
    .container .push_10 {left: 640px;}
    .container .push_11 {left: 704px;}

    /* Pull Space | 768px */
    .container .pull_1 {left: -64px;}
    .container .pull_2 {left: -128px;}
    .container .pull_3 {left: -192px;}
    .container .pull_4 {left: -256px;}
    .container .pull_5 {left: -320px;}
    .container .pull_6 {left: -384px;}
    .container .pull_7 {left: -448px;}
    .container .pull_8 {left: -512px;}
    .container .pull_9 {left: -576px;}
    .container .pull_10 {left: -640px;}
    .container .pull_11 {left: -704px;}

    /* Children (Alpha ~ First, Omega ~ Last) | 768 */
    .alpha {margin-left: 0;}
    .omega {margin-right: 0;}
}


/* =============================================================================
   Less than 768px
   ========================================================================== */

@media only screen and (max-width: 767px) {

    body{min-width:0;}
   
    /* Container */
    .container { margin:0 auto; width:456px; overflow:hidden; }

    /* Global */
    .container .grid_1,
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12	{
        width:416px;
        clear: both;
        float: none;
        margin-left: 0;
        margin-right: 0;
        display:inline-block;
        padding-left: 20px;
        padding-right: 20px;

        /* IE 6&7 */
        zoom:1;
        *display:inline;
    }

    /* Nested children need no padding */
    .grid_1  .grid_1,
    .grid_2  .grid_1, .grid_2  .grid_2,
    .grid_3  .grid_1, .grid_3  .grid_2, .grid_3  .grid_3,
    .grid_4  .grid_1, .grid_4  .grid_2, .grid_4  .grid_3, .grid_4  .grid_4,
    .grid_5  .grid_1, .grid_5  .grid_2, .grid_5  .grid_3, .grid_5  .grid_4, .grid_5  .grid_5,
    .grid_6  .grid_1, .grid_6  .grid_2, .grid_6  .grid_3, .grid_6  .grid_4, .grid_6  .grid_5, .grid_6  .grid_6,
    .grid_7  .grid_1, .grid_7  .grid_2, .grid_7  .grid_3, .grid_7  .grid_4, .grid_7  .grid_5, .grid_7  .grid_6, .grid_7  .grid_7,
    .grid_8  .grid_1, .grid_8  .grid_2, .grid_8  .grid_3, .grid_8  .grid_4, .grid_8  .grid_5, .grid_8  .grid_6, .grid_8  .grid_7, .grid_8  .grid_8,
    .grid_9  .grid_1, .grid_9  .grid_2, .grid_9  .grid_3, .grid_9  .grid_4, .grid_9  .grid_5, .grid_9  .grid_6, .grid_9  .grid_7, .grid_9  .grid_8, .grid_9  .grid_9,
    .grid_10  .grid_1, .grid_10  .grid_2, .grid_10  .grid_3, .grid_10  .grid_4, .grid_10  .grid_5, .grid_10  .grid_6, .grid_10  .grid_7, .grid_10  .grid_8, .grid_10  .grid_9, .grid_10  .grid_10,
    .grid_11  .grid_1, .grid_11  .grid_2, .grid_11  .grid_3, .grid_11  .grid_4, .grid_11  .grid_5, .grid_11  .grid_6, .grid_11  .grid_7, .grid_11  .grid_8, .grid_11  .grid_9, .grid_11  .grid_10, .grid_11  .grid_11,
    .grid_12  .grid_1, .grid_12  .grid_2, .grid_12  .grid_3, .grid_12  .grid_4, .grid_12  .grid_5, .grid_12  .grid_6, .grid_12  .grid_7, .grid_12  .grid_8, .grid_12  .grid_9, .grid_12  .grid_10, .grid_12  .grid_11, .grid_12  .grid_12	{
        padding-left: 0px;
        padding-right: 0px;
    }

    .container .push_1, .container .push_2,
    .container .push_3, .container .push_4, 
    .container .push_5, .container .push_6,
    .container .push_7, .container .push_8, 
    .container .push_9, .container .push_10,
    .container .push_11	{
        left: 0;
    }
    .container .pull_1, .container .pull_2,
    .container .pull_3, .container .pull_4,
    .container .pull_5, .container .pull_6,
    .container .pull_7, .container .pull_8,
    .container .pull_9, .container .pull_10,
    .container .pull_11	{
        left: 0;
    }	
}


/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {

    /* Container */

    .container { width:300px;}

    /* Global */

    .container .grid_1,
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12	{
        width:260px;
    }
}

Pour l’adapter au site, il suffit simplement de remplacer certaines classes dans les fichiers et le site devient rapidement responsive.
Pour un menu en revanche, il faudra le retravailler avec des media queries, ou alors on peut aussi télécharger wp_responsive_menu, qui réglera le problème plus rapidement!!

19/12/2014 Mis à jour le 27/12/2018 Par Copier coller | Dans CSS