Röcssti-news

Mardi 12 Septembre 2017
(Merrrrrroooooow)

Version 4 de Röcssti !

Petit à petit, Röcssti a évolué depuis sa version 3, depuis un peu plus d’un an. Je n’ai pas détaillé chaque ajout ou modification au fur et à mesure par manque de temps, les habitués auront pu suivre cela via Github.

Version 4 : 100%

Voici la liste complète des ajouts et modifications amenés avec la version 4 :

Ajouts

  • Ajout de l’information du breakpoint courant en pseudo-élément sur body::before, ce qui permet de récupérer cette information depuis JavaScript ;
  • Ajout de nombreux helpers atomiques (voir plus bas sur ce sujet) ;
  • Ajout de reset plus avancés pour les éléments button, input, etc.  ;
  • Ajout de la classe .nonvisible { visibility: hidden ; }, très utile pour les applications ;
  • Ajout de nombreuses variables de couleurs, pour .button, body, etc. ;
  • Ajout de variables pour utiliser (ou pas) les classes clear pour les flottants ;
  • Ajout de la classe .inline-row { display: inline-table ; }, également très utile pour certains positionnements ;
  • Modifications sur le Röcssti-Builder, qui permet d’obtenir les mêmes possibilités que la version Sass.

Une touche d’atomique

Fondamentalement, Röcssti est compatible avec toutes sortes d’approches CSS (et ne cache même pas qu’il se les approprie à sa façon). Néanmoins, je constate à l’usure que l’approche atomique apporte de sérieux bénéfices et répond même à des contraintes de production (voir Des tendances intéressantes en « atomique à la main »).

C’est pour cela que de nombreux helpers atomiques font leur entrée. Ils sont préfixés par leur breakpoint, quelques exemples parmi d’autres :

  • .onmobile-aligncenter centrera donc le texte à partir du breakpoint mobile ;
  • .ontablet-pl0 mettra donc le padding-left à 0 à partir du breakpoint tablettes, etc.

Certains de ces helpers sont générables à la volée.

Bugfixes, améliorations, suppressions, en vrac

  • Les button, input, etc. qui ont l’attribut disabled n’auront plus le curseur de lien (qui invite à cliquer dessus), normal, car ils sont inactifs :) ;
  • Le système pour activer la césure a été amélioré (basé sur l’idée utilisée par Knacss) ;
  • Ajout de style par défaut pour [hidden] ;
  • Suppressions de styles par défaut pour .button ;
  • Amélioration de la classe reset4print ;
  • Suppression de la bordure par défaut de l’élément dialog ;
  • Mise à jour de la fonction str-replace (toujours écrite par Hugo Giraudel) de la version Sass ;
  • Mise à jour de certaines URLs de référence ;
  • Mise à jour des commentaires dans la version Sass ;
  • Correction de nombreuses typos.

Et histoire de se faire plaisir, le site de Röcssti a désormais un Service Worker et fonctionne plus ou moins comme une PWA. 4 sites ont été ajoutés dans la galerie.

Pour l’avenir

Röcssti est et reste un micro-framework voulu comme très léger, la CSS de Röcssti avec un build standard reste très légère, moins de 3ko gzippée et minifiée. Cette philosophie n’est pas près de changer !

La documentation va être mise à jour pour refléter ces changements. D’autres corrections et ajouts suivront. Si vous avez des idées ou des suggestions, faites-les via Github, ce sera avec plaisir.

Jeudi 2 Juin 2016
(Bataille des trains aquatiques)

Version 3 de Röcssti !

Elle n’était pas prévue pour si tôt, mais allez savoir pourquoi, un léger retard de cinq heures dans un aéroport a libéré du temps !

