- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
sass compass (zen 5) et susy
trio 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
(http://susy.oddbird.net/guides/getting-started/)sudo gem install susy
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