haut

Versions

Le symbol alerte indique une évolution qui provoque un breaking-change.

Version 7

7.6.27 (20-06-25)

Composants

  • Nouveauté : Couverture (cover)
  • Évolution : Marges → ajout d’un lot de marges fluctuantes pour le point de rupture lg-max.
  • Évolution : Badge → ajout d’une bordure sur les badges pour qu’ils soient visibles sur fond blanc.
  • Évolution : Teaser → les badges sont maintenant visibles sur les tous teasers.
  • Évolution accessibilité : Tout → suppression du CSS qui empêchait le suivi visuel des éléments interractifs mis en focus par le clavier.
  • Évolution accessibilité : Tout → la palette de gris et de jaunes change pour améliorer les contrastes.
  • Évolution accessibilité : Boutons → le texte sur les boutons d’abonnement passe en anthracite.
  • Évolution accessibilité : Badge → le texte sur les badges d’abonnement passe en anthracite.
  • Évolution accessibilité : Titres premium → le texte jaune passe en anthracite.
  • Évolution graphique : → la variable `--font-size-xl` passe de 24 à 26px. Cela impacte les listes ordonnées, les grands boutons sociaux et les titres h2 en mobile.
  • Évolution : Image → une couleur de fond est appliquée au conteneur su-main-picture, derrière les images, en attendant leur chargement .
  • Fix : Titres → un titre avec la classe su-with-link dans un su-article ne subit plus la bordure basse rouge des liens éditoriaux.
  • Fix : Focus → les métas sur le focus-image ont de nouveau la bonne couleur.
  • Fix : Carrousel → correction d’un problème pour atteindre les bords en touch lors de l’utilisation de l’agrandissement avec les classes su-stretch-to-bloc-.

Documentation

  • Évolution : Logothèque → ajout des logo API News, Éditions Ouest-France en format carré et Qobuz, et mise à jour des logos Terre de jardins et 20 minutes.
  • Évolution : Icônes → ajout des icônes « Date » et « Déconnecter » à la fonte SipaUI et les icônes « Maillot », « Blé », « Burger loupe », « Cible », « Commerce », « Poisson » et « Restaurant » aux icônes du groupe.
  • Évolution : Icônes → adaptation de toutes les icônes aux nouvelles couleurs pour l’accessibilité.
  • Évolution : Icônes → les URL des icônes du groupe ne pointent plus vers l’API Média, mais vers le CDN afin de permettre leur mise-à-jour si nécessaire (les anciennes URL restent fonctionnelles).
  • Évolution : Icônes → ajout d’URL vers le CDN pour les icônes de la fonte SipaUI en SVG.
  • Évolution : Cocardes → mise à jour de la cocarde 20 minutes.
  • Évolution : Versions → ajout des dates de version.
  • Évolution : Accueil → ajout de rappels basiques pour l’installation.
  • Évolution : Divers → quelques améliorations de design.
  • Évolution : Divers → ajout de boutons sur l’interface des démos pour permettre l’affichage de la version négative (sur fond sombre) pour les composants compatibles. Cet ajout s’accompagne de la suppression des anciens blocs de démo spécifiques qui permettaient l’affichage de ce mode. Cette intégration se fait en déploiement progressif.
    Composants traités :
    • Carte,
    • Couverture,
    • Focus,
    • Carte personne,
    • Podcast,
    • Article ordonné,
    • Teaser,
    • Chronologie,
    • Boutons.
7.5.34 (22-05-25)

Composants

  • Nouveauté : Texte replié (collapsed text)
  • Évolution : Classes d’aide → ajout d’une classe pour élargir un bloc en pleine page en mobile.
  • Évolution : Classes d’aide → ajout d’une classe pour ajouter un padding de 30px au lieu des 20 standard.
  • Évolution : Carrousel → ajout de classe pour gérer l’alignement vertical du contenu.
  • Évolution : Carrousel → ajout d’une largeur XXL 300px.
  • Évolution : Carrousel → gestion de l’étirement pour atteindre le bord d’un bloc parent avec padding.
  • Évolution : Titres premium → mise à jour du picto cadenas.
  • Évolution : Titres → ajout de la classe su-not-title pour avoir des titres non stylés.
  • Évolution : Boutons sociaux → ajout de Pinterest.
  • Évolution : Boutons de navigation → ajout d’une classe pour avoir des boutons de navigation internes clairs même avec la classe `su-negative` au-dessus.
  • Évolution : Boutons onglets → ajout d’une version plus haute des boutons (44px).
  • Évolution : Liste de liens → les liens prennent maintenant toute la largeur de la liste.
  • Fix : Teaser → suppression d’un espace inutile sous les photos, visible sur un teaser sponsorisé.
  • Fix : Liens → su-link-light devient plus fort pour surcharger les liens spécifiques (auteur…).
  • Fix : Divers → correction d’un bug sur les appareils Samsung qui ne comprennent pas@media (hover: none).
  • Fix : Titres → correction d’un retour à la ligne après l’icône si le titre est trop long.
  • Fix : Titres → retour de la possibilité de surcharger un <hn> par un su-hn.
  • Fix : Durée → correction d’un mauvais positionnement sur un focus fullpage. La position de ce composant dans une liste d’article a changé. L’ancienne position reste possible pour la rétrocompatibilité, mais elle est obsolète.
  • Fix : Titres → les titres non éditoriaux en desktop n’avaient plus la bonne taille.
  • Fix : Vues → le composant ne passe plus en blanc dans une carte qui a un su-negatif au-dessus.
  • Fix : Liens → un lien avec une classe su-not-link dans une zone en su-negative a bien la bonne couleur de texte.

Thèmes

  • Évolution : Thèmes Voiles & voiliers → changement de la couleur secondaire 2 (bleu) pour plus de lisibilité sur fond sombre.

Documentation

  • Évolution : Environnement → passage à Node 22.
  • Évolution : Icônes → ajout de l’icône du réseau social Pinterest à la fonte SipaUI, ainsi que l’icône de « Recharger / Réactualiser ».
  • Évolution : Icônes → possibilité de copier le code SVG d’une icône du groupe.
  • Évolution : Cocardes → mise à jour de la cocarde Voyage à l’Ouest.
  • Évolution : Cocardes → ajout de la cocarde NOVO.
  • Évolution : Couleurs → mise à jour de la couleur de Pinterest.
  • Évolution : Couleurs → mise à jour de la couleur secondaire 2 de Voiles & voiliers.
  • Évolution : Couleurs → ajout de la couleur « projecteur » pour mettre en avant du contenu.
  • Évolution : Couleurs → ajout de la couleur de NOVO.
  • Évolution : Logothèque → mise à jour du logo Boxemag.
  • Évolution : Logothèque → ajout du logo Les Albums de notre Histoire.
  • Évolution : Logothèque → mise à jour du logo Bretons en Cuisine.
  • Évolution : Logothèque → ajout des logos NOVO.
  • Évolution : Logothèque → ajout de lien vers la version API Media pour chaque logo du groupe.
  • Évolution : Icônes → ajout du code SVG de chaque icône du groupe (icônes hors de la fonte SipaUI) pour pouvoir le copier.
7.4.21 (10-03-25)