Voici la liste des ajouts :

  • Ajout de nouvelles variables de couleurs pour le body (couleur de fond et couleur de texte) ;
  • Ajout de la possibilité de choisir les unités pour la typographie (em, rem ou rem avec un fallback en em) ;
  • Ajout d’un breakpoint pour les tout petits écrans ;
  • Ajout de la possibilité d’activer ou non le reset de 62.5% sur le tag html (qui simplifie les calculs pour les rem, 1.4rem sont équivalents à 14px) ;
  • Plus diverses corrections/améliorations sur les commentaires, fixes sur certaines variables Sass, etc.

La première bonne nouvelle, c’est que cette version majeure ne casse pas la rétro-compatibilité avec vos CSS précédemment créées avec Röcssti (sauf sur les versions avec pré-processeurs, mais il suffit d’adapter les deux premiers fichiers pour que tout roule sans souci).

La seconde bonne nouvelle, c’est que le Röcssti-Builder propose également toutes ces fonctionnalités, dans les deux langues (PHP devient un pré-processeur… de CSS).

Voilà, je remercie plusieurs personnes pour leurs suggestions et discussions sur Twitter, et je rends l’antenne, à vous Cognacq-Jay.

Dimanche 6 Mars 2016
(Licenciement de Voldemort de Pôle Emploi)

Ajout de tâches Gulp, NPM et correctifs

Si vous suivez l’activité de Röcssti sur Github, vous avez pu voir bon nombre de changements passer depuis quelques jours.

  • Röcssti est désormais disponible via NPM : Röcssti sur NPMjs.com ;
  • Des tâches Gulp sont proposées pour minifier les CSS et complier les versions Sass et LESS ;
  • L’arborescence du dépôt Github a été repensée en ce sens (src et dist) ;
  • Et deux correctifs mineurs ont été ajoutés (ajout de la classe .no-scroll et amélioration du fix typographique pour certains éléments de formulaire).

Jeudi 31 Décembre 2015
(Victoire des Thermopyles Duracell)

Passage au https et mises à jour mineures

Le principal changement pour ce site est un passage complet au https, notamment grâce à la superbe initiative Let’s Encrypt qui propose un système pour avoir des certificats SSL gratuits, et aussi grâce à l’expertise de mon hébergeur Infomaniak (partenaire de l’initiative) qui a déployé très récemment cela pour ses hébergements, le tout d’une manière très pratique à déployer pour l’utilisateur, moi en l’occurrence.

Ce dernier ajout permet à ce site d’obtenir une jolie note de l’utilitaire Dareboost, qui teste la qualité des sites internet.

Deux toutes petites mises à jour ont été également faites sur Röcssti : un petit fix pour la typographie des boutons ainsi que la suppression du dernier id restant dans la CSS (sur toutes les versions).

Et je vous souhaite une bonne année 2016 au passage !

Dimanche 15 Novembre 2015
(Paris, je t’aime)

Röcssti-Builder et licence MIT

Un nombre conséquent de mises à jour ont été effectuées ce week-end. La plus importante est un nouvel outil sobrement nommé le Röcssti-Builder. Il vous permettra de gagner du temps en pré-processant votre CSS basée sur Röcssti.

Grosso modo, vous spécifiez les tailles de polices pour certaines balises comme les h1, si vous avez besoin de l’option RTL, etc. et le Röcssti-Builder va vous construire une version CSS où tous ces paramètres seront déjà mis en place.

Et parce qu’on est toujours trop sérieux (dans notre travail), le Röcssti-Builder ajoutera une Röcssti-quote aléatoirement et gratuitement, juste pour le plaisir de sourire.

Deuxième modification importante, Röcssti est maintenant distribué sous licence MIT : vous êtes libres de le partager et de l’adapter comme bon vous semble, tant que vous mentionnez crédit de son utilisation et que la licence donnée en lien ci-dessus est mentionnée (et ça peut toujours faire plaisir à l’auteur de le savoir).

Côté bugs, un petit oubli pour le RTL a été fixé, et de discrètes corrections d’indentation et de typographie ont été faites, principalement dans les versions anglophones.

Jeudi 20 Août 2015
(Passage à l’année du cochon truffier dans le calendrier Papou)

Version Sass mobile-first anglophone

