Découvrir Susy

Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew

Par

Introduction de Chris Coyier : Je me suis rallié dernièrement à l'idée d'utiliser Susy pour construire des grilles avec Sass. J'aime bien cette idée de grilles à la demande plutôt qu'un framework, aussi simple soit-il. Nous avons même ajouté une compatibilité avec notre CodePen. La semaine dernière, j'ai rencontré Eric Suzanne, le créateur de Susy, et je lui ai dit que Zell Liew était en train d'écrire un article pour CSS-Tricks. “Oh Zell, il est génial, c'est le promoteur non-officiel de Susy et c'est un super formateur”. Eh bien voilà, à toi Zell de nous présenter Susy !

Susy est un outil qui vous permet de construire vos mises en page à partir de grilles. Sa flexibilité vous donne la liberté de construire n'importe quel design, qu'il comporte 5, 14 ou 48 colonnes, de largeur égale ou inégale, Susy répond à tous vos besoins.

Pourquoi choisir Susy parmi les millions de frameworks disponibles sur le net ? Peut-être même n'avez-vous jamais entendu parler d'elle.

Susy est l'une des meilleures choses qui me soient arrivées ces derniers mois, elle m'aide tellement que j'ai décidé d'écrire un livre sur elle, pour faire connaître ses mérites au monde. C'est un guide détaillé de Susy et de son utilisation pour la création de designs web.

Dans ce petit article, je vais essayer de vous montrer pourquoi Susy est si spéciale et comment elle peut vous aider. Nous allons créer une mise en page et vous pourrez comparer cette expérience avec votre workflow habituel, qu'il soit manuel (calcul de pixels à la main...) ou que vous utilisiez d'autres frameworks.

Nous allons commencer très simplement et passer ensuite à des choses plus élaborées lorsque vous connaîtrez mieux Susy.

Mais avant de commencer, il y a une chose que vous devez savoir sur notre amie Susy. Vous devez utiliser le préprocesseur Sass, ce qui signifie que vous devez savoir comment convertir Sass en CSS. Et, non, vous ne pouvez pas utiliser LESS, désolé.

NdT : Si vous ne connaissez pas encore Sass, pas de panique, vous pouvez consulter quelques articles ici-même, en commençant par cette introduction à Sass.

NdT : Pour installer Susy vous pouvez utiliser la console : gem install susy. Si vous êtes un heureux utilisateur de CodeKit (pour Mac), tout est déjà compris, pas d'installation à faire. Pour les utilisateurs de PC, Prepros a sans doute une fonctionnalité similaire. Pour plus d'infos sur l'installation, vous pouvez consulter la documentation, très bien faite, ou cette vidéo (en anglais). Attention, certains articles sur le net se réfèrent à Susy 1, la nouvelle version Susy 2 est beaucoup plus avancée et simple. Pour être sûr d'installer la version 2, vous pouvez faire gem install susy --pre.

Créer une mise en page simple

La mise en page de CSS-Tricks est très simple, ce sera notre premier exemple. Un simple coup d'oeil nous permet de constater que le contenu du site est réparti en deux zones, le contenu principal (“content”) et une barre latérale ou encadré (“sidebar”).

Nous supposerons que CSS-Tricks utilise une grille de 12 colonnes, que le contenu principal occupe 8 colonnes et la barre latérale 4. Tout cela est très standard si vous connaissez déjà les grilles.

image

Si vous utilisiez Bootstrap ou Foundation, le balisage ressemblerait à ceci :

//HTML
<div class="wrap">
  <div class="content col-md-8"></div>
  <div class="content col-md-4"></div>
</div>

Là encore, rien que de très simple. Mais Bootstrap et Foundation comportent mille autres choses qui, pour l'essentiel, ne nous serviront jamais. Si vous n'avez pas besoin de la plupart des fonctionnalités de Bootstrap et Foundation, Susy est sans doute plus approprié.

Un développeur stoïque codant à la main son site, sans framework, écrirait sans doute ceci :

//HTML
<div class="wrap">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

Pour créer un contenu sur 8 colonnes et un encadré sur 4 colonnes, il vous faudra mesurer les largeurs du contenu, des gouttières (les espaces entre les colonnes) et de l'encadré. Et si vous voulez que votre design soit responsif, il vous faudra ensuite convertir ces mesures en pourcentages.

image

