haut

Versions

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

Version majeure en cours

7.2.25

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.
  • Fix : Divers -> correction de liens cassés.
7.1.16

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

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’appuye 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 : Titres -> thème Voiles et Voiliers, correction d’un bug sur un titre avec lien en su-negative.
  • Fix : Tous les composants -> petites corrections et optimisations diverses.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.6

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

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

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

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

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

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.6

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

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

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.9.8

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.1

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

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

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

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

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.4

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

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

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.7

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

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

Composants

  • Nouveauté : Steppers
  • attention Évolution : Grille -> la grille « md » passe de 6 à 24 colonnes.
1.2.1

Composants

  • Nouveauté : Texte -> petit texte
  • Évolution : mutualisation des sous-thèmes « abonnement » et « premium »
1.1.6

Composants

  • Nouveauté : Listes
  • Nouveauté : Page loader

Documentation

  • CDN par versions
1.0.12

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é !