RWD - Notes livre - ch 1 - Intro

Un ex simple de media query (ex dégradation progressive)

Ici, on part d'un site construit pour les écrans larges, puis on va le modifier pour les tablettes puis pour les smartphones (habituellement, on fait l'inverse).

On veux créer une CSS qui ne soit utilisée que dans une seule résolution d'écran: c'est une media query.
Le code CSS suivant sera ok sur un large écran, mais pas sur un smartphone.

  div.column {
    width: 20%; /* Override for smaller than desktop browsers (tablets). */
  }
}
@media only screen and (max-width: 767px) {
  div.column {
    width: 100%; /* Override for smaller than tablet browsers (smartphones). */
  }
}

Pour les smartphone, mettre dans le head: <meta name="viewport" content="width=device-width, initial-scale=1">

Avantages:

• on n'a pas à chercher coté serveur "quel est ce client, qu'on lui envoi la bonne CSS"
• pas de js qui modifie page après son chargement
• tous les surfeurs ont à 100% le meme code, kk soit leur écran
• réutilisation facilitée du code (et overide uniquement ce qu'on a besoin)
• il est facile de savoir quelle CSS s'applique à quelle résolution de device
• support des navigateurs de niveau A (A-level browsers) - meme avec IE (9 et +)

Ce site est simple, le code suivant y est ajouté:

@media only screen and (max-width: 767px) {
  div {
    width: 100%;
    float: none;
  }
}

Mobile d'abord ou Bureau d'abord ?

Dégradation progressive (graceful degradation): on commence par penser aux derniers browsers et PC récents ; puis on retire les anims et trucs sophistiqués (<canvas>), on efface des sections, retaille les images, on empile les col les unes en dessous des autres...
Alors que si en amélioration progressive (progressive enhancement) : on commence par les tel les plus petits, et puis on en rajoute.

De nos jours, on commence par travailler pour les mobiles, en amélioration progressive.

L'ex du haut, mais en amélioration progressive

div.column {
  width: 100%; /* The default, used by mobile browsers. */
}
@media only screen and (min-width: 768px) {
  div.column {
    width: 20%; /* Override for larger than mobile browsers (tablets). */
  }
}
@media only screen and (min-width: 1024px) {
  div.column {
    width: 100px; /* Override for larger than tablet browsers (desktops). */
  }
}

RWD - Notes livre - ch 2 - Les thèmes drupal et RWD

Les fichiers importants: THEMENAME.info, template.php (fonc pre-process -> altérer les variables après que drupal les aient générées mais avant le traitement des templates), theme-settings.php (ajout champs de conf dans GUI dans notre thème) et les tpl.php (surnom "tipplefips").

Ajout de requetes média et du meta tag Viewport (dit aux tel de ne pas dézoomer)

Rappel CSS: les règles CSS sont évaluées de haut en bas. Si un selecteur apparait 2 fois (ds 2 lieux différents) ce sont les règles de la 2e instance  qui l'emporteront.

Ici ancienne méthode, mais qui marche toujours ;) La balise head se trouve dans html.tpl.php. Note: il existe aussi le module Add To Head.
Soit on utilise un thème de base (et il a déja ce fichier, le recopier dans son sous-thème) soit on doit le recopier depuis modules/system/html.tpl.ph vers son dossier de thème perso. Y mettre le code: <meta name="viewport" content="width=device-width, initial-scale=1">

Utiliser un thème de base

Le .info de votre sous thème sera du type:
name = Yourtheme
description = Mon sous-theme de Zen
version = 1.0
core = 7.x
engine = phptemplate
base theme = zen
stylesheets[all][] = style.css
stylesheets[print][] = print.css