Le CSS correspondant ressemblerait sans doute à ceci :

//CSS
/* j'ai l'habitude d'utiliser border-box pour toutes mes mises en page. */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.wrap {
  max-width: 1120px; 
}

/* Clearfix pour les enfants "floated" */
.wrap:after {
  content: " ";
  clear: both; 
  display: block;
}

.content {
  float: left; 
  width: 66.071429%; /* 740px / 1120px */
  margin-right: 1.6964286%; /* 19px/1120px */
}

.sidebar {
  float: right; 
  width: 32.2321429%; /* 361px / 1120px */
}

J'aime utiliser box-sizing, en lui donnant la valeur border-box pour tous mes éléments et je vous recommande de faire de même. Chris Coyier a écrit là-dessus (en anglais), et Paula Borowska (en français).

Quoi qu'il en soit, écrire ce code à la main peut rapidement devenir très pénible si vous devez travailler sur des mises en page multiples. C'est ici qu'apparaît Susy pour vous aider.

Une mise en page simple avec Susy

Lorsque vous utilisez Susy pour créer votre mise en page, il vous faut d'abord lui indiquer quelques paramètres. Susy est équipée de nombreux réglages par défaut pour vous lancer dans un projet.

Je pars du principe que c'est votre première expérience avec Susy, donc nous nous en tiendrons pour l'instant aux paramètres par défaut. Nous allons cependant changer deux paramètres, ce qui se fait en les déclarant dans la liste (map) $susy.

En même temps, appliquons également la propriété border-box comme précédemment.

//SCSS
@import "susy";

$susy: (
  columns: 12,   // On indique à Susy d'utiliser 12 colonnes
  global-box-sizing: border-box   // Utiliser border-box
  );

// on inclut les propriétés border-box
@include border-box-sizing;

Mais cette fois-ci, au lieu de calculer manuellement les pixels et pourcentages exacts, nous allons demander à Susy de le faire pour nous. Pour cela, il suffit d'indiquer à Susy que content fait 8 colonnes et sidebar 4 colonnes.

On doit faire savoir à Susy que sidebar est le dernier élément de la rangée, afin qu'elle procède aux ajustements nécessaires pour minimiser l'effet des arrondis de pixels par le navigateur.

//SCSS
// On indique d'abord la largeur de notre élément conteneur
.wrap {
    @include container (1120px);
}

.content {
  @include span(8);   // Indique à Susy que content fait 8 colonnes
}

// Le sidebar fait 4 colonnes et c'est le dernier élément de la rangée:
.sidebar {
  @include span(4 last); 
}

Et tout ceci se compile ainsi :

//CSS
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;}
  .wrap:after {
    content: " ";
    display: block;
    clear: both;}

.content {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;}

.sidebar {
  width: 32.20339%;
  float: right;
  margin-right: 0;}

Vous avez remarqué que le résultat en CSS est exactement ce dont nous avions besoin ? Susy nous a fait gagner pas mal de temps. En résumé, nous n'avons eu besoin que de ces quelques lignes de code :

@import "susy";

$susy: (
  columns: 12, 
  global-box-sizing: border-box );

@include border-box-sizing;

.wrap {
    @include container (1120px);}

.content {
  @include span(8);}

.sidebar {
  @include span(4 last);}

Mais nous n'en avons pas encore fini avec la mise en page de CSS-Tricks. Descendez jusqu'au bas de la page, vous trouverez la partie des médias sociaux, il y en a dix :

image

Si vous utilisez un framework traditionnel, vous allez vous trouver confronté à un problème. Pour autant que je sache, il n'existe pas de solution simple pour modifier rapidement le nombre de colonnes de 12 à 10 avec Bootstrap ou Foundation sans affecter le reste de la mise en page.

Avec Susy vous n'êtes pas liés par telles règles. Après tout, c'est votre grille.

Votre grille, vos règles

Tout est possible lorsque vous faites vos propres grilles. Avant de passer à CSS, assurons-nous d'avoir le bon markup, qui devrait ressembler à ceci :

//HTML
<div class="wrap">
  <div class="content"></div>
  <div class="sidebar"></div>
  <div class="social">
    <ul>
      <li class="social__list-item"></li> <!-- répétez 10 fois --> 
    </ul>
  </div>
</div>

