Zen, SASS, responsive design

Transcription

1 , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36

2 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 2/36

3

4 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 4/36

5 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Généralités Drupal sépare clairement le rendu (présentation des pages web) de la logique. En toute fin de course, il charge un moteur de rendu (theme engine) (PHP template, Smarty, PHPTAL, etc.) de transformer le contenu sous une forme exploitable pour le client. Drupal peut présenter le contenu autrement qu en utilisant HTML : texte brut (courriers électroniques), XML, JSON... La mission principale de Drupal est la gestion de contenus, mais un en sens désormais plus générique (services web, etc.) Felip Manyer i Ballester, SASS, responsive design 5/36

6 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Concepts à mettre en œuvre Structuration Balisage HTML : fichiers gabarits (templates) fonctions de rendu (theme functions) Présentation Définition du style avec un langage tel que ou un sur-ensemble (SASS, LESS) Surcharges Surcharge des fonctions de rendu et de preprocess dans template.php (ou de dans le.info) Felip Manyer i Ballester, SASS, responsive design 6/36

7 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Structuration : gabarits system/page.tpl.php <?php if ($breadcrumb):?> <div id="breadcrumb"><?php print $breadcrumb;?></div> <?php endif;?> <?php print $messages;?> zen/templates/page.tpl.php <div id="content" class="column" role="main"> <?php print render($page[ highlighted ]);?> <?php print $breadcrumb;?> [...] </div><!-- /#content --> Felip Manyer i Ballester, SASS, responsive design 7/36

