Simple Grid

Simple-grid est utilisée pour le positionnement les éléments de la page sur une grille de 12 unités.

Site simplegrid.io

Un code très simple

Simple Grid est très simple : le code dont vous avez besoin est facile à comprendre et à mettre en place. Il est cependant nécessaire d'utiliser quelques classes. En effet, pour que la grille fonctionne, les contenus à placer sur la grille doivent être insérés dans un élément HTML identifié par class="container". Ensuite, chaque rangée doit être identifiée par class="row" et chaque colonne identifiée avec class="col-n", n étant étant la largeur de la colonne, comprise entre 1 et 12 unités.

Par exemple, si vous souhaitez que vos contenus se répartissent sur 1 colonne dans un conteneur de 8 unités de large, il vous suffit d'identifier la colonne avec la classe .col-8. Il reste un espace de 4 unités de largeur, disponible à droite ou à gauche de la colonne principale. Le conteneur de 4 unités de largeur sera identifié avec la classe .col-4. C'est aussi simple que cela !

Simple Grid a été conçu en premier lieu pour que, sur les petits écrans, les colonnes s'étendent sur toute la largeur de la fenêtre de navigation. Si vous ne voulez pas que les colonnes se développent ainsi sur les appareils mobiles, ajoutez simplement -sm (pour “small”) à la fin du nom de votre classe de colonnes. Par exemple, si vous souhaitez que deux blocs de contenu se présentent côte à côte sur les petits écrans, chacun doit se voir attribuer le nom de classe .col-6-sm.

Rappel :

Veillez à imbriquer vos colonnes dans une classe .row. Vous pouvez également choisir d'imbriquer plusieurs rangées dans une classe .container.

Respectez ces intitulés de classe !
Faites des essais, c'est absolument sans danger !

Une typo simple et neutre

Simple Grid utilise Lato comme famille de caractères. Cette typo numérique présente un bon contraste entre la fonte regular et la fonte bold (... bien meilleur qu'Open Sans par exemple). Dans la feuille de style, les tailles de caractères sont basées sur des unités en rem (root em). Consultez la documentation du W3C pour en savoir plus sur les rem.

Si vous choisissez de modifier le style par défaut de présentation des textes de paragraphes, ajoutez simplement la classe .font-light, .font-regular ou .font-heavy à votre balise p.

Le texte du paragraphe est défini par défaut sur une graisse de 200, ce qui correspond à du Lato Thin.

Remarque : la classe .font-heavy ne doit pas être utilisée en remplacement du gras obtenu avec la balise sémantique strong.