Nous pouvons maintenant commencer à travailler à notre CSS. En utilisant l'approche “à la main”, vous vous êtes rendu compte qu'il fallait calculer à nouveau la largeur de chaque item et de chaque gouttière.

image

//CSS
.social {
  padding: 1.6964286% /* 19px / 1120px */
}

/* Ajoute un clearfix à social pour empêcher l'effondrement du float  */
.social:after {
  content: &quot; &quot;;
  clear: both; 
  display: block;
}

.social__list-item {
  float: left; 
  width: 9.1497227; /* 99px / 1082px */
  margin-right: 1.0166359; /* 11px / 1082px */
}

/* et le dernier item ne peut pas avoir de marge à droite */
/* Il est bon de le flotter à droite pour résoudre le problème des arrondis de pixels */

.social__list-item:last-child {
  float: right; 
  margin-right: 0;
}

Si vous me posez la question, je vous dirai que c'est très pénible.

Avec Susy, c'est bien plus simple. Il vous suffit d'indiquer à Susy qu'il y a 10 colonnes en tout (au lieu de 12) et que chaque item prend une colonne.

//SCSS
.social {
  /* Ajoute un padding de 19px de chaque côté du container .social */
  padding: gutter();
  /* On ajoute un clearfix car tous les éléments enfants sont flottés */
  @include cf;

  .social__list-item {
    /* Indique à Susy qu'il y a 10 items, et que chacun prend 1 colonne */
    @include span(1 of 10);
    /* Une autre façon de dire à Susy que c'est le dernier item de la rangée */
    &:last-child {
      @include last;
    }
  }
}

Et Susy produit exactement les propriétés dont nous avons besoin !

//CSS
.social {
  padding: 1.69492%; }
  .social:after {
    content: "";
    display: table;
    clear: both; }
  .social .social__list-item {
    width: 8.16327%;
    float: left;
    margin-right: 2.04082%; }
    .social .social__list-item:last-child {
      float: right;
      margin-right: 0; }

Voilà, c'est aussi simple que cela avec Susy. Aucun talent mathématique à avoir. Si vous savez comment réaliser une grille avec Vanilla CSS, vous savez utiliser Susy.

Quand on travaille en pourcentages, il est inévitable que le résultat final contienne des fractions de pixels, comme 10,4px. Ça a créé de gros problèmes de mise en page pendant longtemps car chaque navigateur a sa façon de traiter ces fractions de pixels.

Les navigateurs Webkit par exemple arrondissent au pixel inférieur, donc 10,4px deviendra 10px. Plus vous avez d'items dans votre mise en page et plus grande sera l'incidence de l'arrondi. Notre erreur d'arrondi apparaît clairement dans les navigateurs Webkit :

image

De telles erreurs ne sont pas acceptables.

Traitement des arrondis

Une méthode consiste à s'assurer que les pourcentages ne génèrent pas de fractions de pixels. Mais ce n'est pas une bonne idée car vous risquez de vous retrouver avec un site non-responsif.

Il existe une autre méthode, que j'appelle la technique d'isolation.

Cette méthode est un peu plus avancée et demande de connaître un peu l'isolation telle que développée par John Albin Wilkins. Cette technique a été testée dans les grilles zen depuis longtemps. Si vous connaissez les grilles zen vous savez ce que je veux dire. Sinon, voyons de plus près comme ça marche.

La technique d'isolation

L'objectif de cette technique est de réduire l'effet cumulatif des erreurs d'arrondis en les positionnant exactement où ils devraient se trouver avec des marges spécifiques.

Cette technique demande que :

  • chaque élément ait une propriété margin-left pour se positionner correctement.
  • chaque élément ait une propriété margin-right de -100% pour tirer l'élément suivant vers le bord extrême gauche du container.

Cela peut être confus si vous n'êtes pas habitués aux marges négatives. Voyons comment cela se passe, pas à pas.

Admettons que vous ayez à créer une mise en page de trois colonnes :

image

Nous allons passer en revue le positionnement des éléments l'un après l'autre. L'item 1 est assez simple.

  • Il a une margin-left de 0, donc il est positionné au début.
  • Puis il tire à lui l'item suivant (item 2) au début de la ligne avec une margin-right de -100%.

image

L'item 2 a donc été installé au début de la ligne avant que ses propres propriétés ne CSS soient appliquées.

image

