Personnaliser la grille de Foundation

Modifier les breakpoints de Foundation

Le Par David Leuliette — Modifier l’article

Depuis la version 4.3, Foundation est configuré avec deux breakpoint principaux, - ces largeurs définissent le nombre de pixel utilisés pour faire basculer la grille.

Cette configuration par défaut permet de faire face à la plupart des scénarios. Mais cela n'est pas acceptable dans certains cas. Parfois, un projet nécessite plus de breakpoints. Voilà comment vous pouvez adapter Foundation en fonction des besoins de votre application web.

1. Changer les variables SASS

La meilleure façon de personnaliser la largeur des grilles est de modifier leurs paramètres dans les fichiers SCSS.

Dans _settings.css, recherchez :

    $small-range: (0em, 40em);
    $medium-range: (40.063em, 64em);
    $large-range: (64.063em, 90em);
    $xlarge-range: (90.063em, 120em);
    $xxlarge-range: (120.063em);

2. Rechercher et remplacer en CSS

Vous trouverez beaucoup de lignes avec des breakpoints. Par exemple :

    @media only screen and (min-width: 40.063em)
    @media only screen and (min-width: 64.063em)
    @media only screen and (min-width: 90.063em)
    @media only screen and (min-width: 120.063em)

Chaque media query représente le point d'arrêt qui sera utilisé par les navigateurs pour appliquer les différentes tailles : petit, moyen, grand et très grand.

3. Quelle taille choisir ?

Si vous choisissez une stratégie de prioritée du contenu, utilisez des mesures en em ou rems.

    $row-width: rem-calc(1000);
    $column-gutter: rem-calc(30);
    $total-columns: 12;

Aujourd'hui, Fondation 5 utilise les rems -relative em, pour ses mesures. Si vous préférez utiliser des pixels, la fonction rem-calc() transforme les pixels en rems pour vous.

Par exemple, avec une police de texte de taille 16px, rem-calc(600) donne la conversion 37,5rems.

Si vous décidez d'adapter le contenu aux tailles d'écrans, voici des ressources pour vous aider à choisir :

4. Personnaliser le téléchargement

Encore une chose : Saviez vous que vous n'êtes pas obligé d'avoir une grille de 12 colonnes ?

Vous pouvez modifier cette propriété, ainsi que la taille des goutières avec le formulaire de customisation.

Ce n’est pas fini

Ai-je manqué quelque chose? Le contenu n'est plus à jour? Contactez @flexbox_
Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web.

Partager cet article

Modifier les breakpoints de Foundation

Tweet