8 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Structuration : fonctions de rendu Dans theme.inc function theme_breadcrumb($variables) { $breadcrumb = $variables[ breadcrumb ]; $output = <div class="breadcrumb">. implode(», $breadcrumb). </div> ; return $output; Dans template.php function mon_joli_theme_breadcrumb($variables) { $breadcrumb = $variables[ breadcrumb ]; $output = <div class="breadcrumb">. implode(, $breadcrumb). </div> ; return $output; Felip Manyer i Ballester, SASS, responsive design 8/36

9 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Surcharges Dans theme.inc function template_process_page(&$variables) { if (!isset($variables[ breadcrumb ])) { $variables[ breadcrumb ] = theme( breadcrumb, array( breadcrumb => drupal_get_breadcrumb())); Dans template.php function mon_joli_theme_preprocess_page(&$variables) { $variables[ ville ] = Montpellier ; Felip Manyer i Ballester, SASS, responsive design 9/36

10 Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal Types de thèmes Trois possibilités au moment de choisir un thème : utiliser un thème déjà fait (Bartik, Marinelli, CTI Flex, Corporate Clean, Pixture Reloaded, etc.), éventuellement acquis à titre onéreux repartir de zéro à la Linux From Scratch (get a life) utiliser un thème de base (Omega, Adaptive Theme, Fusion,, etc.) : thème «blanc» comprenant les fondamentaux (gabarits, régions, de mise en page, divers paramètres) et des outils permettant d intégrer un design. On crée généralement un sous-thème permettant de conserver la plupart des fonctionnalités dans le thème parent, et de surcharger à la demande. Felip Manyer i Ballester, SASS, responsive design 10/36

11

12 Responsive design SASS 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 12/36

13 Responsive design SASS Cascading stylesheets : genèse (cascading stylesheets) est un langage de présentation (première séparation entre la structuration (HTML) et la présentation), largement connu de l audience 6 août 1991 projet WorldWideWeb rendu public sur UseNet par Tim Berners-Lee premiers essais «côté client» (simple personnalisation) : Viola, Harmony les cascading HTML stylesheets d Håkon Wium Lie s imposent Felip Manyer i Ballester, SASS, responsive design 13/36

14 Responsive design SASS Cascading stylesheets : les temps héroïques 1 la guerre des navigateurs entre Internet Explorer et Netscape. Spécification relativement pauvre, implémentations concurrentes. La mise en page avec des tableaux perdure. 2 ère IE5/6. Ambitions précipitées : gestion des fontes, adaptabilité aux différents supports de lecture : qui se limitera longtemps à screen et print 2.1 se concentre sur ce qui est implémentable, repousse le reste à 3 3 beaucoup de changements, dont les media queries Felip Manyer i Ballester, SASS, responsive design 14/36

15 Responsive design SASS et plasticité du web : Types de media ( 2) braille embossed handheld print projection screen speech tty tv Caractéristiques du media (2007) color nb bits/couleur color-index index des couleurs device-aspect-ratio ratio dispositif device-height hauteur dispositif device-width largeur dispositif grid largeur fixe height hauteur fenêtre monochrome monochrome orientation portrait/paysage resolution résolution scan pour les TV width largeur fenêtre Felip Manyer i Ballester, SASS, responsive design 15/36

16 Responsive design SASS Pléthore de clients sur le Web : de 7 à 77 usages mobiles en pleine explosion : le trafic des appareils mobiles devrait dépasser celui des machines de bureau en 2015 (IDC) le «responsive design» (conception de sites web adaptatifs) est une solution élégante permettant d échapper à l enfer de la duplication de code Felip Manyer i Ballester, SASS, responsive design 16/36

17 Responsive design SASS Responsive design : mise en œuvre on utilise une extension de l instruction permettant de définir des points de all and all and (min-width:480px) and all and (min-width:960px) nécessite un navigateur supportant 3, ou une couche intermédiaire de compatiblité en JavaScript (shim, shiv, modernizr) pour notre ami IE 8 (oubliez IE 7) préférez des unités relatives (pourcentages, em, ex), utilisez une grille, donnez une largeur de 100 % aux images utilisation des tableaux problématique Felip Manyer i Ballester, SASS, responsive design 17/36

18 Responsive design SASS Responsive design : mobile first le mobile n est pas un état dégradé de la version bureau : UX correcte (même si minimaliste) et ergonomique de base étudier d abord la version mobile. Ce sera le style par défaut dans la pour tous les dispositifs : pas encore de point de coupure mobile : empilement sur une colonne (pas de défilement horizontal) ensuite rajouter des spécificités pour chaque dispositif identifié C est la doctrine mobile first (le mobile d abord). Felip Manyer i Ballester, SASS, responsive design 18/36

19 Responsive design SASS Responsive design : modules utiles Views Responsive Grid Format de grille adaptatif pour Views. Voir aussi Views Fluid grid. Better Jump Menus afficher un menu sous forme de liste déroulante Responsive Images [and Styles] charger des images adaptées au dispositif. 7.x-2.x utilise uniquement des media queries. modules similaires Breakpoints gestion avancée des points de coupure Picture autre approche de la gestion des images Felip Manyer i Ballester, SASS, responsive design 19/36

20 Responsive design SASS Syntactically awesome stylesheets (SASS) un langage de présentation se présentant comme un sur-ensemble de 3 (au même titre que LESS) fichiers doivent être transformés en avant utilisation syntaxe S compatible avec (transition en douceur) principales caractéristiques : variables, règles imbriquées, «mixins», héritage Felip Manyer i Ballester, SASS, responsive design 20/36

21 Responsive design SASS SASS : variables S $blue: #3bbfce; $margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; content-navigation { border-color: #3bbfce; color: #2b9eab;.border { padding: 8px; margin: 8px; border-color: #3bbfce; Felip Manyer i Ballester, SASS, responsive design 21/36

22 Responsive design SASS SASS : Imbrication (nesting) S table.hl { margin: 2em 0; td.ln { text-align: right; li { font: { family: serif; weight: bold; size: 1.2em; table.hl { margin: 2em 0; table.hl td.ln { text-align: right; li { font-family: serif; font-weight: bold; font-size: 1.2em; Felip Manyer i Ballester, SASS, responsive design 22/36

23 Responsive design SASS SASS : mixins table-base { th { text-align: center; font-weight: bold; td, th {padding: left($dist) { float: left; margin-left: $dist; #data table-base; #data { float: left; margin-left: 10px; #data th { text-align: center; font-weight: bold; #data td, #data th { padding: 2px; Felip Manyer i Ballester, SASS, responsive design 23/36

24 Responsive design SASS SASS : héritage S.error { border: 1px #f00; background: #fdd;.error.intrusion { font-size: 1.3em; font-weight: bold;.baderror border-width: 3px;.error,.badError { border: 1px #f00; background: #fdd;.error.intrusion,.baderror.intrusion { font-size: 1.3em; font-weight: bold;.baderror { border-width: 3px; Felip Manyer i Ballester, SASS, responsive design 24/36

25 Responsive design SASS Compass une bibliothèque pour SASS, comprenant de nombreux mixins, un gestionnaire de packages pour obtenir des librairies additionnelles, un exécutable pour générer des les meilleurs motifs réutilisables du Web facilite l utilisation de 3 : gère les vendor prefixes gestion automatisée des sprites «rythmes typographiques» Felip Manyer i Ballester, SASS, responsive design 25/36

26

27 Installation et création d un sous-thème Structure des fichiers, grilles 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie des thèmes Drupal 2 Responsive design SASS 3 Installation et création d un sous-thème Structure des fichiers, grilles Felip Manyer i Ballester, SASS, responsive design 27/36

28 Installation et création d un sous-thème Structure des fichiers, grilles Présentation de : le thème is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. thème de base créé en 2006 par John Albin Wilkins 2 branches stables actuellement : 7.x-3.x et 7.x-5.x ( 5). documentation en ligne fournie, et code commenté avec soin Felip Manyer i Ballester, SASS, responsive design 28/36

29 Installation et création d un sous-thème Structure des fichiers, grilles Présentation de : le créateur co-maintenu par John Albin Wilkins, de palantir.net (organisations publiques et non gouvernementales) développeur (front-end) clef dans la communauté : nombreux modules (Menu Block, Menu Position, Fences, sans compter le cœur), chef de la Drupal 8 Mobile Initiative co-auteur de Drupal 7 Module Development, gagnant du TPOTM (trivial patch of the month) - // Check only if it s a template and not registered by the theme or engine + // Check only if it s a template and not registered by the theme or engine. Felip Manyer i Ballester, SASS, responsive design 29/36

30 Installation et création d un sous-thème Structure des fichiers, grilles Préparatifs Installations des dépendances optionnelles sous Debian : Installer SASS sudo apt-get install rubygems sudo gem update sudo gem install sass Installer Compass sudo gem install compass Felip Manyer i Ballester, SASS, responsive design 30/36

31 Installation et création d un sous-thème Structure des fichiers, grilles Installation de et création d un sous-thème télécharger 5 ( le placer par exemple dans sites/all/themes dans le répertoire du site, taper drush zen "Mon joli thème" --without-rtl (ou bien suivre le README : copier STARTERKIT et renommer les fichiers et les fonctions) dans mon_joli_theme.info, choisir entre css/layouts/ fixed-width.css (pas de responsive) et css/layouts/ responsive-sidebars.scss Felip Manyer i Ballester, SASS, responsive design 31/36

32 Installation et création d un sous-thème Structure des fichiers, grilles Structure des fichiers config.rb divers paramètres, dont bascule entre dev et prod, et activation de FireSass.info notamment choix du layout (fixe ou adaptatif) css/ fichiers, pouvant être utilisés directement sass/ répertoire contenant les fichiers SASS, les sont alors générées et écrasées et ne doivent pas être sous gestion de version templates/ fichiers contenant les gabarits (balisage). Ce sont des êtres sensibles. Les respecter. template.php surcharges fonctions de preprocess et de theme Felip Manyer i Ballester, SASS, responsive design 32/36

33 Installation et création d un sous-thème Structure des fichiers, grilles Outils FireSass extension de Firebug permettant d afficher les numéros de ligne du fichier SASS et non Ctrl-Maj-M mode de visualisation en responsive design de Firefox compass compass compile pour générer les, compass clean pour les supprimer, compass watch pour regénérer les fichiers concernés à chaque sauvegarde Compass.app interface graphique pour Compass ($10) Felip Manyer i Ballester, SASS, responsive design 33/36

34 Installation et création d un sous-thème Structure des fichiers, grilles Grids Grids est une collection de mixins Compass permettant de gérer aisément les grilles à haut niveau ( «charge cognitive»), pouvant être utilisée en dehors de ( avantage de SASS : pas de classes «de présentation» : la est calculée lors de sa génération démonstration : Felip Manyer i Ballester, SASS, responsive design 34/36

35

36 Installation et création d un sous-thème Structure des fichiers, grilles Conclusion 3, responsive design : de nouvelles perspectives pour un Web ouvert, universel, à défendre face aux risques de fragmentation qui persistent : la puissance du moteur de thème de Drupal mise en toute simplicité à disposition du themer, avec des outils désormais incontournables (SASS, Compass, grilles) sites non adaptatifs obsolescents. Intégration croissante du responsive dans nos outils (Drupal 8) propagez la bonne parole Felip Manyer i Ballester, SASS, responsive design 36/36