La version mobile-first anglophone de Röcssti est désormais disponible, autant sur ce site que sur Github.

Les francophones pourront (un peu) se consoler avec des traductions manquantes sur les versions Sass, qui viennent d’être corrigées.

Mardi 11 Août 2015
(commémoration des vacances)

L’abbr et Firefox 40

Aujourd’hui est sorti Firefox 40. Si vous utilisez l’élément abbr comme je peux le faire ici quand je parle de CSS, Röcssti inclut une mise à jour qui ne sera pas mineure pour vous.

Firefox stylait par défaut les abbr avec une bordure basse de 1 pixel en pointillé (ce que Röcssti fait aussi via border-bottom: dotted 1px; afin d’harmoniser le rendu sur les différents navigateurs). Toutefois, la version 40 de Firefox style désormais par défaut cet élément avec la propriété text-decoration: dotted underline. Autrement dit, si vous utilisez cette balise, vous pouvez avoir deux lignes de pointillés particulièrement disgracieuses.

Comme le rendu de text-decoration: dotted underline n’est pas extraordinaire au lieu de border-bottom: dotted 1px;, Röcssti prend le parti de garder border-bottom: dotted 1px; pour les abbr et de supprimer le stylage par défaut de Firefox via text-decoration: none.

Si vous suivez les mises à jour de Röcssti sur Github, vous aurez constaté que la mise à jour a été effectuée il y a presque deux semaines, afin de permettre de réagir rapidement si le problème vous concernait.

Au passage, une valeur de propriété erronée a été également corrigée dans la section print (mise à jour mineure).

Jeudi 25 Juin 2015
(Bataille des taxis de Pelennor)

Organisation, des indicateurs qui ne trompent pas

Peut-être connaissez-vous l’outil CSS Stats, qui analyse vos feuilles de styles et qui donne des tendances et des informations dessus : les déclarations uniques Vs le total, le specificity graph, etc. ?

Comme toute statistique, bien entendu il faut être capable de les interpréter et/ou de les comprendre, néanmoins c’est toujours intéressant de lever la tête du guidon pour voir où l’on va.

En fait, l’organisation de Röcssti me permet de voir un indicateur lui aussi intéressant : dans quelles mesures un projet est cohérent ou nécessite de la spécificité. Si je reprends l’organisation de Röcssti :


* 05 -- layout et modules
* 06 -- structure (page / skip links / header / main content / footer)
… 
* 08 -- dans le contenu
* 10 -- homo tablettes - breakpoint majeur
…
* 12 -- mobile - breakpoint majeur

Attardons-nous sur cette logique :

  • d’abord les modules qui peuvent être réutilisés partout sur le site : boxes, etc. ;
  • ensuite les gabarits globaux (qui vont sculpter ces modules, ce qui vous invite à les définir de manière aussi indépendante que possible) ;
  • après les éléments spécifiques (propres à certaines pages, par exemple la page d’accueil est souvent un cas particulier, le site de Röcssti ne fait même pas exception) ;
  • Enfin les tablettes et autres mobiles, etc.

Grosso modo, cela nous donne : modules, structure globale, spécifique. Ce que – étrange coïncidence – vous retrouvez dans les parties des breakpoints majeurs, exemple :

@media (max-width: 40em) { /* equiv 640px */
      
  /**
   * layout/modules
   */
  …
  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  …    
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */
  …
}

Toujours dans un but de limiter la création de styles inutiles. Et bien, en observant la quantité de styles dans chaque rubrique, je peux donner des tendances qui peuvent servir le projet.

  • Énormément de styles spécifiques aux pages ? Il faudrait peut-être voir pour modulariser certains éléments (si c’est possible).
  • Très peu de structure globale ? Le site se construit aisément avec les éléments de la partie layout. Ou l’intégrateur a mal rangé (ça c’est un autre débat).
  • Une partie modules est bien pourvue et la partie propre aux contenus spécifiques des pages vide ? On est à priori dans un très bon cas de parfaite utilisation de styles globaux et d’harmonie visuelle globale.
  • Etc.

