Susy

Susy est un plugin de grilles pour Compass, idéal pour du responsive design avec une gestion de breakpoints. Ces derniers, appelés aussi « points de rupture » permettent de définir une mise en page pour telle largeur à un breakpoint donné. Ca remplace les medias queries.

Au niveau du html, le codage des balises est libre, il n’y a pas de règles de nommage à respecter.

On commence d’abord par initialiser une grille de base avec un nombre de colonnes, les largeurs, les espaces entre elles. Par principe, on définit la grille pour les mobiles (démarche mobile-first) en premier et on surcharge ensuite pour les autres supports.

$total-columns: 7; //nombre de colonnes
$column-width: 4em; //largeur des colonnes (en em, pixels ou
pourcentage)
$gutter-width: 1em; //l'espace entre les colonnes

Ensuite, on applique la grille à notre élément englobant la page.

.page {
  @include container;
  @include susy-grid-background; //permet d'avoir la grille et
les colonnes qui s'affichent en background
}

Maintenant, on va définir des formats d’affichage, par exemple, pour une tablette :

$tablette : 8;

Ce qui signifie que, dès que le navigateur aura suffisamment de place pour mettre 8 colonnes, alors il passera au breakpoint $tablette. L’avantage c’est qu’on ne définit pas de largeur fixe.

@include at-breakpoint($tablette) {
  .page {
    @include container;
    @include susy-grid-background;
  }
}

Pour aligner un élément sur la grille, on va utiliser span-columns :

.div {
  @include span-columns ($total-columns omega);
}

- $total-columns correspond aux nombre de colonnes que va utiliser l’élément. Dans notre exemple, toutes les colonnes. Attention, la variable $total-columns dépend du breakpoint dans lequel on est.

- omega permet d’indiquer que c’est le dernier élément de la ligne. Après ce bloc, le suivant passera à la ligne.

Un autre d’exemple d’affichage :

.div {
  @include span-columns ($total-columns / 2);
  @include nth-omega(2n);
}

Dans ce cas, l’élément prendra la moitié des colonnes totales.

- nth-omega : à partir du nième élément on passe à la ligne. Ici, se sera tous les 2 éléments.

Comme pour les medias queries, les styles s’additionnent et parfois ont besoin d’être retirés, notamment, avec le nth-omega (qui ajoute les propriétés float;right et margin-right sur le dernier élément). Pour éviter que les propriétés des précédents breakpoints ne soient prises en compte, on utilise la propriété remove-nth-omega qui va modifier float et margin-right.

Avec Rails, au niveau de l’installation, il faut ajouter les gems suivantes à votre Gemfile :

gem ‘compass’
gem ‘compass-rails’
gem ‘susy’

Ne pas oubliez d’inclure Susy à votre fichier css avec @import ‘susy’.

Sources :
Agence Web Caen
http://susy.oddbird.net/

Cette entrée a été publiée dans css, Non classé, rails, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

2 réponses à Susy

  1. Ping : Susy : un plugin de grilles responsives pour Co...

  2. Ping : BarCamp Web 2013 – 2ième journée | Sois Net !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.


+ 3 = 5

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">