UIkit associe un framework CSS, une personnalisation Less et des composants JavaScript pilotés par attributs. Son Switcher, son Accordion et sa grille adaptative fonctionnent de concert dans le planificateur d’atelier ci-dessous, pour illustrer la limite entre le comportement natif des composants et l’état de sélection de l’application.
UIkit 3.25.25 CSS et JavaScript natifs ; contenu original des sessions et état du programme. · Référence de mise en œuvre
02
Référence de conception du système de design UIkit
Sources Less de UIkit 3.25.25 et CSS par défaut compilé. Les noms commençant par @ sont des variables Less résolues à la compilation, et non des propriétés personnalisées CSS à l’exécution. L’aperçu ajoute des substitutions propres à l’écran, indiquées explicitement.
Classes CSS du système de design UIkit et comportements pilotés par des attributs
Classes CSS et comportements pilotés par des attributs
UIkit associe un framework CSS à une couche de composants JavaScript. La classe uk-card applique un style à une surface ; l’attribut uk-switcher initialise un composant interactif. L’exemple de l’atelier illustre cette distinction : les cartes et les champs de formulaire peuvent être affichés avec CSS seul, tandis que le changement de session et le développement des accordéons dépendent du bundle JavaScript de UIkit.
L’aperçu charge localement la feuille de style compilée et le runtime réels de la version 3.25.25. Ses trois sessions ont des durées et des dispositions différentes : le changement de session met donc en évidence le comportement réel du contenu, au lieu de simplement modifier un libellé dans une carte par ailleurs identique. Le script local de planification des participants est distinct du runtime de UIkit et est présenté dans son intégralité.
Variables Less et styles à l’exécution du système de design UIkit
Variables Less et styles à l’exécution
Les noms de référence commençant par @ sont des variables Less. Elles sont résolues lors de la compilation ; placer @global-primary-background dans une feuille de style ordinaire du navigateur ne modifiera pas le thème à l’exécution. Le tableau indique les valeurs vérifiées dans les sources installées, tandis que l’aperçu utilise le CSS par défaut précompilé du package.
Pour créer un thème UIkit aux couleurs de votre marque, suivez le processus documenté d’importation et de personnalisation Less, puis recompilez. Pour des ajustements propres à une page, du CSS standard peut cibler une classe après le chargement de la feuille de style officielle. Cet exemple adopte cette seconde approche pour la taille du titre, le remplissage des cartes et la couleur des métadonnées. Il ne prétend pas que ces remplacements constituent de nouveaux jetons officiels de UIkit.
Hiérarchie du texte, des couleurs et des surfaces du système de design UIkit
Hiérarchie du texte, des couleurs et des surfaces
La police globale par défaut est une pile système de seize pixels avec une hauteur de ligne de 1,5. La couleur d’arrière-plan principale par défaut est #1e87f0, la couleur secondaire est un ton neutre sombre et les surfaces atténuées sont en #f8f8f8. Ces rôles distinguent une action principale de sélection d’une tuile explicative plus discrète. Le tableau de spécification fourni comprend les valeurs des textes et des surfaces, plutôt qu’une palette décorative de quatre couleurs.
L’atelier utilise un titre de grande taille, mais de hauteur maîtrisée, un petit libellé de programme et un titre dans chaque carte de session. Les métadonnées sont localement assombries en #65717a. La tuile de préparation conserve son fond bleu pâle d’origine et un texte sombre classique. Aucune inversion automatique n’est présumée : un fond sombre nécessite le traitement inverse approprié de UIkit ou des styles de texte explicitement assortis.
Relier la navigation des sessions au contenu dans le système de design UIkit
Relier la navigation des sessions au contenu
La liste de navigation utilise uk-switcher avec connect: #sessions et une animation en fondu. La liste de contenu porte la classe uk-switcher et l’ID correspondant. L’ordre des listes établit la correspondance : le premier élément de navigation contrôle le premier élément de contenu. L’ajout ou le réagencement d’une session nécessite donc de mettre à jour les deux listes simultanément. Le sélecteur connect explicite évite de dépendre d’un placement en tant que frère immédiat.
La navigation utilise uk-tab pour son apparence. UIkit gère l’état de l’élément actif et le comportement d’accessibilité associé. L’état initial du plan reste volontairement indépendant : consulter une autre session ne la sélectionne pas automatiquement. Seul le bouton Choisir cette session modifie le libellé de la sélection et place le focus sur le champ du participant.
Ouvrez Prototypage et examinez son contenu spécifique.
Choisissez cette session et vérifiez le libellé de sélection ci-dessous.
Passez à Clinique des systèmes sans la choisir : le plan local indique toujours Prototypage.
Largeurs réactives et gestion des gouttières dans le système de design UIkit
Largeurs adaptatives et gestion des gouttières
Le contenu des sessions utilise uk-width-2-3@m et uk-width-1-3@m dans uk-grid. Au point de rupture moyen, à 960px, le contenu et la tuile de préparation se répartissent horizontalement. En dessous, ils s’empilent. Les sections du plan et de la préparation appliquent des règles de largeur identiques à ce même point de rupture, afin de préserver un ordre logique dans le code source sur les petits écrans.
La grille de UIkit gère les gouttières en fonction des classes de grille utilisées. L’exemple utilise uk-grid-medium pour les grandes sections et uk-grid-small dans l’en-tête. N’ajoutez pas de marges arbitraires aux éléments enfants de la grille en supposant ensuite que leurs largeurs fractionnaires restent correctement réparties. Le conteneur extérieur et son remplissage assurent l’espacement par rapport aux bords ; des ajustements locaux réduisent le remplissage des cartes et la taille des titres sur mobile.
Détails de préparation avec l’état natif des composants dans le système de design UIkit
Détails de préparation avec l’état natif du composant
La classe uk-accordion-default applique le style par défaut. L’attribut uk-accordion définit multiple: true : l’ouverture d’une réponse ne ferme donc pas l’autre. Chaque élément contient un uk-accordion-title et un uk-accordion-content. L’environnement d’exécution gère l’état développé et la visibilité du contenu ; les classes CSS ne suffisent pas à fournir ce comportement.
Les deux questions répondent à des préoccupations pratiques différentes : quoi apporter et si le planificateur local réserve une place. En formulant explicitement la seconde réponse, l’interface n’insinue pas qu’une transaction externe liée à l’événement a lieu. Cette limite ne se manifeste pas uniquement dans le contenu de l’accordéon : le statut affiché précise également qu’aucune place n’a été réservée.
multiple: true permet de laisser les deux réponses ouvertes.
Le titre et le contenu doivent rester dans le même élément d’accordéon.
Le contour de focus du clavier reste visible sur chaque titre.
Séparer l’apparence de la bibliothèque de la validation de l’application dans le système de design UIkit
Séparer l’apparence de la bibliothèque de la validation de l’application
Le champ du participant utilise uk-input dans uk-form-controls, avec un véritable libellé et un texte explicatif. La validation obligatoire du navigateur empêche l’envoi si le champ est vide. L’application vérifie également les espaces seuls et applique uk-form-danger ainsi que aria-invalid lors des événements de validation, pour faire correspondre l’état visuel à l’état sémantique. La modification du champ efface l’erreur périmée.
Le choix d’une session met à jour la sélection locale et place le focus sur le champ du nom. Lors de l’envoi, un message de statut indique le participant et la session sélectionnée. Le texte est inséré avec textContent, de sorte que le balisage saisi n’est pas exécuté. Ce planificateur fonctionne localement, sans backend ; UIkit ne prête pas au formulaire des fonctionnalités d’inscription, d’enregistrement ou de notification.
Charger CSS, puis l’environnement d’exécution, puis le code de l’application dans le système de design UIkit
Charger CSS, puis Runtime, puis le code de l’application
Installez [email protected] et copiez les fichiers compilés CSS et JavaScript de dist vers les ressources locales. Chargez CSS avant la petite surcharge de mise en page, et uikit.min.js avant app.js. Les deux scripts peuvent utiliser defer afin de préserver leur ordre dans le code source après l’analyse du document. L’exemple de body fournit tous les attributs et le contenu des composants.
Le paquet d’icônes est facultatif ici, car la page n’utilise pas uk-icon. Si vous ajoutez des icônes par la suite, chargez l’environnement d’exécution correspondant et attribuez des libellés pertinents aux commandes qui ne comportent qu’une icône. Évitez de mélanger un bundle JavaScript plus récent avec une feuille de style plus ancienne sous prétexte que leurs noms de fichier correspondent : la structure des composants et leurs styles doivent provenir du même paquet dont la version est fixée.
Maintenir la stabilité des liens du sélecteur à mesure que le contenu évolue dans le système de design UIkit
Maintenir la stabilité des liens du sélecteur lorsque le contenu s’étoffe
Le sélecteur associe les éléments de navigation aux éléments de contenu selon leur ordre. Pour ajouter une session, ajoutez les deux éléments à la même position ; connect: #sessions définit la cible explicitement. Si une page comporte plusieurs sélecteurs indépendants, attribuez un ID unique à chaque cible et préservez cette relation dans l’attribut d’initialisation.
L’atelier sélectionné reste indépendant du panneau actif. Consulter une autre session ne doit pas remplacer silencieusement un choix déjà effectué dans le planificateur. Lorsque vous ajoutez des panneaux plus longs, vérifiez la grille réactive partagée et le contenu de l’accordéon dans le panneau nouvellement activé ; le dimensionnement du seul panneau initial peut masquer des problèmes de mise en page jusqu’au changement de session.
Page d’atelier utilisant les attributs natifs de UIkit
Le sélecteur est relié à #sessions ; l’accordéon autorise plusieurs sections ouvertes ; les largeurs de grille s’appliquent au point de rupture @m.
html
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
L’attribut uk-switcher initialise le comportement ; la classe uk-switcher identifie son conteneur de contenu.
Aucun pack d’icônes UIkit n’est nécessaire pour cette composition.
Comportement d’origine du plan local
Le choix des sessions et la validation relèvent de la logique de l’application, en complément des interactions natives de UIkit.
javascript
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
Ces surcharges ne correspondent pas aux valeurs officielles des jetons par défaut.
04
Configuration de l’agent de système de design UIkit
Point de départ de l’implémentation
Enregistrez les ajustements fournis pour l’écran dans style.css et le comportement du plan local dans app.js. UIkit gère le Switcher et l’Accordion. Cette composition ne nécessite pas le bundle d’icônes. Le conteneur HTML inclut l’intégralité du balisage du body ; enregistrez les exemples d’interaction et de CSS fournis sous les noms de fichiers indiqués ici.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez UIkit 3.25.25 pour enrichir le planificateur d’atelier fourni. Conservez uk-switcher avec sa connexion explicite à #sessions, l’ordre correspondant de la navigation et du contenu, les fractions responsives de uk-grid et l’accordéon natif autorisant plusieurs volets ouverts. La consultation d’une session doit rester distincte de sa sélection. La sélection doit déplacer le focus vers le champ de saisie du participant, identifié par son libellé ; une soumission ne contenant que des espaces doit afficher uk-form-danger et aria-invalid. Le statut doit indiquer la session choisie et le participant dans le cadre d’un plan local, sans prétendre qu’une place a été réservée. Chargez l’environnement d’exécution UIkit correspondant avant le script de l’application.
05
Sources et périmètre du système de design UIkit
Référence des composants natifs de UIkit 3.25.25. Les valeurs Less sont des définitions de compilation ; les ajustements locaux du titre, de l’espacement intérieur et du focus sont originaux. Aucune réservation d’événement n’est effectuée.