Bien entendu, ce n’est ni l’alpha ni l’omega, le projet peut parfois avoir besoin de styles spécifiques, et ça n’est pas un problème. Néanmoins, ces tendances peuvent permettre de tirer la sonnette d’alarme : trop de styles spécifiques là où des styles globaux harmoniseraient plus le graphisme du site (un des préceptes en filigrane d’OOCSS), etc.

Bref, soignez le rangement de vos feuilles de styles, c’est vraiment capital. Cela vous permettra même de tiquer si quelque chose d’inhabituel se passe !

Lundi 26 Avril 2015
(Passage à l’heure d’été sur Westeros)

Rythme vertical, mon amour…

Röcssti intègre désormais 3 différentes variantes de rythme vertical sur les versions pré-processeurs.

Ces 3 options sont directement inspirées de l’outil Vertical Rhythm Tool, créé par Pascal que je remercie beaucoup pour ce fantastique outil.

Au passage, toutes les versions passent à un rythme vertical basé sur margin-bottom, plus simple et plus pratique. Les versions LESS et Sass peuvent choisir leur variante de rythme vertical via la variable vertical-rythm, et tous les calculs se feront automatiquement sans aucun effort.

La partie variables de la version LESS a été améliorée au passage point de vue présentation.

Mardi 14 Avril 2015
(Mort du chat de Schrödinger… ou pas)

Changements sur la version LESS + alignements

Grosse mise à jour pour la version LESS de Röcssti (anglaise et française) : la structure est désormais semblable à la version Sass, c’est-à-dire en multiples fichiers séparés (suggestion faite par Étienne).

Pour toutes les versions, les alignements utilisés principalement pour le table-layout (.aligntop, .alignmiddle, .alignbottom) ont été déplacés pour être mis dans la section « layout », juste en-dessous du table-layout, et ce afin de permettre une surchage plus simple (suggestion faite par Samuel et solution proposée par Thomas).

Un commentaire inutile a été supprimé des versions Sass.

Du côté de ce site, une légère modification a été faite dans la guideline afin de mieux expliquer la mise en forme d’un formulaire, et les liens directs vers les onglets (exemple : vers onglet typographie de la guideline) souffraient d’un léger bug (l’onglet concerné ne s’allumait pas), désormais corrigé (problèmes résolus grâce à Samuel).

Vendredi 3 Avril 2015
(Bazingaaaaa)

Version anglophone du site de Röcssti

Hé voila, ce site parle désormais français et anglais.

Un grand merci à John Elbing pour son aide sur la traduction, et à Alain Riad pour l’adaptation du graphisme.

Mercredi 23 Mars 2015
(Fin du monde dans le calendrier de Paco Rabanne)

Ajout pour les table et autres listes

Pas de grande révolution dans ces deux mises à jour, simplement l’ajout de la classe unstyled spécialement dédiée à proposer des listes ul/ol non stylées par défaut.

Côté « table-layout », une possibilité a été ajoutée via la classe .line (qui effectue un display: table-row;) pour créer une ligne dans un .row (exactement comme la balise tr).

Pas d’affolement quand à l’utilisation de .row et .col : cela ne change rien, d’ailleurs les exemples donnés dans la guideline sont toujours parfaitement valables (et je les utilise moi-même).

Grosso modo, si un élément avec .row n’a pas pour descendant direct un élément avec .line mais des .col, le navigateur le créera automatiquement : on appelle cela les éléments anonymes. C’est le même cas si un élément avec .line n’a pas un .row pour parent, il est créé de manière anonyme.

Pourquoi l’ajouter alors ? Très simplement car cela permet dans certains cas de bénéficier d’autres propriétés comme border-collapse, ce qui peut simplifier grandement certaines constructions CSS (voir cet exemple de rendu facilité).