Composants

  • Nouveauté : Articles sponsorisés → refonte de l’apparence de ces articles. L’ancien système a été conservé pour la rétrocompatibilité, mais il est obsolète.
  • Évolution : Boutons radio → gestion de la version sur fond sombre.
  • Évolution : Case à cocher → gestion de la version sur fond sombre.
  • Évolution : Erreur → gestion de la version sur fond sombre.
  • Évolution : Titres premium → légère diminution de la taille du cadenas.
  • Évolution : Boutons sociaux → ajout de Whatsapp.
  • Évolution : Liste → gestion des <p> dans les <li> dans les articles.
  • Évolution : Switch → changement de valeur de gris pour l’état off.
  • Évolution : Liens → les liens trop longs (p. ex. lien http avec paramètres) ne sortent plus de leur parent.
  • Évolution : Messages → compatibilité avec les fonds sombres.
  • Évolution : Articles dans une liste → suppression de la documentation sur les filets thématiques su-thread devenus obsolètes.
  • Évolution : Cartes, focus, teasers → ajout d’exemples avec une barre de progression.
  • Évolution : Classes d’aides → ajout de classes pour gérer les césures.
  • Fix : Timeline → correction de la couleur du filet vertical en mode négatif.
  • Fix : Liens → un lien léger dans un article sur fond sombre se comporte comme attendu.
  • Fix : Tags → un tag avec su-contrast garde la bonne couleur de fond quand il a été visité.
  • Fix : html → retrait temporaire de la réservation d’espace nécessaire pour les navigateurs qui affichent une scrollbar afin d’éviter un bug sur certaines iframes.
  • Fix : Auteur → correction d’un bug de double soulignement dans certains cas.

Thèmes

  • Évolution : Thème Voiles et voiliers → refonte du thème au nouveau design.

Documentation

  • Évolution : Variables → les variables des coins arrondis sont maintenant des variables CSS.
  • Évolution : Couleurs → ajout de la couleur du réseau social Whatsapp.
  • Évolution : Couleurs → refonte de la palette.
    • Ajout de 2 gris supplémentaires à la gamme primitive.
    • Ajout de 2 teintes supplémentaires pour les couleurs de la gamme d’accroche (rouge, jaune et vert).
    • Ajout des couleurs thématiques « Animaux » et « Grand format ».
    • Les variables CSS `--vert` et `--rouge` deviennent `--vert-1` et `--rouge-1`. Les anciennes valeurs a été conservées pour la rétrocompatibilité, mais elles sont obsolètes.
    • Certaines couleurs secondaires de marques ou de thèmes changent.
  • Évolution : Variables → ajout de la variable de couleur du réseau social Whatsapp.
  • Évolution : Variables → modification des variables de couleurs (cf. ci-dessus).
  • Évolution : Icônes → ajout de l’icône du réseau social Whatsapp à la fonte SipaUI.
  • Évolution : Typographie → suppression de la police Montserrat.
7.3.14 (06-01-25)

Composants

  • Nouveauté : Champ de fichier.
  • Nouveauté : Bulle de notification.
  • Nouveauté : Localisation.
  • Nouveauté : Grille → ajout de variations de tailles à su-row-gap (su-row-gap-xs…).
  • Nouveauté : Carte → ajout d‘une version pour afficher des évènements (avec badge, date, localisation…).
  • Nouveauté : Classes d’aide → ajout d’une version 4 lignes dans les classes de troncature su-trucate-….
  • Évolution : html → réservation de l’espace nécessaire pour les navigateurs qui affichent une scrollbar classique afin d’éviter les changements de largeur de contenu quand on bloque le scroll.
  • Évolution : Chapeau → il est maintenant possible de mettre la classe su-article à coté de su-standfirst en plus d’au-dessus, pour lui donner une apparence de chapeau d’article.
  • Évolution : Accordéon → gestion de la version sur fond sombre.
  • Évolution : Sources → ajout des cocardes Équida, Fédération Française de Foot, Boxemag, Je suis papa, K-Sélection, posos et Sport en France.
  • Fix : Focus → le grand focus provoquait un clignotement au hover sur Chrome et Firefox.
  • Fix : Tire en direct → correction sur le hover d’un article en LA qui ne prennait pas tout l’article.

Documentation

  • Nouveauté : Démo – Formulaire → création d’une page de démonstration de formulaire simple dans « À propos »
  • Évolution : Démo LA → ajout des cocardes dans les sources.
  • Évolution : Icônes → ajout de l’icône « Flocon de neige » aux icônes du groupe.
  • Évolution : Logothèque → ajout des logos Équida, Fédération Française de Foot, Boxemag, Je suis papa, K-Sélection, posos et Sport en France.
7.2.25 (05-12-24)

Composants

  • Nouveauté : Canal.
  • Nouveauté : Lecteur audio.
  • Nouveauté : Podcast.
  • Nouveauté : Classes d’aide → ajout de déclinaisons « tablette » des classes de colonage.
  • Nouveauté : Classes d’aide → ajout d’une classe pour passer le texte en majuscule.
  • Évolution : Date → en liste d’articles, la date n’affiche plus d’icône.
  • Évolution : Sources → ajout des cocardes Android MT, Mag du Sénior, Mag Sport Auto, Vélo Presse Collection, Weelz.
  • Évolution : Articles dans une liste, Carte, Focus, Teaser → Les métadonnées sont plus ressérées.
  • Évolution : Focus → ajout de la possibilité de donner un chapeau au focus standard.
  • Évolution : Bouton de lecture → la durée affichée utilise maintenant la balise <time>.
  • Évolution : Liste d’article → le conteneur de l’image principale su-main-picture n’a plus de fond s’il contient une image, ce qui permet d’éviter d’éventuels glitchs visuels sur certains écrans.
  • Évolution : Tags → ajout de la possibilité de mettre une icône dans un tag.
  • Évolution : Boutons sociaux → ajout de Bluesky.
  • Évolution : Articles dans une liste → les séparateurs s’adaptent au su-negative.
  • Évolution : Métadonnées → Leur couleur passe en #D4D4D4 en su-negative.
  • Évolution : Source → ce composant s’adapte au su-negative.
  • Évolution : Liste d’articles ordonnés → en mode colonnage en desktop, la hauteur d’un article est au minimum de 2 lignes pour limiter les effets d’escalier.
  • Fix : Date → dans un article, comme tout texte éditorial la date nécessite la classe su-article sur un parent.
  • Fix : Teaser → correction de la cocarde qui pouvait être mal alignée.
  • Fix : Source → dans un article, comme tout texte éditorial la source nécessite la classe su-article sur un parent.
  • Fix : Source → une troncature avec su-truncate-x fonctionne comme attendu.
  • Fix : Carte → suppression de su-not-framed qui n’est plus supporté.

Documentation

  • Nouveauté : la couleur de fond de la zone de démo en su-negative ne vient plus polluer le code d’exemple
  • Évolution : Couleurs → ajout de la couleur du réseau social Bluesky.
  • Évolution : Variables → ajout de la variable du réseau social Bluesky.
  • Évolution : Icônes → ajout de l’icône du réseau social Bluesky à la fonte SipaUI.
  • Fix : Divers → correction de liens cassés.
7.1.16 (14-10-24)

