Open
Conversation
… problèmes de compatibilité.
- Passage à jQuery 1.8.2. - Mise à jour de #grid. Meilleur découpage des fichiers .scss (ceux préfixés par « _ » sont des partiels). - Amélioration de l'accessibilité des formulaires sur la page de démo, et validation HTML. - Ajout du fichier _normalize-modern.scss à utiliser dans les projets faisant l'économie de IE6 et IE7. - Modification de tous les commentaires dans _normalize.css et _normalize-modern.css pour qu'ils ne soient pas conservés pendant la compilation.
…urs commentaires autour de certains mixins.
…les problèmes de compatibilité.
…aintenance de _hashgrid.scss.
…line 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.
- Création d'un dossier /scss/partials dans lequel on range tous les fichiers SCSS qui n'ont pas vocartion à être compilés directement ; - Modification du mixin @column() situé dans _mixins.scss pour gérer le display: inline si la compatibilité IE6 est activée ; - On appelle désormais toujours _config.scss *avant* les libs (Compass notamment), pour que la variable $legacy-support-for-ie soit juste. Autrement, Compass la reset à true alors qu’on ne le veut pas forcément ; - Rétablissement des commentaires conditionnels pour IE6 et 7 sur le body (ça peut – hélas – encore servir) ; - Suppression des commentaires type <!-- include foo --> au début de chaque include PHP car c'est géré automatiquement ; - Rétablissement du contenu du dossier /swf qui peut servir pour les démos diverses ; - Remplacement des breakpoints « desktop », « mobile », « tablet » et « wide » par « L », « S », « M » et « XL ». NB : cela peut être changé à chaque nouveau projet (papa-bear, anyone?) ; - Rétablissement des fichiers _colorbox.scss et _flexslider.scss dans /plugins, mais ils ne sont pas appelés par défaut dans _plugins.scss ; - Rétablissement du fichier index.php dans /inc/content.
- Par défaut le fichier est compressé, et on n’appelle plus Growl ; - Suite des commentaires dans _mixins.scss
… directement dans _body ; - Créations des partials SCSS ui/_tables, ui/lists, ui/_typo, ui/_links ; - Ajout d’une variable $scale au fichier de config, qui permet de définir l’échelle typographique désirée ; - Épuration ethnique dans le fichier _generic.scss : suppression de certaines définitions redondantes, commentaires en anglais.
…() + différenciation visuelle des colonnes paires dans #grid (utile pour les projets où $gutter-width == 0px)
…nom de la media query en cours si la grille est affichée (merci @STPo).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Encapsulage de #grid dans une fonction anonyme jQuery pour éviter les problèmes de compatibilité.