Très certainement, vous utilisiez les éléments anonymes sans le savoir, comme M. Jourdain faisait de la prose sans le savoir. Pour en savoir plus, vous pouvez lire l’excellent article de Raphael Goetter sur Openweb : Le modèle tabulaire en CSS (les éléments anonymes y sont très bien expliqués).

Mercredi 18 Février 2015
(Conjonction astrale Lune/Saturne/Mère Denis)

Nettoyages d’hiver (et variés)

Après un calme relatif, de nombreuses petites modifications de structure et un certain allègement de Röcssti sont à l’ordre du jour.

  • La place des modules dans la section Layout/Modules est maintenant clairement indiquée par un commentaire de structure…
  • … et ce changement a été repercuté pour les sections consacrées aux breakpoints.
  • De nombreux exemples de code ont été mis en commentaires.
  • Un micro-bug a été corrigé dans la version mobile-first.

Mercredi 10 Décembre 2014
(Jour du non-anniversaire du Chapelier Toqué)

Des nouvelles en vrac

  • Le site de Röcssti se prépare aussi vite que possible à une version anglophone.
  • Côté code de Röcssti, la césure est toujours disponible mais a été désactivée par défaut.
  • Et ce fantabuleux site implémente désormais CSP (pour votre sécurité et aussi pour ma curiosité), grâce (entre autres) à Damien Jubeau de Dareboost, que je salue au passage (selon la formule consacrée).

Mardi 4 Novembre 2014
(Le jour d’après hier)

Premier tir de modifications

Plusieurs suggestions faites sur Github ont été prises en compte, à savoir :

  • le reset HTML5 a été affiné pour audio, canvas, progress et video (affichés en inline-block) ;
  • le box-sizing qui était seulement suggéré est mis par défaut ;
  • une typo inutile a été supprimée.

Un grand merci pour ces remarques. N’hésitez pas si vous en avez d’autres.

Lundi 3 Novembre 2014
(Yodlehoooo)

Lancement du nouveau site de Röcssti

Il est beau, clinquant, sûrement pas parfait, mais il est là. Maintenant, je vais pouvoir vous dire de « lire le manuel » en parlant de Röcssti.

Un grand merci à Fabien Sauter pour ce design rafraichissant.

Mardi 23 septembre 2014
(Passage à l’année du rottweiler dans le calendrier chinois)

Media-queries en em

Je le faisais depuis longtemps, mais j’avais lamentablement oublié de le suggérer dans les versions CSS, les media-queries sont désormais en em. Révisez votre division par 16, cela sera très utile.

Mercredi 10 septembre 2014
(du mois de Thermidor)

Suggestion du box-sizing: border-box

Comme indiqué dans le commentaire, si vous vous foutez d’IE7 et inférieurs (et je ne pourrais pas vous en vouloir de le faire, bien au contraire), vous pouvez activer le box-sizing en border-box. Ce modèle de boite peut grandement simplifier la création de sites en responsive.

Le modèle de boite standard donne pour un élément : largeur réelle = width + padding + border. Autrement dit, il est impossible de mettre deux blocs de 50% de largeur côtes à côtes avec un padding, sans quoi ils feront plus de 50% de largeur réelle et ne pourront plus tenir à côté l’un de l’autre.

Avec le box-sizing: border-box, peu importe le padding que vous mettrez, la largeur sera bien de 50%. Inutile de vous dire que cela simplifie grandement la vie en responsive, même si le modèle de boite standard n’est pas impossible à gérer non plus.

À vous de savoir si vous pouvez l’utiliser… ou non.

Dimanche 7 septembre 2014
(07/09/2014 = 7 + 9 - 2 = 14, c’est un complot)

Ajout du tag svg

Les svg en ligne peuvent désormais dormir tranquilles, ils s’adapteront automatiquement à leur conteneur sans déborder.

Ici une faille-spatio-temporelle, nom de Zeus.

Mercredi 16 octobre 2012
(le Premier Âge en Terre du Milieu, an 42)

Naissance de Röcssti

Bah oui, fallait bien commencer à un moment.