Composants

  • Nouveauté : Progress-bar.
  • Évolution : Pagination → ajout d’une variante sommaire.
  • Évolution : Cartes → la marge sous le titre est maintenant conditionnée à la présence de contenu en-dessous.
  • Évolution : Sources → le catalogue des cocardes a été déplacé dans les ressources.
  • Évolution : Sources → ajout des cocardes Virgule Bleue, Kolok et Sportall.
  • Évolution : Classes d’aide → ajout d’une classe pour rendre le scroll doux lors de l’utilisation de liens internes.
  • Évolution : Boutons sociaux → ajout d’une version plus grande et de nouvelles marques : LinkedIn, Spotify, Deezer, Amazon Music, Apple Podcast, Youtube Music, Youtube.
  • Évolution : Image → une image principale en pleine largeur sur mobile ne garde plus ses coins arrondis.
  • Évolution : Titres → possibilité d’ajouter une image devant un titre.
  • Évolution : Drapeaux → ajout du drapeau de l’Union Européenne.
  • Évolution : Articles dans une liste, Carte, Focus, Teaser → la couleur du filet thématique (su-thread) est maintenant une variable CSS (propriété personnalisée).
  • Évolution : → Browserlist prend maintenant en compte les navigateurs de moins de 3 ans.
  • Fix : Label → suppression de la hauteur fixe du label qui empêchait les labels multi-lignes.

Documentation

  • Nouveauté : ajout d’une feuille de style basique pour rendre la documentation imprimable
  • Nouveauté : le catalogue des Cocardes est devenu une rubrique à part entière des Ressources et il est possible de les télécharger en SVG.
  • Évolution : Logothèque → ajout des logos Kolok et Sportall, mise à jour d’Intrasipa et suppression de Ouest-France groupe SIPA obsolète.
  • Évolution : Documentation → la navigation du menu secondaire scroll si besoin à l’ouverture d’un dossier situé en bas de colonne pour afficher son contenu.
  • Évolution : Documentation → la navigation du menu secondaire scroll si besoin pour afficher le composant quand on arrive d’une autre page.
7.0.54 (11-09-24)

Cette version est une grosse mise à jour incluant de nombreux breakings-change ! Même les chemins d’appels des CSS (si vous utilisez la méthode NPM) ont changé !

Si vous ne souhaitez pas prendre en charge cette mise à jour, vous pouvez rester sur la version précédente, mais celle-ci ne recevra plus de mise à jour.

Composants

  • attention Évolution : CSS → utilisation des sélecteurs :is() et :where() pour alléger le code (non compatible avec les vieux navigateurs).
  • attention Évolution : CSS global → suppression de height: 100% sur le body.
  • attention Évolution : Carrousel, Onglets, Boutons-onglets, Tags → suppression des CSS des boutons et ajout de la dépendance aux nouveaux Boutons de navigation (les classes ont donc changé).
  • attention Évolution : Pop-ins → suppression de l’ancienne version basée sur <div>.
  • attention Évolution : Pop-ins → dépendance au composant Bouton de fermeture.
  • attention Évolution : Messages → dépendance au composant Bouton de fermeture.
  • attention Évolution : Focus, Teasers, Cartes → nettoyage de code obsolète, la classe su-media-container étant devenue obligatoire.
  • attention Évolution : Champ de recherche → suppression de la compatibilité avec l’ancienne méthode, sans input-group.
  • attention Évolution : Liste de liens → suppression de la classe su-no-ending-border, remplacée par la classe su-no-ending-separator déjà existante en v.6.
  • attention Évolution : Notifications → a été renommé en « Toasts » (dans la documentation mais aussi pour l’appel des CSS du composant pour le nom de la classe à utiliser).
  • attention Évolution : Toasts (ex Notifications) → le fonctionnel s’appuie maintenant sur l’attribut popover.
  • attention Fix : Carrousel → les éléments des carrousels « grille » gardent bien leur taille dépendante de la grille en format tablette.
  • attention Évolution : Sources → suppresion de la compatibilité avec l’attribut aria-label précédemment remplacé par aria-description.
  • attention Évolution : JS OS → suppresion de la détection des écran tactiles, @media (hover: none) étant bien supporté à présent.
  • attention Évolution : JS dialog → ajout de la détection de `popover` à `method`.
  • Nouveauté : Bouton de fermeture.
  • Nouveauté : Boutons de navigation.
  • Nouveauté : Bouton de lecture.
  • Nouveauté : Description.
  • Nouveauté : Carte de personne.
  • Nouveauté : Vues.
  • Nouveauté : Durée.
  • Nouveauté : Marges → ajout d’une grande marge de 100px.
  • Nouveauté : Images → ajout du ratio 4/3.
  • Nouveauté : Images → ajout de la gestion du format portrait.
  • Nouveauté : Images → ajout de la gestion des images qui ne peuvent être recadrées pour s’adapter aux ratios (p. ex. pour les images des articles chalutés).
  • Nouveauté : Boutons → ajout d’un nouveau type de bouton, le bouton neutre.
  • Nouveauté : Boutons → ajout d’un nouveau format de bouton, le bouton icône seule.
  • Nouveauté : Boutons → ajout de la possibilité d’utiliser une icône en <img>.
  • Nouveauté : Tags → ajout d’une version large.
  • Nouveauté : Cartes → prise en compte des cas où le fond de carte est le même que le fond de page.
  • Nouveauté : Focus → ajout du cas « focus pleine page ».
  • Nouveauté : Drapeau → ajout de 14 nouveaux drapeaux (Aruba, Athletes Individuels Neutres, Bermudes…).
  • Nouveauté : Ressources – Icônes → ajout des icônes Deezer, Spotify, « Discuter », Écouter », « Pause », « Lien externe », Amazon-music, Google-podcast, Apple-podcast, Tiktok, Youtube, « Livraison », « Avancer » et « Reculer ».
  • Évolution : Listes → les listes sont moins collées au contenu au-dessus.
  • Évolution : Texte standard articles → la taille passe de 16 à 18px pour le confort de lecture et une classe su-text-standard-editorial a été ajoutée pour offrir cette possibilité ailleurs que dans du texte d’article.
  • Évolution : Drapeau → Il n’est plus besoin de forcer la hauteur quand on veut changer sa taille.
  • Évolution : Voile → Le voile applique maintenant un flou sur l’arrière plan.
  • Évolution : Sources → modification de toutes les cocardes pour quelles soient compatibles avec un fond sombre.
  • Évolution : Sources → ajout de plusieurs cocardes : 20 Minutes, Web TV Culture, Web TV Tourisme, sain-et-naturel, pause-maison, prix-de-la-democratie…
  • Évolution : Auteur → gestion des fonds sombres et ajout d’un soulignement quand il porte un lien.
  • Évolution : Liens → gestion des fonds sombres pour les liens-boutons.
  • Évolution : Carrousel, Onglets, Boutons onglets, Tags → ces composants n’ont plus besoin du JS data-suos.
  • Évolution : Classes d’aide → ajout de 2 classes aux classes d’aide de colonnage pour fixer une largeur minimum.
  • Fix : Pagination → correction de la liste inaccessible en dernière page.
  • Fix : Titres → correction d’un comportement erratique au survol en desktop des titres avec lien quand ceux-ci font exactement la taille de leur parent.
  • Fix : Listes → `su-list` n’est plus nécessaire sur une liste imbriquée dans une autre.
  • Fix : Tous les composants → petites corrections et optimisations diverses.

Thèmes

  • Évolution : Thèmes Voiles & voiliers → correction d’un bug sur un titre avec lien en su-negative.

