sass compass (zen 5) et susy

Sass is an extension of CSS3trio pour "responsive theming": Sass, Compass et Susy. Susy est une grille responsive (plugin) pour compass, qui permet de faire des grilles "magiques", statique ou fluides.

  • NON aux px OUI aux em (proportionnel au parent)
  • formule: target ÷ context = result  ou encore via fonction Sass
  • zen 5 a Sass et compass intégré
  • voir aussi Aurora (basé sur Sass/compas/html5 avec panels) et  drupal.org/project/magic

Voir présentation pdf zen-sass

grilles susy

 

"magiques"

par défaut, container élastique (pour les font en em seules), fuide à l'intérieur (col,gouttières).

grilles statique

les largeurs des containers et col sont fixes (oldy). Si col en pixiels:susy convertit en % de la taille du container. La taille du container est calculée comme pour la version magique, selon la largeurs des col et goutières.

fluides

s'adapte à la largeur de l'affichage. Par défaut le container est à 100% mais on peut aussi $container-width: 70%$container-width: 70%

conf

1. avoir sass et compas (http://compass-style.org/install/). Note: préférer l'install via composer et rvm .

sudo apt-get install rubygems
sudo gem update
sudo gem install sass
sudo gem install compass

2. conf compass project dans le rep des thèmes (fait par zen 5).

3. install susy     sudo gem install susy      (http://susy.oddbird.net/guides/getting-started/)

4. ajout de susy ds compass: ds rep des thèmes: ouvrir config.rb et y ajouter, partie "requires"       require "susy"

5. ajout de la grille ds _base.scss

on est tjs avec la conf de la grille zen (zen importe _base.scss). il faut aussi importer ds sass, ex:

@import "susy";
$total-columns: 12;             // a 12-column grid
$column-width: 4em;            // each column is 4em wide
$gutter-width: 1em;            // 1em gutters between columns
$grid-padding: $gutter-width;  // grid-padding equal to gutters

pour choisir une grille, mettre à jour $container-style variable pour le theme. par ex:

$total-columns: 5;
$column-width: 3em;
$gutter-width: .75em;
$grid-padding: $gutter-width;

tailles écrans/viewport sizes  et at-breakpoint()

$mobile   : 5;
$tablet   : 11;
$desktop  : 16;

on veut que sass/susy fasse kk chose à un moment (beakpoint), avec le compte des col en argument:

#content {
  @include span-columns(5);
  @include at-breakpoint($desktop) {
    @include span-columns(13, $desktop);
    @include prefix(3, $desktop);
  }
}

on a 5 col (contenu) - taille par defo des tel ds cet ex. puis sur un pc ca change à 13 col de large (3 col en marge avant)

on peut aussi changer de styles à un moment donné:

padding-bottom: em(15px);
@include at-breakpoint($desktop) {
  padding-bottom: em(85px);
  background: url("bg-content.png") 162px 100% no-repeat;
}

 

source: http://www.advomatic.com/blogs/jack-haas/responsive-adaptive-grids-drupal-7