tag:linuxfr.org,2005:/tags/scss/publicLinuxFr.org : les contenus étiquetés avec « scss »2022-01-27T11:22:18+01:00/favicon.pngtag:linuxfr.org,2005:Bookmark/42002022-01-27T11:22:18+01:002022-01-27T11:22:18+01:00 Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!<a href="https://parceljs.org/blog/parcel-css/">https://parceljs.org/blog/parcel-css/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/126718/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/gilcot/liens/announcing-parcel-css-a-new-css-parser-compiler-and-minifier-written-in-rust#comments">ouvrir dans le navigateur</a>
</p>
Gil Cot ✔https://linuxfr.org/nodes/126718/comments.atomtag:linuxfr.org,2005:Diary/377132018-01-24T02:40:13+01:002018-01-24T13:01:20+01:00Une CSS « froide » pour l'hiver : SteelblueLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<h2 class="sommaire">Sommaire</h2>
<ul class="toc">
<li><ul>
<li><a href="#feuille-non-exhaustive">Feuille non exhaustive</a></li>
<li><a href="#responsive"><em>Responsive</em></a></li>
<li><a href="#patches"><em>Patches</em></a></li>
<li><a href="#fontes-et-images">Fontes et images</a></li>
<li><a href="#tribune-libre">Tribune libre</a></li>
<li><a href="#tags">Tags</a></li>
</ul></li>
</ul><p>Bonjour à tous,</p>
<p>Bon, je me suis rendu compte que cela faisait pas loin de huit ans que j'avais sorti <a href="//linuxfr.org/users/obsidian/journaux/une-nouvelle-css-avec-le-printemps-springtime">Springtime</a> et avec, entre autres, la sortie de Firefox 57 Quantum Render, c'était une bonne occasion pour explorer un peu les facilités offertes par les CSS 3.</p>
<p>La voici donc. Elle s'appelle « <strong>Steelblue</strong> » et est disponible sur la <a href="//linuxfr.org/stylesheet/modifier">page de sélection des feuilles de styles</a>.</p>
<p>En l'état actuel des choses, elle fonctionne sans problème avec Firefox 57, ainsi qu'avec Safari sous iOS. Par contre, elle rame avec Google Chrome… :-(</p>
<p>L'idée générale, cette fois-ci, était de produire une CSS exhaustive, qui s'applique également aux sections administratives du site et également de se réhabituer à la disposition générale des éléments HTML et c'était un travail beaucoup plus vaste que prévu. Il s'agit donc d'une CSS sombre, grise et bleue, ce qui n'est pas tout-à-fait un hasard non plus : l'une des difficultés rencontrées avec les feuilles de styles précédentes était justement le rendu des couleurs en fonction des moniteurs et lorsque l'on utilise des tons un peu trop pastels, les à-plats gris ont tendance à apparaître bleutés. Et même si depuis la dernière, j'ai acquis d'autres <em>viewports</em>, c'est une bonne façon d'obtenir quelque chose dont le rendu sera à peu près le même partout.</p>
<h3 id="feuille-non-exhaustive">Feuille non exhaustive</h3>
<p>La dernière fois, j'avais estimé la durée de rédaction de Springtime à environ 80 heures, un peu moins pour Nightgrey. Cette fois-ci, j'ai entamé la chose au mois de novembre et j'ai arrêté de compter depuis. Je m'étais arbitrairement imposé une première <em>deadline</em> en décembre avec l'espoir de la soumettre pour Noël, mais elle n'était franchement pas prête à cette date et j'ai préféré la reporter à une date raisonnable plutôt que proposer quelque chose qui soit difficilement utilisable et qui soit décevante en première impression.</p>
<p>En revanche, il était temps de la soumettre ce mois-ci plutôt qu'essayer d'atteindre la perfection, et également pour pouvoir me recentrer sur d'autres tâches. Elle pourrait donc être encore grandement améliorée et l'idéal serait bien sûr de faire cela en fonction des retours des utilisateurs. Je suis donc friand de vos commentaires. :)</p>
<p>En particulier, la CSS n'utilise actuellement aucun graphisme, à part les icônes <em>inline</em> en SVG utilisés pour les formats de contenus et pour le bouton de développement d'un fil dans les commentaires. Outre le temps passé, la principale raison à cela est que je suis mauvais graphiste. :) Si certains d'entre vous s'en sentent l'âme et peuvent la décorer, si possible en SVG, j'en serai ravi !</p>
<p>En ce qui concerne ces icônes, elles ont été écrites à la main en SVG+XML sous VIM, optimisées au maximum et intégrées à la feuille en base64. Les icônes Markdown et ePub ont été reprises des logos officiels, puis optimisées et adaptées de la même façon.</p>
<h3 id="responsive"><em>Responsive</em></h3>
<p>La feuille n'en a pas forcément l'air au premier coup d'œil mais elle est faite pour être adaptative. <em>Via</em> des règles générales dans un premier temps, puis avec des clauses particulières en descendant en dessous de certaines limites, notamment pour changer la taille des fonte dans certains cas. Cela fonctionne, mais pourrait être également amélioré aussi.</p>
<p>En particulier, j'ai essayé de faire un rendu propre sur smartphone tenu verticalement, mais je n'ai pas eu le temps de le finaliser et ce n'est pas encore utilisable en l'état. Mais la feuille a vocation à le devenir dans un futur (plus ou moins) proche.</p>
<h3 id="patches"><em>Patches</em></h3>
<p>L'une des caractéristiques de cette feuille est qu'elle est accompagnée d'un certain nombre de modifications portées au code du site, le tout étant fourni dans une <em>pull request</em> de 24 commits présentée <a href="//linuxfr.org/suivi/pull-request-218-css-steelblue">ici</a>. Un <strong>grand merci</strong> à Bruno Michel qui y a répondu et l'a intégrée en moins de 24 heures !</p>
<p>En principe, altérer le code pour adapter le style est presque un sacrilège :) Et au contraire, c'est même un exercice de montrer que l'on peut faire l'impensable avec de longs sélecteurs CSS mais la difficulté a justement commencé à venir des sections des pages qui ne contenaient pas assez de balises.</p>
<p>Du coup, je me suis résolu à écrire des patches pour ajouter ce qui était nécessaire, et en profiter pour faire quelques corrections de <em>bugs</em> et des petites améliorations. Ce fut par exemple le cas des méta-informations des articles telles que « Posté par, modéré par » qui étaient toutes présentées en une seule phrase. Elles ont bénéficié d'un encadrement <code>span</code> pour faciliter leur mise en page.</p>
<p>Pour faire cela, il a bien sûr fallu récupérer le <a href="//linuxfr.org/code_source_du_site">code source du site</a>, mettre en place (et à niveau) le <em>framework</em> Ruby associé, corriger quelques gems qui ne voulaient pas compiler correctement, démarrer le site en local avec une adresse visible du réseau local (donc autre que 127.0.0.x) et remplir ce site avec un contenu minimum pour pouvoir travailler en situation réelle. En parallèle, j'ai utilisé un script Greasemonkey maintenu en parallèle pour appliquer en temps réel les modifications portées à la branche de développement sur les pages servies par le site réel, et pouvoir avoir un rendu en grandeur nature.</p>
<p>Évidemment, toute la difficulté a consisté à faire en sorte de n'introduire aucun effet de bord, et surtout aucune régression avec les autres CSS, en particulier la CSS par défaut ! Globalement, cela s'est passé sans trop de heurts, mais il faut tout de même faire attention à la manière dont les éléments sont ciblés. Par exemple, il est fréquent d'utiliser un lien de parenté direct avec « > » dans une CSS, pour éviter d'inclure toute la descendance si l'élément ciblé n'est pas doté d'un identifiant ou d'une classe spécifique. Or, le simple fait d'encadrer les différentes sections dans des <code>div</code> distinctes peut briser ce lien de parenté…</p>
<p>L'une des sections les plus problématiques était paradoxalement celle des <a href="//linuxfr.org/statistiques">statistiques</a>, qui contient beaucoup de sous-sections. Certaines tables émulent des barres de progression et il était délicat de remplacer tous les styles <em>inline</em>. D'autres mettent en place des blocs dont le nombre de cellules par ligne n'était pas constant (à cause de <em>rowspans</em>) et le nombre de lignes par bloc non plus, ce qui a fini par donner lieu à l'usage de sélecteurs tels que <code>tr > td:not([rowspan]):first-child > div</code>. Le fait de ne PLUS pouvoir cibler ces blocs au delà d'une certaine limite a aussi été une motivation pour y ajouter des repères particuliers, comme des classes cycliques telles que "odd"/"even" que l'on retrouve dans d'autres sections.</p>
<p>Il y a donc un certain nombre de petites options qui sont invisibles <em>a priori</em>. Par exemple, il y a désormais un nom de classe sur le bloc entier d'un commentaire pour lequel on a voté « pertinent » ou « inutile » et qui peut d'ores et déjà être utilisé par toute autre feuille de style. Je m'en sers personnellement pour afficher les flèches 🡩 et 🡫 associées à ces votes. D'ailleurs, même s'il s'agit de simples caractères UTF-8, il est apparu que c'était plus subtil que prévu : les choisir trop fines ou trop épaisses changent assez notablement la perception du rendu.</p>
<p>J'ai essayé de suivre à peu près les règles de développement du noyau Linux dans la composition de ces patchs, en produisant des <em>commits</em> de petite taille et surtout regroupés par thème, pour les rendre faciles à parcourir et indépendants entre eux (pour pouvoir éventuellement rejetés au cas par cas) même si la CSS elle-même a besoin de chacun d'eux et est livrée dans le dernier <em>commit</em>.</p>
<p>Une dernière motivation à ces <em>patches</em> a été, enfin, d'essayer de se débarrasser des styles <em>inline</em> dans le corps des balises (l'attribut style="…") pour éviter d'avoir à recourir à !important et laisser le dernier mot aux CSS.</p>
<h3 id="fontes-et-images">Fontes et images</h3>
<p>La feuille utilise globalement un Helvetica générique (résolu en « Nimbus Sans L » sur Fedora 25) mais aussi, plus particulièrement, la jolie fonte Linux Libertine, déclinée ici en « Linux Libertine O », pour le grand titre de l'article mis en phare sur la page d'accueil.</p>
<p>Elle utilise aussi deux Google Fonts : Dhurjati et Raleway. La première sert uniquement au logo en tête de page, à gauche, la seconde est la fonte arrondie qui sert au titre des articles. Si c'est un problème, elles sont importées en une fois à la ligne 24 de la feuille de style et la clause peut être modifiée, notamment pour faire référence à des fontes hébergées sur le site.</p>
<p>Côté images, je me suis rendu compte que certains articles ici publient des images « pleine page » (corps de publications papier) ou en haute résolution, ce qui m'a permis de penser à fixer une taille maximum 100%. Et les récentes failles Meltdown et Spectre ont aussi mis en évidence le fait que les images vectorielles SVG n'ont pas de taille implicite si elles ne la précisent pas elles-mêmes, ce qui a pour effet de provoquer des affichages démesurés, en pleine page, du moindre petit symbole. Les images dont le nom de fichier se termine en *.svg voient donc leur largeur fixée arbitrairement au tiers de la largeur de la boîte de l'article.</p>
<p>Une légère ombre a également été ajoutée aux bannières sous l'article principal en page d'accueil. Toutefois, là encore, il y a des exceptions. La bannière de soutien à l'April, par exemple, est dessinée avec un effet de drapé et est doté de sa propre ombre. Du coup, on ajoute une dispense basée sur le nom de son fichier et on en profite pour prévoir une classe « shadowed » pour désactiver l'ombre au cas par cas.</p>
<h3 id="tribune-libre">Tribune libre</h3>
<p>Il y a une petite surprise sur la page de la Tribune. :) Je vous laisse voir laquelle, mais cette particularité fera probablement l'objet d'un prochain <em>patch</em> qui la retirera de la CSS et qui en fera une fonctionnalité disponible plus globalement.</p>
<h3 id="tags">Tags</h3>
<p>Pour finir, j'ai fait une petite refonte de l'apparence des sélecteurs de <em>tags</em> en tête des articles pour leur donner l'apparence d'un <em>slide button</em>. Il se trouve que ces boutons sont réalisés en CSS pure sans graphique bitmap ou SVG, pas même <em>inline</em>. Même si ceux-là sont rendus par mon propre code, on trouve beaucoup d'exemples en ligne pour en réaliser les mêmes. Seulement, il se trouve que le bouton lui-même et son habillage sont en fait une décoration d'un couple <code>form</code> + <code>button</code> :). Du coup, il faut bien cliquer sur la petite bille à l'intérieur pour que cela fonctionne.</p>
<p>C'était rigolo pour le principe, mais on refera quelque chose de plus utilisable si c'est gênant sur le long terme.</p>
<p>Voila, voila. J'espère qu'elle vous plaira, même si elle ne sera probablement pas consensuelle.<br>
Merci d'avance à tous pour vos avis et vos retours.</p><div><a href="https://linuxfr.org/users/obsidian/journaux/une-css-froide-pour-l-hiver-steelblue.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/113586/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/obsidian/journaux/une-css-froide-pour-l-hiver-steelblue#comments">ouvrir dans le navigateur</a>
</p>
Obsidianhttps://linuxfr.org/nodes/113586/comments.atomtag:linuxfr.org,2005:Diary/365892016-05-19T16:33:55+02:002016-05-19T16:33:55+02:00Boussole, une interface de compilation pour libsass-pythonLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Une petite entrée de journal pour les quelques intégrateurs web qui passeraient par ici.</p>
<p>Longtemps utilisateur de <a href="http://compass-style.org/">Compass</a>, j'ai vu la sortie et la maturité de <a href="https://github.com/sass/libsass">libsass</a> et <a href="https://github.com/dahlia/libsass-python">libsass-python</a> comme une possibilité de faire une interface de compilation <a href="http://sass-lang.com/">SASS</a> dans un objectif "Full stack Python".</p>
<p>Donc j'ai créé Boussole qui est une interface de compilation de projets SASS à la manière de Compass, c'est à dire fonctionnant sur une configuration de projet avec une commande pour le compiler et une commande "watch" pour re-compiler en continu lors de changements dans un projet.</p>
<p>Contrairement à Compass, il n'embarque aucun framework SASS, ni mixins spécifiques. Par contre reposant sur libsass, Boussole est plus réactif et rapide à compiler que mon Compass 1.0.1.</p>
<ul>
<li>La documentation: <a href="http://boussole.readthedocs.io">http://boussole.readthedocs.io</a>
</li>
<li>Le dépôt du projet: <a href="https://github.com/sveetch/boussole">https://github.com/sveetch/boussole</a>
</li>
</ul><div><a href="https://linuxfr.org/users/sveetch/journaux/boussole-une-interface-de-compilation-pour-libsass-python.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/109024/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/sveetch/journaux/boussole-une-interface-de-compilation-pour-libsass-python#comments">ouvrir dans le navigateur</a>
</p>
David Thenonhttps://linuxfr.org/nodes/109024/comments.atomtag:linuxfr.org,2005:Post/315412012-07-14T15:11:16+02:002012-07-14T15:11:16+02:00Comment utilisé sass pour linuxfr ?<p>Cher forum,</p>
<p>J'aimerais corriger des bugs sur les CSS de <a href="http://linuxfr.org/">LinuxFr.org</a>. Jusqu'à présent, j'utilisais uniquement le debugger intégré dans Firefox ou Firebug, malheureusement, ça montre vite ses limites pour être sûr que mes patchs n'introduisent pas de régression. Du coup je voudrais modifier directement les CSS qui sont dans le dépôt Git, cependant, elles sont écrites en SCSS et il faut les compiler pour fournir du CSS (ce qui me permettrait de les tester dans Firefox). Le problème est que j'ai une erreur à la compilation :</p>
<pre>
<code class="bash"><span class="nv">$ </span>sass RonRonnement.css.scss:rr.css
Syntax error: File to import not found or unreadable: common/ac.
Load path: /home/xavier/projects/linuxfr.org/app/assets/stylesheets
on line 5 of RonRonnement.css.scss
Use --trace <span class="k">for </span>backtrace.
</code>
</pre>
<p>Il n'y a effectivement pas de fichier appelé common/ac ou common/ac.scss mais je ne vois pas quel fichier il faut compiler pour l'avoir.</p><div><a href="https://linuxfr.org/forums/programmationweb/posts/comment-utilise-sass-pour-linuxfr.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/94834/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/comment-utilise-sass-pour-linuxfr#comments">ouvrir dans le navigateur</a>
</p>
claudexhttps://linuxfr.org/nodes/94834/comments.atom