Groupes

Les groupes sont les éléments d’interface de complexité intermédiaire.

Messages

Les boîtes de message respectent le motif de conception aria associé. Pour vous en servir correctement, deux conditions :

  1. la div role="alert" aria-live="assertive" doit être présente mais vide dans le code source dès le chargement de la page ;
  2. lors de l’affichage d’un message, vous devez modifier son contenu html, de préférence avec la méthode JavaScript .innerHTML().

Notes

Un message peut ne pas être une alerte. Pour ce cas, une div avec la classe note peut être employée.

Grille

Un système de grille basique mais efficace est disponible. La version de base repose sur les colonnes css — supportées depuis ie10 — et la grille fixe s’appuie sur les grilles CSS (sans préfixes Microsoft, mais avec une bascule sur les colonnes pour les navigateurs intermédiaires).

Cartes

Un jeu de carte — basé sur le composant inclusif conçu par Heydon Pickering — est ajusté à l’usage de sseeeedd. Il utilise, entre autres subtilités, les propriétés personalisées, flexbox et :focus-within.

En colonnes

En grille fixe

Panneaux

Les panneaux sont les éléments HTML5 natifs details et summary. Ces éléments travaillent conjointement pour composer un élément interactif permettant d’afficher du contenu supplémentaire.
Ils sont par conséquents accessibles et se dégradent gracieusement sur les navigateurs ne les supportant pas.

Panneau №1

Contenu №1

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №2

Contenu №2

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №3

Contenu №3

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №4

Contenu №4

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneaux verticaux

Les panneaux verticaux sont une version enrichie des panneaux ordinaires. Ils s’appuient sur flexbox et un bout de JavaScript, pour s’assurer qu’un seul panneau soit déplié à la fois. L’orientation verticale du texte dépend du support de la propriété CSS writing-mode.

Panneau №1

Contenu №1

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №2

Contenu №2

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №3

Contenu №3

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Panneau №4

Contenu №4

Au fond de la darse s’amorce une seconde ligne de trams qui longe le bord de la mer. Le tram se compose de six cars, où nombre de voyageurs ont déjà pris place. Ces cars sont traînés par une locomotive électrique, avec accumulateurs d’une capacité de deux cents ampères-ohms, et leur vitesse atteint de quinze à dix-huit dix-neuf kilomètres.

Menu déroulant

Là, ça devient rigolo.
Ces menus déroulants fonctionnent sans JavaScript et sont parfaitement accessibles. Ils sont cependant limités à un seul niveau. Si vous avez besoin de plusieurs niveaux imbriqués, préférez une solution basée sur JavaScript.
Ce composant requiert le support de :

Un délai de 300 ms est laissé avant de refermer le menu, pour éviter les fermetures intempestives et non désirées.

Note technique

L’ouverture du second niveau se déclenchant lors de l’interaction en CSS, il est fortement recommandé d’utiliser un button comme déclencheur.

Pagination

Fil d’Ariane

Blocs de code

Les blocs de code ont un habillage personnalisé, imitant sommairement une fenêtre système. PrismJS, un script de coloration syntaxique supportant plusieurs langages, est présent — avec un thème personnalisé aux couleurs de sseeeedd. 

.open-space {
	/* Exemple de commentaire */
	display: grid;
	grid-template: repeat(16, minmax(3rem, 1fr)) / repeat(44, minmax(calc(3rem * 4 / 3), 1fr));
	height: 100vh;
	position: fixed;
	width: 100vw;
}

Liste de définitions légendée

Terme
Définition
Clé
Valeur
Exemple de liste de définitions.