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..)).

Le .info par défaut d'un sous theme renseigne
Theme Settings Regions
Standard layout et Tablet landscape: three_col_grail et largeur page 100
mais bigscreen_media_query = only screen and (min-width:1025px)
et landscape_media_query = only screen and (min-width:769px) and (max-width:1024px
regions[content_aside]     = Aside
regions[leaderboard]       = Leaderboard
Tablet portrait: one_col_vert
tablet_portrait_media_query = only screen and (min-width:581px) and (max-width:768px
Smalltouch landscape: one_col_vert
only screen and (min-width:321px) and (max-width:580px
Smalltouch portrait : one_col_stack
... SEO  

Si Compass est configuré pour surveiller le dossier SASS ou autre fichier SCSS de votre thème, il va OVERWRITER le ou les fichiers CSS qui sont dans le dossier CSS de votre sous-thème! En effacant le config.rb on s'assure que cela n'arrivera jamais.

Adaptivetheme 7.x-3.x a 2 "modes" de fonctionnement (déterminés automatiquement lors d'un changement "Compression CSS" à /admin/config/development/performance): "Development" (si non-compression CSS) et "Production" (si compression CSS) - les feuilles de styles ne sont pas chargées de la meme facon selon le mode.

Chargement des feuilles de styles responsive

en mode dev

en mode production

les feuilles responsive sont chargées dans des éléments liens par media, pour se charger directement ds browser (on ne voit pas la différence on fait du dev CSS normal).

Elles sont agrégées en un seul fichier, et utilisent des requetes @media.
At Core agrège les CSS et les envoie au bon media.
ThemeName.responsive.styles.css est appellé.

5 feuilles "responsive" (une par break point)

  - responsive.smalltouch.landscape.css
  - responsive.smalltouch.portrait.css
  - responsive.tablet.landscape.css
  - responsive.tablet.portrait.css
  - responsive.desktop.css

Si on modifie des css responsive en prod:

1. resauver les paramètres du thème
   (AT Core recrée les fichiers créés)
2. effacer le cache des sites
   (pour que drupal voit le nouveau fichier)

  chemin relatif: fichiers publiques (At Core)

Le CSS/README.txt est indispensable.

 

Official documentation page: http://drupal.org/node/1089656

Doc tek: 
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