Documentation

  • attention Évolution : Ressources – Typographie → suppression du format woff des polices, il ne reste que le woff2 et le ttf.
  • attention Évolution : Documentation – Installation → modifications des chemins d’appel des CSS.
  • Nouveauté : Refonte complète de ce site en utilisant SipaUI
  • Nouveauté : JS → ajout de la documentation sur scrollclass.
  • Nouveauté : Installation → ajout de la documentation pour la création d’un thème perso (méthodologie succincte à ce jour).
  • Nouveauté : Icônes → ajout d’un catalogue des icônes du groupe avec leurs URL dans l’API Media.
  • Évolution : Ressources – Icônes → les icônes de la fonte SipaUI sont renommées en français.
  • Évolution : Partout → corrections et optimisations diverses.
  • Évolution : Logothèque → ajout des logos Foot amateur, Mag de la conso.
6.12.8 (06-06-24)

Composants

  • Nouveauté : Messages
  • Évolution : Sources → ajout de plusieurs cocardes : Amphisciences, « Bretons en Cuisine, Bretons, « Clazz radio, « Éditions Ouest-France…
  • Évolution : Classes d’aide → ajout de classes pour forcer l’interlignage.
  • Évolution : Texte standard → ajout de la classe `su-text-medium` pour appliquer une taille de 16px à du texte.
  • Fix : Cartes → les titres d’articles ne passent plus en blanc quand ils sont sous l’influence d’un parent en su-negative.
  • Fix : Badges → masquage du badge sur les teaser-big en mobile + gestion de la troncature avec le boutton plein écran.

Documentation

  • Évolution : Logothèque → ajout des logos Intrasipa, Sofiouest, 366, Diverto et Syllabs.
  • Évolution : Ressources – Icônes → ajout de la ligature « cœur » pour le cœur plein.
6.11.6 (22-03-24)

Composants

  • Nouveauté : Articles ordonnés
  • Évolution : Chapeau → les mises en formes grasses ou italiques sont à nouveau possibles.
  • Évolution : Sources → modification de la cocarde Océane.
  • Évolution : Sources → réduction de poids de certaines cocardes.
  • Évolution : Articles dans une liste → adaptation des articles sponsorisés aux cas particulier des timelines et des articles classés.

Documentation

  • Évolution : Logothèque → suppression du logo Skippair.
  • Évolution : Logothèque → ajout du logo Hit West.
  • Évolution : Logothèque → modification des logos Océane et Ouest-France Emploi.
  • Fix : Logothèque → corrections Mag des animaux, Mag du chat et Mag du chien.
6.10.14 (21-02-24)

Composants

  • Nouveauté : Badge
  • Évolution : Articles dans une liste → gestion des articles sponsorisés seuls, dans une liste dédiée ou sur une page dédiée.
  • Évolution : Teaser → gestion des articles sponsorisés seuls, dans une liste dédiée ou sur une page dédiée.
  • Évolution : Focus (Image) → prise en charge de titres premium (attention, ils ne sont pas compatible avec la troncature automatique !).
  • Évolution : Liste de liens → gestion des drapeaux SipaUI comme icône.
  • Évolution : JS Dialog → ajout de l’option timeout pour fermer un <dialog>.
  • Évolution : Notifications → prise en charge du l’option de timeout.
  • Évolution : Marges → ajout de nouvelles tailles de marges fluctuantes (0, xs, s, xl et xxl).
  • Fix : Titres → sur les titres h2 avec liens, correction du chevron qui pouvait se retrouver en ligne orpheline quand le titre prenait exactement la largeur du parent.
  • Évolution : Bouton plein-écran → changement de position par rapport à l’image.
  • Évolution : Sources → modification des cocardes JDLO (CO, PO et ML).
  • Évolution : Articles dans une liste → ajout d’une classe pour supprimer la bordure du 1er ou dernier élément quand ce n’est pas possilble de le faire au moment de la création de la liste.
  • Fix : toggleclass → amélioration des perf.

Documentation

  • Évolution : Ressources – Couleurs → ajout de la couleur de fond des contenus sponsorisés.
  • Évolution : Ressources – Variables → ajout de la variable $color-sponsorised-1 des contenus sponsorisés.
  • Évolution : Démo – Liste d’articles → ajout de cas d’articles sponsorisés.
  • Évolution : Démo – Liste d’articles → ajout d’une liste d’articles sponsorisés exclusivement.
  • Évolution : Ressources – Icônes → suppression de la fonte de pictos Ouest-France, devenue obsolète.
  • Évolution : Ressources – Icônes → ajout de nouvelles icônes à la fonte (supprimer, info, tablette, ordinateur, mobile-tablette, ordinateur-mobile, signet, lire-plus-tard, envoyer, carte-bancaire, réduire).
6.9.8 (07-12-23)

Composants

  • Nouveauté : Notifications
  • Nouveauté : JS Dialog
  • Évolution : Global → Suppression du padding sur les <menu>.
  • Évolution : Liste texte → Diminution de la taille des puces.
  • Évolution : Pop-in → Ajout de la possibilité de créer des pop-in avec la balise <dialog>.
  • Évolution : Sources → Ajout de la cocarde « Pur Beurre.
  • Évolution : Grille → Ajout de la classe su-row-gap pour ajouter une goutière horizontale si nécessaire et la classe su-has-gutter est renommée su-column-gap (l’ancien nom est conservé pour la rétro-compatibilité).

Documentation

  • Évolution : Ressources – Logos → ajout du logo « La Place.
  • Évolution : Ressources – Logos → ajout du logo « Pur Beurre.
6.8.11 (12-10-23)

Composants

  • Nouveauté : Boutons sociaux
  • Évolution : Icônes Média → L’icône passe de gauche à droite.
  • Évolution : Liens → prise en compte du statut « visité » des liens éditoriaux.
  • Évolution : Liste de liens → forçage de la taille des icônes (taille libre optionnelle).
  • Évolution : Titre premium → ajout d’une option pour les abonnés professionnels.
  • Évolution : Sources → ajout de la cocarde « Les Éclaireurs.

Thèmes

  • Fix : Voiles & voiliers→ corretion du H1 éditorial mobile + suppression du gras sur le chapeau.

Documentation

  • Évolution : Ressources – Logos → mise à jour du logo « Quand Partir.
  • Évolution : Ressources – Logos → ajout du logo « Les Éclaireurs.
  • Évolution : Ressources – Logos → mise à jour du logo « Prix de la Démocratie.
  • Évolution : Variables → ajout des variables de couleurs de marques manquantes.
6.7.15 (07-09-23)

