Zen 7x-5.5

Update : depuis le 1er décembre, la version officielle pour dupal 7 est Zen 7.x-5.6. Pas de maj de la db à faire (update.php). Ne pas oublier de copier les modifs faites sur starterkit.

Zen 7x-5.5 a shiv HTML 5 inclus et responsive. Avec Fences (qui semble peu maintenu) il est plus facile de thémer les champs Fields et avoir du HTML 5 sémantique.

  • Sass/compass ou facon CSS
  • Zen Grids: plugin pour Sass/Compass inclus.
  • Normalize CSS inclus pour améliorer les "reset"
  • inclus (pour IE 8): Respond.js pour les requètes médias.  IE conditional classes
  • Swappable layouts: un fichier layout CSS/Sass séparé. Si on préfère Zen Grids, 960, Gridset App ou autre, on peux y remplacer ici le layout par défaut.

Depuis Zen 7.x-5.2 les feuilles de styles sont organisées selon la catégorisation SMACSS
Depuis Zen 7.x-5.4 la structure des fichiers a aussi changé. Vers la présentation des .CSS de Zen 5.5.

Styles pour Internet Explorer (IE)

Dans templates/html.tpl.php de Zen 5.5, utiliser les conditions MS.
IE 6 voit les classes de style "lt-ie7 lt-ie8 lt-ie9" =>

  • pour une règle spécifique pour IE6, préfixer le sélecteur avec .lt-ie7 (avant IE7).
  • Pour une règle concernant IE6 et IE7 (à la fois), utiliser le préfixe ".lt-ie8 ":
    .someRule { /* Styles for all browsers */ }
    .lt-ie8 .someRule { /* Styles for IE6 and IE7 only. */ }

Autre solution, avec https://drupal.org/project/conditional_styles

Important

Un certain nombre de styles de Zen overrident ceux du core drupal. Donc, en effacant une déclaration dans les .css de votre sous-thème, on peux avoir des surprises (car les styles du core travaillent encore).


dev avec sass et compass (du read.me)

dans son sous-theme: compass watch

passer en prod

source http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723 p32

Update des fichiers css, minify et agregation (pour perf)

  • éditer config.rb en décommentant "#environnement = :production"
  • effacer les .css  compass clean
  • le regénérer   compass compile
  • activer l'agregation css  admin/config/development/performance
  • lire zen/STARTERKIT/sass/README.txt

Plus (sur le web)

Useful CSS selectors to add to your stylesheets

migration de zen https://www.drupal.org/node/219527 (iXe: de la 6.x-1.2 vers 7.x-5.5)

vers les plug-in d'aide au dev et gestion des CSS (https://addons.mozilla.org/de/firefox/addon/firecompass-for-firebug/?src...)

Article en anglais https://www.drupal.org/project/zen et http://drupal.org/documentation/theme/zen doc sur drupal https://www.drupal.org/node/1728270
liste des sélecteurs css à utiliser

http://drupal.stackexchange.com/questions/tagged/zen et  https://www.drupal.org/project/issues/zen

Voir css drupal 8 https://www.drupal.org/node/1887918  et  http://atendesigngroup.com/blog/applying-smacss-drupal ainsi que https://www.drupal.org/node/2087061

http://smacss.com