Découverte de Grid Layout CSS

Je discutais de « Grid Layout CSS » avec Magalie et Rodolphe de chez https://www.kasutan.pro . Ca a l’air très pratique pour développer des sites internet en responsive design.

Parce que développer des applications sur chaque périphérique (desktop, tablette, smartphone) c’est bien, mais développer un code commun et pouvoir le réutiliser sur tous les périphérique en même temps, c’est mieux.

La technologie Grid Layout à un avantage sur Bootstrap, qui est une librairie javascript à charger en début de page : elle est intégrée aux navigateurs modernes et supoprtée à 75%. Niveau SEO, moins de javascript à charger sur la page web cela signifie, un meilleur positionnement sur les moteurs de recherches : ce genre de détail a son importance!

Donc voici une nouvelle méthode pour faire du responsive design, qui peut améliorer le SEO, à tester pourquoi pas sur mes fameuses SPA singles apps applications qui ne sont pas faciles à référencer.

Ca tombe bien, j’ai été invité à une petite présentation de Grid Layout par Gregoire Noyelle et son association WP Paris chez Malt la reserve à Freelances, anciennement hopwork, que je remercie pour l'accueil et la très belle salle de formation accessible facilement en plein coeur de Paris, c'est top! WP Paris est en contact avec l’association Worpress France.

 « Grid Layout CSS » sorti en mars 2017. L’idée était à la base de savoir comment faire pour avoir un affichage propre un responsive design lorsque l’on crée un site internet ? C'est-à-dire, comment avoir les éléments d’une page web correctement positionnés en fonction de tous les périphériques et les tailles d’écrans à notre disposition : smartphone, tablette, ordi de bureau…

C’est intéressant pour créer des thèmes, des templates graphiques, sans devoir utiliser bootstrap par exemple. On peut voir ça comme une alternative aussi à FLEX pour les connaisseurs.

En quelques mois, Grid layout est à plus de 70% de support sur les navigateurs internets, ie, Chrome, Firefow, etc., il y a un vrai engouement pour cette techno au niveau des CSS. Il est possible de l’implementer si l’on est dans une logique de « mobile first ». Pour les vieux navigateurs, on restera sur une colonne.

On ne présente plus Grégoire qui a commencé Wordpress en 2006, puis en 2010 a créé Genesis, un framework de theme Worpress, construit comme une extension, puis en 2013, a sorti son podcast very french trip, puis cofondé WP Paris avec ses collègues mathieu et Thierry. En 2016 Grégoire a créé son centre de formation, puis a décidé en 2017, à la sortie de Grid Layout, de ne faire plus que de la formation.

Revenons à notre Grid Layout : avant l’arrivée de Flex on utilisait le float, pour l’habillage autour des images.  On a fait des mises en places complexes, il fallait faire des hacks, des clear… En 2015 Bert Bos présentait “the advanced layout module”. Phil Cupp a presenté le projet à Microsoft, IE10 en parallèle de Windows et les webapps. Souvenez-vous, l’interface métro, les tuiles dynamiques avec Windows 8, etc. Il y avait cette idée. Souvenez vous sous Windows phone des tuiles qui se repositionnaient en fonction des resolutions. Xaml, etc. La premiere implementation de Grid Layout, c’était internet explorer qui la proposait. Edge vient de proposer le support le mois dernier.

Rachel Andrew @rachelandrew , a book apart, et gridbyexample.com parlaient des « support query » « display grid ». Jen Simmons ( labs.jensimmons.com/2016 ) avait fait un Podcast the web ahead avec reflexions sur le design et le web

Une question? Posez-la ici

Comment construire Grid Layout ?

On constuit une grille avec des balises, comme <section></section>

La section se calle automatiquement sur la grille

<main class= « grille »>

</main>

Il y a des enfants qui héritent des propriétés

Les règles CSS. On a 1 parent, 2 déclarations, 2 propriétés : display : grid et grid-template-columns :repea(5,1)

Au niveau de la terminologie, par rapport à Flex 1 dimensions, là on est en 2 dimensions

On a les colonnes (columns) .On a les rangées (row) et les lignes (lines) indéxées à partir de 1, 2, 3, 4…

.

Les pistes (tracks) 

On peut faire une piste entre 2 lignes, horizontale ou verticale. S’il y a beaucoup d’éléments, Grid Layout génère automatiquement les colonnes si besoin.

Les cellules (cell) ntre 4 lignes

Zone (area) 

Les gouttières, que l’on appelait grid-grap : 10px ; ca jour sur les rangées et les colonnes

Sera replacé par gap qui donnera row-gap et column-gap

Création des colonnes :

2 propriétés principales pour déterminer sa grille au début:

Grid-template-columns 100px 100px 100px ;

Et Grid-template-rows: 80px 100px ;

On peut donner des unités de measures en “fr” qui sont des unites de measures mixtes

A ne pas confondre avec le pourcentage, c’est juste l’espace disponible qui reste, qui est flexible et que l’on peut allouer.

La fonction « repeat », pratique pour économiser des lignes de codes : Grid-template-columns :repeat(3,100px) ;

La function minmax permet par rapport à une colonne, quelle taille minimum il y a, quelle taille max on peut avoir par exemple : Minimum : 100px Maximum : 2fr

Une astuce en passant, persistence 2.0 c’est arrivé il y 5 mois , c’était parti d’un vieux module de Chrome qui permettait de travailler en direct dans l’inspecteur. Maintenant c’est intégré, très pratique, et ca enregistre dans les fichiers : le petit point vert indique que l’on est synchronisé. C’est une fonction avancée de Chrome très pratique qu’il faut activer.

En travaillant sur le code source en local, on code maintenant 90% du temps dans Chrome sur l’inspecteur, le sélecteur, les outils pour animation, le network (celui là très pratique, je m’en sers beaucoup pour analyser le temps de chargement des pages en SEO, oula les vilains gros fichiers JavaScript qui alourdissent la pages)

Il est formidable ce navigateur Google Chrome : on peut même passer l’éditeur en noir & blanc inversion vidéo.

Donc dans « elements » de mon inspecteur, si je modifie , ca synchronise dans le fichier !

Il faut donc se mettre sur « sources » et faire CTRL S pour sauver

Exemple de grille :

Main, section, grif…

Avec un grid-template-columns : repeat(4,1fr) ;

On peut changer en temps réel le nombre de colonnes et avoir un aperçu avec la touche « ALT »

Gridgap= 1rem 2 rem; pour avoir les gouttières

En quelques lignes, on a une grille impeccable, fini les floats !

On peut faire l’équivalent avec Boostrap bien sûr, mais il faut écrire beaucoup plus de lignes de codes.

Les propriétés grid-column et grid-row

.cellule{

Grid-column :2/5 ;

Grid-row :2/5 ;

}

Avec span, on additionne :

.cellule{

Grid-column :2/span3;

Grid-row : 2/span2 ;

}

Possibilité d’utiliser “Grid-auto-columns”

.grille{

Display: grid

Gri-template-columns: 1fr 1fr 1fr;

Grid-auto-rows: 1 fr;

Grid-auto-columns:1 fr;

Grid-gap: 1rem;

}

.grille section: nth-child(1){

Grid-column:1:span2 ;

Grid-row:3/span3 ;

}

Le grid Layout est implémenté dans Firefox aussi de manière plus poussée que dans Chrome pour l’instant.