Composants

  • Nouveauté : Drapeaux
  • Évolution : Classes d’aide → ajout de classes graphiques standards su-standard-border, su-standard-padding et su-standard-radius.
  • Évolution : Texte standard → ajout d’une classe su-text-xlight pour passer un texte dans un niveau moins contrasté (#858585) que la classe su-text-light (#666666).
  • Évolution : Source → ajout de la cocarde de TV5-monde.
  • Évolution : Source → ajout de la cocarde de la Fondation 1Ocean.
  • Évolution : Classes d’aide → suppression de la classe su-button-no-look qui était devenue inutile vu que les boutons, par défaut, ont déjà leur styles navigateurs supprimés.
  • Évolution : variables CSS → ajout de la variable de couleur pour le réseau social 𝕏 (celle de Twitter reste disponible pour l’instant).
  • Fix : Liste de liens → SipaUI forçait la couleur des SVG, c’est maintenant une option.

Thèmes

  • Nouveauté : Prix de la démocratie → initialisation.

Documentation

  • Évolution : Ressources – Typographie → ajout de la fonte Raleway du thème Infoconnect.
  • Évolution : Ressources – Icônes → ajout de 2 icônes dans la fonte d’icônes SipaUI (« Téléphoner » et « FAQ »).
  • Évolution : Ressources – Logos → ajout du logo TV5 Monde.
  • Évolution : Ressources – Logos → mise à jour du logo « Sain et Naturel » en version couleur.
  • Évolution : Ressources – Logos → mise à jour du logo « Lire Magazine ».
  • Évolution : Ressources – Logos → ajout du logo « Prix de la démocratie ».
  • Évolution : Ressources – Logos → ajout du logo « Fondation 1Ocean ».
  • Fix : Ressources – Logos → correction du logo « Groupe sipa ouest-France » en PNG noir.
6.6.10 (22-06-23)

Composants

  • Nouveauté : Titre « En direct »
  • Évolution : Source → accessibilité, passage du aria-label en aria-description.
  • Évolution : Source → modification de la cocarde API.
  • Évolution : Source → ajout de la cocarde du Chasse-Marée.
  • Évolution : Texte standard → ajout de la classe su-text-big pour créer un texte légèrement plus grand que le texte standard.
  • Évolution : Mot de passe → ajout de la possibilité de mettre ses propres règles de validation de mot de passe.
  • Fix : Titre → correction d’un comportement erratique au survol en desktop des titres avec lien quand ceux-ci font exactement la taille de leur parent.

Documentation

  • Nouveauté : Ressources – Typographie → ajout des fontes Ouest-France.
  • Évolution : Mot de passe → plus d’explications sur le fonctionnement de la gestion d’erreurs.
  • Évolution : Ressources – Logos → modification du logo API.
  • Évolution : Démo – Liste d’articles → ajout de cas d’articles DIRECT.
6.5.7 (14-04-23)

Composants

  • Nouveauté : Bouton onglet (navigation via des boutons)
  • Évolution : Tags → diminution de la taille du texte (de 16 à 14px) sur les thèmes Ouest-France et Voiles & Voiliers
  • Évolution : Liste de liens → pour des raisons de logique de nommage la classe su-no-ending-border a été renommée su-no-ending-separator. Pour la rétro-compatibilité, l’ancien nom reste valide, en 6.x…
  • Évolution : Boutons → prise en charge de SVG filaires comme pictos dans les boutons.
  • Évolution : Carrousel → masquage des boutons desktop sur mobile via `@media (hover: none)` au lieu de `su-touch` pour éviter un effet de FOUC.
  • Fix : Tags → correction d’une erreur de couleur de texte en hover sur le thème Ouest-France.

Documentation

  • Évolution : Ressources – Icônes → ajout des drapeaux internationaux en SVG.
  • Évolution : Ressources – Icônes → ajout de 9 icônes dans la fonte d’icônes SipaUI (« Direct », « Partager », « Télécharger », « Newsletter », « Aimer »…).
6.4.7 (24-03-23)

Composants

  • Nouveauté : Groupe d’entrées (input + bouton)
  • Évolution : Champ texte → gestion d’une icône-label interne
  • Évolution : Champ de recherche → refonte en s’appuyant sur l’icône-label (l’ancienne méthode est conservée pour la rétro-compatibilité)
  • Évolution : Champ de recherche → ajout d’une version par validation serveur, basée sur un groupe d’entrées
  • Fix : Titre premium → correction alignement vertical de l’icône dans certains cas.
  • Fix : Input date → correction mauvaise largeur de composant sur iOS.
  • Fix : Input date → correction double icône sur Firefox (Firefox n’affiche plus l’icône personnalisée puisqu’il ne permet pas de masquer la sienne).
  • Fix : Titre premium → correction de la graisse et de la position du cadenas en mobile.

Documentation

  • Évolution : Démo – Liste d’articles → ajout d’« En continu ».
6.3.18 (24-02-23)

Composants

  • Nouveauté : Liste articles temporelle
  • Nouveauté : Bouton connexion / utilisateur
  • Évolution : Fil d’Ariane, Liste de tags → mention de la balise <nav>.
  • Évolution : Classes d’aide → colonnes : ajout de la classe `su-columns-no-cut` pour donner la possibilité d’empêcher un enfant d’être couper sur plusieurs colonnes et contrer un bug de Firefox.
  • Évolution : Titres → thème « Voiles et voiliers, changement de la couleur en su-negative
  • Évolution : Tableau → ajout de la gestion du su-negative
  • Évolution : Marges → ajout de marges fluctuantes pour desktop
  • Évolution : Boutons et Tags → leur largeur est maintenant bloquée au maximum par celle de leur parent. Au-delà, cela coupera le texte et ajoutera « … ».
  • Évolution : Articles dans une liste (focus, teaser…) → gestion des articles sans images.
  • Fix : Carrousel → suppression d’un impact CSS sur un bouton qui serait intégré dans un élément de carrousel.

Documentation

  • Évolution : Démo – Liste d’articles → ajout de l’« Événement tête épinglé ».
  • Évolution : Logos → modification d’« Édition Ouest-France.
  • Évolution : Couleurs → changement de thématique pour « Petit Écran.
  • Évolution : Icônes → ajout des icônes « utilisateur » et « email ».
  • Évolution : Logos → ajout des logo « Petits écrans et Shopping.
6.2.7 (22-12-22)

Composants

  • Nouveauté : Onglets
  • Évolution : Articles dans une liste et Teasers → ajout des séparateurs pour mobiles et tablettes uniquement.
  • Évolution : Marges → ajout de 4 classes de marges fluctuantes.
  • Évolution : Tableau → ajout d’une classe pour supprimer la dernière bordure d’un tableau.
  • Évolution : Citation → ajout d’un exemple de citation en incise (<q>) et passage de celle-ci en gras dans un article pour les thèmes OF et VV.

Documentation

  • Évolution : Logos → ajout du logo Infoconnect.
  • Évolution : Divers composants → ajout de la mention de su-negative dans la liste des classes disponibles.
  • Évolution : Démo – Liste d’articles → ajout de l’« Événement tête » et de l’« Événement tête focus ».
6.1.5 (25-11-22)

Composants

  • Nouveauté : Titre article premium
  • Nouveauté : Classes d’aide → ajout de classes pour créer des colonnes.
  • Évolution : Liste de liens → ajout de classes pour afficher une liste en plusieures colonnes.
  • Évolution : Liste de liens → ajout d’une classe pour supprimer le séparateur du dernier élément de la liste.
  • Évolution : Source → ajout de diverses cocardes.

Documentation

  • Évolution : Logos → correction des logos de « Terre de Jardins et « Voyages à l’Ouest.
  • Évolution : Couleurs → correction des couleurs de « Voyages à l’Ouest.
  • Évolution : Démo – Liste d’articles → ajout d‘articles premium.
6.0.9 (10-11-22)

Composants

  • Nouveauté : Carrousel
  • attention Évolution : Teaser → refonte en grid CSS afin de pouvoir gérer les titres longs qui provoque un dépassement vertical du texte par rapport à l’image.
  • attention Évolution : balise <q> → cette balise force maintenant des guillemets à la française avec espaces insécables.
  • attention Évolution : Grille → la grille, en flex, utilise maintenant que c’est bien supporté par les navigateurs, l’attribut column-gap à la place du précédent système en justify-content: space-between. Cela permet de conserver un espacement standard quand le nombre de collonnes utilisées est inférieur au nombre de colonnes totales. Les classes su-filling-… deviennent donc beaucoup moins utiles. Elles sont toutefois conservées pour rétro-compatibilité et pour offrir des possibilités de déplacement spécifiques par rapport à su-offset-…. Par ailleurs, la classe `su-row-left` est, elle, devenue réellement inutile et a été supprimée sans que cela ait d’impact pour du code qui l’utiliserait.
  • attention Évolution : Liste de liens → ce composant doit maintenant impérativement être appelé via « Navigation » et non-plus « Texte ».
  • Évolution : Tags → ajout de la gestion du swipe (tactile) et du carrousel (non tactile).
  • Évolution : JS Carrousel → correction de la documentation.
  • Évolution : Source → ajout de la cocarde Energy Observer.
  • Évolution : Source → optimisation des autres cocardes.

Documentation

  • Évolution : Démo – Liste d’articles → ajout d‘un carrousel de liste d’articles.
5.8.10 (06-10-22)

Composants

  • Nouveauté : Bouton « Plein écran ».
  • Nouveauté : Fil d’Ariane.
  • Évolution : Bouton « Voir + » → ajout de la gestion de la version « négative » pour fond foncé.
  • Évolution : Liens → ajout de la gestion de la version « négative » pour fond foncé.
  • Évolution : Sources → ajout de la cocarde Ôdélices.
  • Évolution : Pagination → les boutons de la pagination passent en transparents, comme les boutons secondaires.
  • Évolution : Pagination → gestion de la version sur fond sombre.
  • Évolution : Button par défaut → suppression du fond et de la bordure.
  • Évolution : Articles dans une liste → ajout de classes optionnelle pour mettre un séparateur sous ou au-dessus d’un article de la liste.
  • Évolution : Classes de gestion de radius → passage de ces 2 classes (su-radius-on et su-radius-off) en mode général (peuvent être appliquées sur n’importe quoi).
  • Fix : Input texte → prise en compte de la variable CSS pour les inputs inactifs.
  • Fix : Légende → prise en compte du centrage de la légende dans le thème Ouest-France.
  • Fix : Teaser → possibilité de changer la marge de l’image de côté quand on passe l’image de gauche à droite.

Documentation

  • Nouveauté : Démo – Liste d’articles → création d’une page de démonstration de listes d’articles dans « Doc framework »
  • Évolution : Logos → ajout de moult logos, dont la plupart en version noire ou blanche en plus de la version couleur.
5.7.13 (17-08-22)

Composants

  • Nouveauté : Bouton « Voir + ».
  • Évolution : Teaser → variabilisation de la position de la photo (gauche ou droite).
  • Évolution : Teaser → suppression de la troncature sur les titres.
  • Évolution : Source, Focus, Teaser et Cartes → la cocarde n’est plus affichée en liste d’article.
  • Évolution : Source → troncature sur les sources trop longue.
  • Évolution : Cartes → ajout de la gestion du liseré en bas.
  • Fix : Cartes → correction de la classe `su-negative` sur un parent qui provoquait des changements de couleur dans la carte.
  • Fix : Article dans une liste → ce composant porte la position: relative des articles dans une liste, à la place du composant Icônes media.

Thèmes

  • Nouveauté : InfoConnect, gestion des pop-ins.

Documentation

  • Évolution : Logos → mise à jour du logo « Breton en cuisine.
  • Évolution : Logos → ajout du logo « Édition du soir.
5.6.17 (29-06-22)

Composants

  • Nouveauté : Teaser, article dans une liste de type particulier.
  • Évolution : Select → ajout d’informations sur le cas déconseillé du select sans label.
  • Évolution : Input text → ajout de la gestion de l’input URL.
  • Évolution : Sources → ajout des cocardes « Le Marin, « L’Ouest Éclair, TVRennes et TéléNantes.
  • Évolution : Baseline → gestion du fond sombre.
  • Évolution : Chapeau → gestion du fond sombre.
  • Évolution : Chapeau → changement d’interlignage du chapeau en liste d’articles.
  • Évolution : Liste de liens → déplacement de « Text » vers « Navigation » (rétro-compatibilité maintenue des @import CSS en attendant la prochaine version majeure).
  • Évolution : Liste de liens → gestion du multiligne et de la troncature.
  • Évolution : Classes d’aide → ajout de classes de troncature.
  • Évolution : Classes d’aide → ajout de classes de masquage liées au touch.
  • Évolution : JS carrousel, ajout de l’option halfSwipe pour avancer le contenu d’une demie-largeur de conteneur en cas de contenu dont les éléments n’ont pas tous la même largeur.
  • Évolution : Tous les composant → l’état inactif passe de 40 à 50% d’opacité.
  • Évolution : Tous les composant → suppression des fontes en .woff, on ne garde que les .woff2.
  • Fix : Select → correction du chevron qui réagit au survol lorsque le select est inactif.
  • Fix : Titres → correction du chevron qui pouvait retourner à la ligne seul sur les titres avec lien.

Thèmes

  • Nouveauté : InfoConnect, création de ce nouveau thème.
  • Évolution : Voiles & voiliers, le gras passe en médium.

Documentation

  • Évolution : Logos → mise-àjour du logo Panorapresse.
  • Évolution : Logos → suppression du logo « Radio Cristal.
  • Évolution : Logos → ajout du logo TVRennes.
  • Évolution : Logos → ajout du logo TéléNantes.
5.5.10 (13-04-22)

Composants

  • Nouveauté : Article dans une liste, base pour un article dans une liste.
  • Nouveauté : Focus, article dans une liste de type particulier.
  • Nouveauté : Card, article dans une liste de type particulier.
  • Évolution : Sources → changement du line-height.
  • Évolution : Date → changement du line-height.

Thèmes

  • Évolution : Thème Ouest-France → Titres : passage des titres d’articles dans une liste en gras.
  • Évolution : Thème Ouest-France → Images : passage en coins arrondis + ajout d’une classe « interrupteur » pour ces coins arrondis.

Documentation

  • Nouveauté : JS carrousel, ajout de la doc pour ce composant Javascript.
5.4.7 (11-04-22)

Composants

  • Évolution : Titres → ajout du titre avec lien.
  • Évolution : Sources → ajout de la source dont le texte est défini en aria-label.
  • Évolution : Image → ajout de la gestion de la balise <picture>.
  • Fix : Carousel → correction état des puces / fleches.

Documentation

  • Évolution : Légende → Précision pour l’accessibilité.
  • Évolution : Image → ajout de la légende.
5.3.4 (16-03-22)

Composants

  • Nouveauté : Baseline.
  • Nouveauté : Légende.
  • Nouveauté : Tags.
  • Fix : Titres → correction des titres négatifs pour le thème Voiles & Voiliers.

Documentation

  • Évolution : Logos → ajout du logo Bretons.
5.2.4 (11-02-22)

Composants

  • Nouveauté : Sélecteur de date.
  • Nouveauté : Liste de liens.
  • Fix : Champ de recherche → la zone cliquable d’une proposition dans l’autocompletion prend toute la largeur de la liste.

Documentation

  • Évolution : Icônes → ajout de l’icône « calendrier ».
  • Évolution : Couleurs → ajout des variables des couleurs éditoriales portées par Ouest-France.
5.1.8 (20-01-22)

Composants

  • Nouveauté : Tableaux, par défaut, mis en forme (alignements, largeurs…), responsif, fusion des cellules.
  • Évolution : Boutons → les boutons négatifs peuvent prendre la classe su-negative sur un parent. Utile si on ne veut mettre cette classe qu’une seule fois pour gérer des boutons et du texte…
  • Évolution : Boutons et Liens → ajout des informations de tracking.
  • Évolution : Classes d’aide → ajout de la classe su-text-nowrap.
  • Évolution : Grille → modification du comportement des colonnes en cas de contenu trop large : maintenant ce sera le contenu qui sera cassé, et non plus la grille.
  • Évolution : JS → accélération du FID delay pour des raisons de performance.

Documentation

  • Évolution : Logos → mise à jour du logo de « 20 minutes.
  • Évolution : Logos → ajout des logos « Agréé par Ouest-France.
  • Évolution : Couleurs → suppression de couleurs e-événements obsolètes.
  • Évolution : Légère réorganisation du menu de ce site.

Thèmes

  • Évolution : Thème Ouest-France → les boutons, les champs de formulaire, selects et accordéons s’arondissent.
  • Évolution : Thème Ouest-France → Sources : changement de couleur du hover sur les sources avec lien.
5.0.10 (14-12-21)

Composants

  • Évolution : Classes d’aide, Texte standard, Titres, Liens et Boutons → ajout de la classe su-negative pour inverser des couleurs de textes et boutons sur fonds sombres.
  • Évolution : Listes → la taille des puces s’adapte à la taille du texte avec su-text-small ou su-text-xsmall.
  • Évolution : Champ de recherche → prise en charge de la balise <em> dans les volets d’auto-complétion pour illustrer les caractères déjà saisis.
  • Évolution : Liens → les liens négatifs (blancs) ne sont plus gris au hover, mais blancs à 60% pour s’adapter aux fonds de couleurs variables.
  • Fix : Pagination → sur la première et la dernière page, le bouton central indicateur de la page en cours a une bordure qui indique bien son état inactif.
  • Fix : Champ de recherche → correction de la superposition de l’auto-complétion dans certains contextes.

Documentation

  • Nouveauté : Couleurs, ajout des couleurs thématiques et modification du rouge secondaire de la charte Ouest-France (avec mise à jour du PDF de référence).
  • attention Nouveauté : JS onglet, ajout de la doc pour ce composant Javascript (le nom de la classe a changé par rapport à la version précédente).
  • Nouveauté : JS scrollto, ajout de la doc pour ce composant Javascript.
  • Nouveauté : JS os, ajout de la doc pour ce composant Javascript.
  • Nouveauté : JS width, ajout de la doc pour ce composant Javascript.
  • Nouveauté : JS vwidth, ajout de la doc pour ce composant Javascript.
  • attention Évolution : JS scrollclass → suppression de la classe par défaut, le paramètre klass devient obligatoire (composant pas encore documenté).

Thèmes

  • Évolution : Thème Ouest-France → nombreux composants (boutons, liens…) : changement de plusieurs couleurs suite à la disparition de l’ancien rouge foncé (#b40015) de la charte (cf. évolution de la documentation Couleurs ci-dessous).
4.3.11 (22-10-21)

Composants

  • Nouveauté : Icônes média (photos, vidéos, podcast).
  • Nouveauté : Image.
  • Nouveauté : JS → ajout de plusieurs composants pas encore documentés (os, onglets, carrousel, scrollclass, scrollto, width et vwidth).
  • Évolution : Titres → ajout d’une classe pour gérer les marges des titres non-éditoriaux.
  • Évolution : Texte standard → ajout d’une classe pour passer un texte en version « allégée » visuellement (gris).
  • Évolution : Classes d’aide → ajout de 2 classes pour gérer l’alignement de bloc en ferrage à gauche ou à droite.
  • Fix : Accordéon → réparation de la classe su-no-transition.
  • Fix : Citation → prise en compte de cas où le contenu ne serait pas dans un <p> mais dans un <div>.
  • Fix : ajout d’une position: relative sur les éléments <figure> et suppression de la marge inférieure par défaut.

Documentation

  • Évolution : les logos SVG deviennent compatibles AMP.
  • Évolution : nouveaux logos dans la logothèque (Mutuelle Ouest-France, Breton en Cuisine, L’ampli, Bricoleur Pro, Idee Texte, Le Mag des Animaux, Le Mag du Chat, Le Mag du Chien)
  • Évolution : Icônes → nouvelles icônes : galerie, vidéo, podcast, agrandir.
4.2.8 (11-08-21)

Composants

  • Nouveauté : Citation.
  • Nouveauté : Date.
  • Évolution : Titres → modifications des marges de titre dans un article.
  • Fix : Boutons → retour du design spécifique des boutons Voiles & Voiliers.
  • Fix : Boutons → empêchement du retour à la ligne dans les boutons.
  • Fix : toggleclass → prise en compte de tous les parents au lieu du parent le plus proche.

Documentation

  • Nouveauté : Variables, document sur les variables CSS et SCSS.
  • Évolution : Icônes → téléchargement au format fonte, SVG et PNG.
  • Évolution : Couleurs → mise à jour de la palette des réseaux sociaux.
4.1.6 (30-06-21)

Composants

  • Nouveauté : Interrupteur (switch).
  • Nouveauté : Auteur.
  • Évolution : Cases à cocher → ajout de l’utilisation d’une case à cocher unique.
  • Évolution : JS toggleclass → ajout du paramètre `inverted` pour gérer les cas où on sort d’une zone en `hover`.

Documentation

  • Évolution : nouveau logo dans la logothèque (Ouest-France Groupe SIPA)
4.0.12 (07-06-21)

Composants

  • Nouveauté : Champ de recherche.
  • Évolution : Grille → ajout de su-offset-sm-0… et su-filling-sm-0…
  • Évolution : Icônes → ajout du picto « menu ».
  • attention Évolution : Steppers → suppression du vieux code CSS qui maintenait une rétro-compatibilité avec la version sans <nav>.
  • Évolution : gestion automatisée des préfixes navigateurs avec suppression de ceux devenus inutiles, plus autres optimisations CSS.
  • Évolution : simplification de l’import NPM de SipaUI et ajout de la possibilité d’importer une version en assemblage de composants sans le reset CSS normalize dans vos propres CSS.
  • attention Évolution : les variables de base (couleurs, marges…) passent de variables SCSS à des variables CSS.
  • attention Évolution : le composant Cocardes est intégré au composant Sources.
  • Évolution : Cocardes → ajout de la cocarde France-Live.
  • Évolution : Classes d’aide → ajout de la classe su-button-no-look pour initialiser un <button> sans design en vue d’une customisation particulière (bouton icône…).
  • Évolution : Icônes → ajout de la déclaration font-display: optionnal pour de meilleures perfs en AMP aux options de la fonte su-icons.

Documentation

  • Nouveauté : refonte du site ! Regroupement en un seul site et nouveau design.
  • Nouveauté : ajout d’une entrée « Ressources » dans le menu, avec les couleurs, les icônes, la typopgraphie et la logothèque.
  • attention Évolution : réorganisation des composants.
  • Évolution : nouveaux logos dans la logothèque (France-Live, Digiteka…)
3.10.1 (12-03-21)

Composants

  • Nouveauté : Champ de recherche

Documentation

  • Évolution : tout → redesign de la documentation.
3.9.8 (03-03-21)

Composants

  • Nouveauté : Boutons → bouton avec icône en plus du texte.
  • Nouveauté : doc Javascript pour le composant sutoggleclass.
  • Nouveauté : doc Javascript pour le composant sutoggleattribute.
  • Évolution : Accordéon → ajout d’attributs aria.
  • Évolution : Pop-in → ajout d’attributs aria.
  • Évolution : Steppers → ajout d’attributs aria.
  • Évolution : Pagination → ajout d’attributs aria.
  • Évolution : Loader → ajout de l’accessibilité.
  • Évolution : Cases-à-cocher → ajout de la gestion des cases en colonne dans des listes.
  • Évolution : Icônes → ajout de la petite taille d’icônes (14px).
  • Fix : Icônes → les chevrons passent à des « ligatures » sémantiques pour le SEO (pour rétro-compatibilité, les anciennes ligatures sont conservées).

Documentation

  • Évolution : tous les composants → ajout d’un sommaire interne.
  • Évolution : refonte graphique du site de présentation.
3.8.5 (04-02-21)

Composants

  • Nouveauté : Accordéon avec chevron.
  • Évolution : Icônes → le sélecteur CSS passe de [class^="su-icon"], [class*=" su-icon"] à .su-icon pour être moins lourd et surtout permettre le @extend.
  • Évolution : Classes d’aide → ajout des classes de display tabulaires .su-table, .su-table-row et .su-table-cell.

Documentation

  • Nouveauté : ajout de la logothèque.
3.7.7 (04-09-20)

Composants

  • Nouveauté : Pagination.
  • Évolution : Icônes → « fleche_bas » est devenu « chevron_bas ». Par souci de rétrocompatibilité, « fleche_bas » est toujours supporté pour vous permettre d’avoir le temps de changer, mais cette référence sera supprimée dans une version future.
  • Évolution : Icônes → ajout des chevrons haut, gauche et droite.
  • Évolution : Icônes → ajout de la loupe.
  • Évolution : Liens → lien léger.
  • Évolution : Grille → ajout de classes pour gérer l’alignement du contenu de la grille libre.
    • Évolution : Pop-ins, cases à cocher et boutons-radio → ajout de l’accessibilité.
  • Évolution : Pop-ins et voile → z-index augmentés pour être plus sûr de passer au-dessus des autres éléments de la page. Attention ! Cela peut entraîner une régression sur une page qui voudrait positionner du contenu au-dessus de ce voile.
  • Évolution : mixins SCSS, amélioration de la troncature multilignes.
3.6.12 (04-09-20)

Composants

  • Nouveauté : Accordéon-radio.
  • Évolution : Titres → variabilisation des marges des titres dans les articles.
  • Évolution : Mot-de-passe → ajout d’un message d’erreur en cas de mot-de-passe non conforme.
  • Évolution : Pop-ins → la croix de fermeture est maintenant un bouton (l’ancienne méthode avec un <div> reste compatible).
  • Évolution : Chapeaux → la graisse du texte est indépendante entre les listes d’articles et le détail article.
  • Évolution : Optimisation de la gestion des fontes Googles pour améliorer les performances.
  • Évolution : Cocardes → ajout de la cocarde API.
  • Fix : ajout de Polyfills pour IE11.
  • Fix : débug flex sur les steppers pour IE11.
  • Fix : mauvaise graisse du chapeau OF dans le détail-article.
3.5.3 (06-01-20)

Composants

  • Nouveauté : Chapeau.
  • Évolution : Titres dans une liste d’articles → les .su-h2 et .su-h3 ne sont plus impactés par .su-articles-list.
  • Évolution : Sources → le poids sélecteur des liens de source surcharge maintenant celui des liens d’article.
  • Évolution : Mot de passe → la fonction d’affichage du mot de passe (œil) apparaît après la saisie d’un premier caractère.
  • Évolution : Titres → les titres dans les articles ne sont plus modifiés par <strong>, <b>, <em> ou <i>.
  • Évolution : Liens → ajout de la classe .su-not-link pour les cas où l’apparence de lien est gênante (p. ex. : lien sur un bloc).
3.4.7 (29-11-19)

Composants

  • Nouveauté : Voile.
  • Nouveauté : Pop-ins.
  • Évolution : Liens / Thème OF → liens éditoriaux OF passent en rouge.
  • Évolution : Titres / Thème OF → H3 non éditoriaux passent de 18 à 20px.
  • Évolution : Classes d’aide → ajout de la classe .su-no-scroll.
  • Évolution : Sources → gestion d’un lien sur une source.
3.3.5 (04-11-19)

Composants

  • Nouveauté : Couleurs thématiques.
  • Nouveauté : Couleurs de marques.
  • Évolution : Grille → ajout d’une classe .su-filling-… pour permettre d’utiliser un nombre de colonnes « implicite » inférieur à celui attendu par la grille.
  • Évolution : Grille → possibilité de mettre les classes .su-container et .su-row au même niveau que .sipaui.
  • Évolution : Marges → ajout d’une nouvelle taille de marge à 50 px.
  • Évolution : Liens éditoriaux OF passent en rouge.
3.2.6 (30-09-19)

Composants

  • Nouveauté : Sources.
  • Nouveauté : Cocardes pour les sources journalistiques.
  • Évolution : typographie, ajout de la variable $font-weight-normal à 400 qui remplace $font-weight-medium quand elle était utilisée.

Documentation

  • Mise à jour de la page d’installation.

Divers

  • Suppression du téléchargement des dépendances du projet lors de l’installation via NPM.
3.1.7 (04-09-19)

Composants

  • Nouveauté : Mot de passe.
  • Nouveauté : <hr>, <code>, <kbd>, <samp> : basique (pas dans le catalogue et non paramétrables).
  • Évolution : Texte → ajout d’une version xsmall.
  • Évolution : Icônes → ajout de valide, invalide, bloqué (cadenas article payant) et débloqué (cadenas article payé).
  • Évolution : gestion de l’anticrénelage (anti-aliasing) des textes sur Mac (quel que soit le navigateur).
  • Évolution : les polices (Oswald et pictos) sont appelées par défaut sur notre CDN.
3.0.10 (04-07-19)

Composants

  • Évolution : Grille → amélioration de la grille auto.
  • Évolution : Titres → prise en compte des listes d’article.
  • Évolution : Textes → gestion de la hauteur de ligne du petit texte.
  • attention Évolution : amélioration du système de thèmes.
  • attention Évolution : réordonnancement de l’arborescence des composants.
2.1.3 (06-06-19)

Composants

  • Nouveauté : Listes déroulantes → petit select.
  • Évolution : Liens → prise en compte de <a> sans classe.
  • Évolution : Champs texte → prise en charge basique d’input search.
2.0.4 (20-05-19)

Composants

  • Nouveauté : Steppers
  • attention Évolution : Grille → la grille « md » passe de 6 à 24 colonnes.
1.2.1 (25-04-19)

Composants

  • Nouveauté : Texte → petit texte
  • Évolution : mutualisation des sous-thèmes « abonnement » et « premium »
1.1.6 (11-04-19)

Composants

  • Nouveauté : Listes
  • Nouveauté : Page loader

Documentation

  • CDN par versions
1.0.12 (22-03-19)

Composants

  • Points de rupture
  • Grille (standard et libre)
  • Classes d’aide (clearfix, masquage, display…)
  • Icônes
  • Marges
  • Texte standard
  • Titre</li>
  • Liens
  • Boutons
  • Labels
  • Cases à cocher
  • Boutons radio
  • Champs texte
  • Listes déroulantes
  • Erreurs

Documentation

  • Création des pages de l’installation et de l’archi fonctionnelle

Le code a bien été copié !