Adaptive

Thème pour Drupal 7. Vers la doc Officielle.

Version du theme 7.x-3.2 en mai 2014

Définitions google de mobile, tablettes, tel...

Vocabulaire Google pour les sites "mobile":

mobile fait référence aux smartphones, et non aux tablettes ou aux téléphones traditionnels => smartphones Android, iPhone ou Windows Phone (affichent une partie de HTML5).
Tablettes appareils à part (qd ils parlent de mobile, ils excluent en général les tablettes).
Téléphones multimédias : avec navigateur XHTML, HTML5 (basique) et js => en général téléphones 3G qui ne sont pas des smartphones
Téléphones traditionnels : cHTML (iMode), WML, XHTML-MP...

Fichier attachéTaille
PDF icon search-engine-optimization-starter-guide-fr.pdf7.64 Mo

RWD - Notes livre - ch 4 - RWD avec le thème Aurora

http://snugug.github.io/Aurora/ est la doc officielle et sur drupal c'est à https://www.drupal.org/project/aurora
Liste d'autres modules pour compléter Aurora à http://snugug.github.io/Aurora/modules/
Les sous-thèmes Aurora sont générés via http://yeoman.io/ (il faut avoir installé node.js -> voir https://www.drupal.org/project/aurora)

Plan:
1. install (gem install compass-aurora  + magic + HTML 5 Tools + dl le thème)
2. créer son sous-thème et configurer config.rb (mettre en debug = true)
3. check gems requises avec un   bundle exec compass watch

Responsive layout

Compass utilise le langage de feuille de style sass. Plus sur sass http://sass-lang.com/guide
RWD (Responsive web design) https://www.drupal.org/node/1388492

Adaptivetheme, coté CSS 3 (avec ou sans sass?)

En PJ: les 2 css globales ie pour toute taille de device (non "responsive"):  global.styles.css (a bp de selecteurs vides donc soit en effacer soit utiliser SASS) et global.base.css (inclus normalize.css ainsi que d'autres classes et styles de base (alignement des containeur par défaut, images flexibles..)).

Fichier attachéTaille
Plain text icon global.styles.css_.txt29.39 Ko
Plain text icon global.base_.css_.txt13.68 Ko
Plain text icon adaptative1info.txt17.6 Ko

Les feuilles de style de Sky 3

Concerne: thème Sky 3.0 (basé sur adaptive 3)  CSS 3 et  html 5.

liste des feuilles de styles css de sky et adaptive

AT Core 7.x-3 génère 8 css et js: File Generation

Tags:

Adaptivetheme génère au min 8 feuilles de styles .css. qui ne sont pas chargées d'un coup (ensemble), ca dépend de la conf.

Par défaut, il les sauve dans le theme du site: sites/default/files/adaptivetheme/foobar_files (ou à admin/appearance/settings/sky2 selon "Path to Generated Files") et cela à chaque fois qu'on sauve les settings du thème => si on les efface ou modifie, pas grave, il sufffit de resauver les settings du thème ;)

Sky 3 - bloc collapsible et conf simples

Tags:

personnaliser le contenu du bloc collapsible (sky 3.0)

ce bloc apparait en bas à droite. S'il contient le bloc "articles récents" (thme sky2) la police est trop grosse.

Sky 3.0 les sous themes

Sky22 est un sous-theme de Sky2, HTML 5 et CSS 3 "responsive", basé sur adaptive mais avec le module color intégré. Ici version 3.0.

Comparaison de leur .info

Infos sur ce qu'hérite ou non un sous-thème de son thème père:

  • tout thème fils hérite des .css et .js du thème père (à condition d'avoir un amoins une css custom)
  • le .info du fils doit avoir des regions

 

Créer un sous theme foo pour sky - adaptive

Tags:

Footheme est par défaut configuré pour Corolla, et non pour Sky.

Utiliser plutot Sky 3.0.

Pages

S'abonner à RSS - Adaptive