L'item 2 se positionne ensuite avec une propriété margin-left qui a pour valeur en pourcentage l'équivalent de 2 colonnes et 2 gouttières, ce qui le positionne exactement sur la troisième colonne.

image

L'item 2 a lui aussi une propriété margin-right qui tire l'item suivant (item 3) au début de la ligne.

image

L'item 3 est positionné au début de la ligne avant que ses propres propriétés CSS ne soient appliquées.

image

Il est ensuite positionné sur la cinquième colonne grâce à sa propriété margin-left qui a pour valeur en pourcentage l'équivalent de 4 colonnes et 4 gouttières.

image

Et ainsi de suite.

Si un item doit être le début d'une nouvelle ligne, il faut utiliser un clear float de l'item précédent, avec la propriété clear:left.

image

Et pour l'aligner avec la première colonne (positionnée au début de la ligne), il doit modifier sa propriété margin-left en la remettant à 0 pour se placer au début.

image

Voilà comment fonctionne la technique d'isolation. Maintenant que nous avons compris son fonctionnement, nous pouvons l'utiliser pour résoudre le problème des arrondis de pixels.

Résolution des problèmes d'arrondis

Nous devrions positionner chaque item manuellement avec la technique d'isolation, mais Susy peut nous venir en aide.

Susy comporte une fonction très pratique qui nous aide à éliminer tout le travail manuel. C'est le mixin gallery.

//SCSS
.social__list-item {
  @include gallery(1 of 10);
}

et le CSS qui en résulte utilise la technique d'isolation précédemment décrite.

