Epic winter update is epic ! Sur la base de la dernière version d’Outline en date, j’ai apporté pleins de correctifs et de modifications, c’est à dire :
- suppression de pages/_demos.scss et des fichiers liés à cette démo ;
- déplacement de toutes les classes contenues dans le fichier core/_mixins.scss vers project/ui/generic.scss ;
- ajout d’un commentaire au début de chaque partial SCSS, en haut de fichier, pour aider à mieux se repérer dans le projet ;
- timide début de documentation des mixins ;
- déplacement de core/_forms.scss vers ui/_forms.scss ;
- dans core/_mixins.scss, ajout de variables raccourcies : $l pour $base-line-height, $m pour $gutter-width et $fs pour $base-font-size ;
- dans le fichier core/_config.scss, toutes les variables sont déclarées avec !default (bonne pratique Compass) ;
- suppression les déclarations type #content {}, #footer {} et #header {} car on ne peut pas préjuger des sélecteurs qui seront utilisés sur le projet ;
- suppression du contenu de _forms.scss : là encore, on ne sait pas d'avance les besoins du projet en terme de formulaires ;
- dans ui/_sprites.scss, on commente tout, là encore pour ne pas forcer la génération automatique d'un sprite dont on n'aura jamais besoin, mais on laisse le code commenté pour référence ;
- suppression de plugins/_flexslider.scss : ce plugin n'est pas systématiquement utilisé ;
- suppression de plugins/_colorbox.scss : ce plugin n'est pas systématiquement utilisé ;
- déplacement de project/_font-face.scss vers project/ui/_font-face.scss ;
- suppression des styles dans project/_layout.scss : ce fichier ne doit servir qu'à en importer d'autres. Les styles concernant #grid vont dans plugins/_hashgrid, et les styles concernant #page vont dans layout/_content.scss mais commenté, là encore pour ne pas préjuger des sélecteurs utilisés sur le projet ;
- création d'un fichier print.scss qui sera compilé et appelé séparément de styles.scss. La raison principale est qu'utiliser @extend dans un @media crée un warning et sera bientôt déprécié. Du coup c'est embêtant d'englober tous les styles dans @media screen ou @media print tout en utilisant @extend (ce qui peut être le cas). En outre, tant qu'on doit assurer la compatibilité jusqu'à IE 9 inclus, on est soumis au bug des 4095 sélecteurs, donc on peut être amenés à utiliser Bless, qui en tient pas compte des @media quand il scinde les fichiers. Donc autant lui donner une source d'erreur potentielle en moins ;
- création d'un dossier /print dans le dossier /project ;
- déplacement de core/_generic.scss vers project/ui/_generic.scss. En effet, ce fichier génère de la CSS screen (tout en pixel ou en em), or on importe /core dans print.scss (besoin de points) ;
- suppression de inc/content/demo.php et inc/content/index.php ;
- dans core/_config.scss, désactivation de la compatibilité IE6/IE7 ;
- suppression des variables $lte-ie8, $XXS, $XS, $S, $M, $L, $XL, $XXL de styles.scss et styles-ie8.scss : elles sont désormais définies dans core/_config.scss. Dans styles-ie8.scss, on redéfinit $lte-ie8 à true ;
- renommage du mixin unit() par outline-unit(), et modification des appels à unit() en outline-unit(). unit() existe déjà dans Sass et ne sert pas à la même chose que unit() dans Outline. Cela peut poser des problèmes lorsqu'on a a besoin de la fonction unit() originelle ;
- ajout du mixin em() ;
- modification du mixin retina-image() : on passe $asset-pipeline à true pour pouvoir bénéficier du mixin image-url() de Compass, et ainsi ne pas avoir à écrire le chemin complet de l'image : @include retina-image('bg/ideogram'); (avec true) VS @include retina-image('../img/bg/ideogram'); (avec false) ;
- renommage du mixin bloc() en block() + modification du mixin pour qu'il génère un margin-bottom de 1 ligne (cas courant), et pas un margin-bottom égal au line-height (cas plus rare) ;
- ajout de la variable $browser-font-size dans core/_config.scss car les media queries sont calculées en fonction de la font-size du navigateur, et pas de la font-size configurée dans le projet => cela entraînait de mauvais calculs ;
dans plugins/_hasgrid.scss, si on change la valeur de $base-font-size( par ex., 12px), la valeur générée par height() dans ..horiz n'est plus bonne. Il faut préciser le mixin comme ceci :  @include height(1,$browser-font-size); ($browser-font-size étant toujours égal à 16px dans le fichier de config) ;
- dans le mixin column(), on ajoute un @include box-sizing(content-box) afin que les calculs soient toujours justes pour les éléments structurants utilisants le mixin column() en particulier dans les projets où on a spécifié * { box-sizing: border-box;} ;
- remplacement des mixins mask() et unmask() dans _mixins.scss en prenant en compte cette méthode ;
- dans config.rb, passer Sass::Script::Number.precision à 8 plutôt qu'à 6 sinon ça pose des problèmes d'arrondis sous Chrome ;
- dans config.rb, ajout du chemin contenant les fontes ;
- ajout de commentaires dans config.rb ;
- création d'un dossier /assets : on y regroupe les dossiers img, js, swf, fonts, json ;
- suppression du display: inline; dans le mixin column() ;
- modification du mixin container() : on ne remet plus à 0 les margin-top et margin-bottom, ni les padding-top et padding-bottom ;
- modification du mixin mq() pour qu'il tienne compte de la font-size du navigateur ($browser-font-size) et pas de celle du projet ;
- renommage des dossiers /inc/-body en /inc/_body et /inc/-header en /inc/_header. Tous les autres dossiers contenant des partials sont désormais préfixés par un underscore afin de faciliter leur repérage ;
- modification du contenu du dossier _title. Les meta description et keywords repassent dans /_head/dist.php (il est très rare qu'on ait à modifier ces meta en intégration, page par page) ;
- dans /_head/dist.php, on active par défaut la media query RWD ;
- renommage de -html.php en _html.php ;
- dans _body/dist.php, suppression des commentaires conditionnels pour IE6 et 7, désormais inutiles dans la majorité des cas ;
- modification du contenu des fichiers /_header/dist.php et /_footer/dist.php ;
- mise à jour de inc/readme.md ;
- ajout de commentaires type <!-- include foo --> au début des includes appelés dans le <body /> ;
- suppression de logo.png ;
- dans /doc/_screen.scss, remplacement de bloc() par block() ;
- ajout d'un background-color: white dans /doc/_screen.scss ;
- MAJ de index.md (on supprime les colonnes IE6 et IE7 ainsi que les liens vers les pages qui n'existent plus) ;
- mise à jour de Modernizr (bien qu'il faudrait dans l'absolu ne charger que les tests vraiment nécessaires à chaque projet) ;
- modifs de sélecteurs dans la doc et dans la CSS de la doc ;
- on vide le behaviours.js de son contenu (on ne peut pas présumer des besoins en JS sur le projet) mais on y ajoute un encapsulage jQuery ;
- dans jquery.hashgrid.js on ajoute un encapsulage jQuery pour éviter les conflits ;
- ajout de styles type h1 + h2, h2 + h3 etc dans _generic.scss ;
- suppression des images contenues dans /img ;
- mise à jour de jQuery à la v1.10.2 ;
- mise à jour de jQuery Migrate à la v1.2.1 ;
- vidage des dossiers /assets/json, /assets/swf et /assets/fonts ;
- remplacement du mixin mq() par la nouvelle version du mixin mq() de The Guardian (https://github.com/guardian/sass-mq). On change aussi le nom des variables utilisées dans les media queries : au lieu de « $S » par exemple on utilise « tablet », plus explicite.