//CSS
.social .social__list-item {
    width: 8.16327%;
    float: left; }
    .social .social__list-item:nth-child(10n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .social .social__list-item:nth-child(10n + 2) {
      margin-left: 10.20408%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 3) {
      margin-left: 20.40816%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 4) {
      margin-left: 30.61224%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 5) {
      margin-left: 40.81633%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 6) {
      margin-left: 51.02041%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 7) {
      margin-left: 61.22449%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 8) {
      margin-left: 71.42857%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 9) {
      margin-left: 81.63265%;
      margin-right: -100%;
      clear: none; }
    .social .social__list-item:nth-child(10n + 10) {
      margin-left: 91.83673%;
      margin-right: -100%;
      clear: none; }

Notre ligne de média sociaux est redevenue normale !

image

Maintenant que nous avons pris de la vitesse, passons un cran au-dessus et rendons notre mise en page responsive.

Une mise en page responsive

Les sites web responsifs sont devenus de plus en plus importants et je serais un peu court si je ne vous parlais pas des mises en page responsives avec Susy.

La première étape est de vous assurer que vous êtes familier des media queries. Faites particulièrement attention aux media queries mobile-first dans cet article car nous allons en avoir besoin.

Pour faire simple, nous allons créer une mise en page comportant seulement deux breakpoints, un pour le mobile, de 0 à 700px et un pour le desktop à partir de 700px.

Dans le mobile, le .content et le .sidebar occupent tous les deux 100% du viewport. Après 700px, .content et .sidebar seront répartis sur 8 colonnes et 4 colonnes respectivement.

Si nous codions à la main, nous aurions ceci (en Sass) :

//SCSS
.content {
  /* Styles pour le mobile */

  /* Styles pour le desktop */
  @media (min-width: 700px) {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%;
  }
}

.sidebar {
  /* Styles pour le mobile */

  /* Styles pour le desktop */
  @media (min-width: 700px) {
    width: 32.20339%;
    float: right;
    margin-right: 0;
  }
}

Vous n'avez pas besoin de créer de styles pour le mobile car les blocs div prennent 100% de la largeur par défaut. Par contre il vous faut vous assurer que la mise en page desktop se déclenche lorsque l'écran dépasse 700px de largeur.

Susy rend ce travail plus rapide, en utilisant exactement les mêmes techniques et media queries.

//SCSS
.content {
  /* Styles pour le mobile */ 

  /* Styles pour le desktop */
  @media (min-width: 700px) {
    @include span(8); 
  }
}

.sidebar {
  /* Styles pour le mobile */ 

  /* Styles pour le desktop */
  @media (min-width: 700px) {
    @include span(4 last); 
  }
}

Voilà pour .content et .sidebar.

Passons maintenant à nos médias sociaux. Voici ce que ça donne dans un mobile.

image

Au lieu d'avoir chaque item sur une des 10 colonnes, chacun prendra 2 des 10 colonnes, et vous pouvez le faire en utilisant span(2 of 10).

NB: Pourquoi ne pas utiliser 1 colonne sur 5 à la place ? Il y a une petite différence entre span(1 of 5) et span(2 of 10), que cette illustration expliquera bien :

image

On a là deux mises en pages fondamentalement différentes, à cause du nombre de gouttières. Vous pouvez toujours utiliser l'option 1 sur 5, mais je garderai mon option de 2 sur 10 à cause de la taille des gouttières.

Appelons à nouveau notre mixin gallery et ajoutons une gouttière sous chaque item pour bien séparer les rangées.

//SCSS
.social {
  /* ... Mêmes styles que ci-dessus */

  .social__list-item {
    @include gallery(2 of 10);
    margin-bottom: gutter(10); 
  }

  @media (min-width: 700px) {
    @include gallery(1 of 10); 
    margin-bottom: 0; 
  }
}

Voici un exemple de ce que nous avons jusqu'ici :

See the Pen eidcj by Zell Liew (@zellwk) on CodePen.

Travailler avec Susy est aussi facile que vanilla CSS. La différence est que Susy est une magicienne des mathématiques.

Susy est tellement bonne en maths qu'elle vous permet de créer des grilles asymétriques farfelues avec des colonnes de tailles différentes.

Essayons de créer une mise en page pour CSS-Tricks utilisant des grilles asymétriques.

Des grilles asymétriques

La déclaration des colonnes est un peu différente quand on travaille avec des grilles asymétriques. Vous indiquez à Susy le nombre de colonnes et le ratio de leur taille avec une liste Sass. Puisque CSS-Tricks a un contenu égal à deux fois la taille du sidebar, les colonnes peuvent être repésentées par une liste 2 1. Cela signifie qu'il y a deux colonnes, l'une étant deux fois plus large que l'autre.

Vous devrez également régler le mode de rendu (output) sur isolate dans les réglages globaux de Susy.

//SCSS
$susy : (
  columns: 2 1, 
  output: isolate,
)

Maintenant, au lieu de dire que le contenu tient sur 8 colonnes, nous indiquons que le contenu prend 1 colonne. Susy est suffisamment intelligente pour connaître la taille de la colonne si vous lui donnez sa position. Dans ce cas, le contenu est le premier item.

//SCSS
.content {
  @include span(1 first); 
}

De la même façon, vous devez indiquer à Susy combien de colonnes prendra le sidebar et où il se trouve. Dans ce cas, le sidebar occupe la deuxième colonne qui se trouve être le dernier item de la rangée.

//SCSS
.sidebar {
  @include span(1 last);
}

Ce qui nous donne :

image

Il y a bien d'autres choses à dire sur les grilles asymétriques et il faudrait un article entier pour vous montrer comment les construire avec Susy. J'ai créé un design simple qui en explique les concepts sur mon blog, qui utilise ceci comme exemple :

image

Par ailleurs, j'ai écrit de manière détaillée à propos des mises en page asymétriques dans Learning Susy, à partir d'un exemple plus réaliste basé sur le design de Nathan Ford.

image

Conclusion

Et voilà, nous sommes arrivés à la fin de cette introduction à Susy et de quelques sujets périphériques (mais importants !) comme les erreurs d'arrondis de pixels. J'espère que cela vous aura donné envie d'essayer Susy.

En fait, il y a tellement de choses à dire sur Susy que je vous invite à lire 5 chapitres de mon livre sur Susy. Jetez-y un coup d'oeil et vous apprendrez bien d'autres choses. Et si vous avez des questions sur Susy ou sur le développement front-end en général, n'hésitez pas à me contacter.


Intéressé par Sass ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles parus sur Sass dans La Cascade.


Ressources complémentaires en anglais

Une série de tutoriels vidéos sur Susy, formidable comme toujours avec Level Up Tuts
Le blog de Zell Liew

Ressources complémentaires en français

Vidéo d'une présentation de Sass, Compass et Susy par Pierre-Emmanuel Fringant.


original paru le dans CSS-Tricks.

Sur l'auteur : est développeur et designer, il s'est formé lui-même à l'âge de 25 ans. On peut le suivre sur Twitter et sur son blog.

Traduit avec l’aimable autorisation de CSS-Tricks et de l’auteur.
Copyright CSS-Tricks © 2014.