Uikit
Framework-Css
Composants
Découvrez UIkit, le framework CSS modulaire : installation, grille, composants et JS en exemples pratiques.
Introduction — Qu'est-ce que UIkit ?
UIkit est un framework CSS/JS open-source développé par YOOtheme, une société spécialisée dans les thèmes et extensions pour Joomla et WordPress. Disponible depuis 2013, UIkit est aujourd'hui à sa version 3 — une réécriture complète, plus légère, modulaire et moderne.
Contrairement à Bootstrap qui repose sur des classes d'activation, UIkit utilise
principalement des attributs HTML personnalisés (comme
uk-grid, uk-slider, uk-modal) pour activer
ses composants. Cela produit un HTML sémantiquement plus propre et plus déclaratif.
À retenir : UIkit est un framework modulaire.
Vous importez uniquement les composants dont vous avez besoin (via npm),
ou vous chargez le bundle complet via CDN. Son approche basée sur les
attributs HTML le distingue de Bootstrap.
UIkit s'adresse aux intégrateurs web, développeurs front-end et équipes travaillant sur des CMS comme Joomla, WordPress ou des projets custom. Il propose une suite complète : grille responsive, navigation, formulaires, modales, sliders, notifications, drag & drop, et bien plus — tout en restant léger (~130 ko minifié+gzippé).
Les points forts de UIkit 3
- Modulaire : plus de 40 composants indépendants
- Personnalisable : variables Less/SASS pour les thèmes
- Accessibilité : attributs ARIA intégrés dans les composants JS
- RTL : support natif des langues de droite à gauche
- Dark mode : thème sombre officiel inclus
- Léger : pas de dépendance jQuery depuis la v3
/* UIkit version 3 — statistiques */
Taille CSS min+gz : ~34 ko
Taille JS min+gz : ~40 ko
Total bundle : ~74 ko
Composants : 40+
Étoiles GitHub : 18 000+
Dépendance jQuery : ✗ (vanilla JS depuis UIkit 3)
Support IE11 : ✗ (navigateurs modernes uniquement)Installation et démarrage rapide
UIkit peut être intégré de trois façons : via CDN (la plus rapide), via npm pour les projets modernes avec bundler, ou en téléchargeant les fichiers directement. Voici comment démarrer en quelques minutes.
1. Via CDN (démarrage immédiat)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon projet UIkit</title>
<!-- UIkit CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/css/uikit.min.css">
</head>
<body>
<!-- Votre contenu ici -->
<!-- UIkit JS (en bas du body pour la performance) -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit-icons.min.js"></script>
</body>
</html>
Pourquoi charger le JS en bas du body ?
Placer les scripts JS avant
</body> évite de bloquer
le rendu HTML. Le CSS, lui, doit toujours être dans <head>
pour éviter le flash de contenu non stylé (FOUC).
2. Via npm (projets modernes)
# Installation npm
npm install uikit
# Import dans votre fichier JavaScript principal
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
// Charger le plugin d'icônes
UIkit.use(Icons);
# Import CSS (dans votre fichier .scss ou .css principal)
@import 'uikit/src/scss/variables-theme.scss'; /* surcharge des variables */
@import 'uikit/src/scss/uikit.scss'; /* tout UIkit */3. Import modulaire (tree-shaking)
/* Avec un bundler (Vite, Webpack), importer uniquement les composants utiles */
import UIkit from 'uikit/dist/js/uikit-core'; /* noyau sans les composants */
/* Importer uniquement ce dont on a besoin */
import Modal from 'uikit/src/js/components/modal';
import Dropdown from 'uikit/src/js/components/dropdown';
import Tooltip from 'uikit/src/js/components/tooltip';
UIkit.component('modal', Modal);
UIkit.component('dropdown', Dropdown);
UIkit.component('tooltip', Tooltip);Structure d'une page UIkit minimale
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIkit — Démarrage</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/css/uikit.min.css">
</head>
<body>
<!-- Conteneur principal -->
<div class="uk-container uk-margin-large-top">
<h1 class="uk-heading-medium">Bonjour UIkit !</h1>
<p class="uk-text-lead">Mon premier projet avec UIkit 3.</p>
<a href="#" class="uk-button uk-button-primary">Commencer</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit-icons.min.js"></script>
</body>
</html>La grille UIkit
La grille UIkit est basée sur Flexbox. Elle s'active
via l'attribut uk-grid sur un conteneur, et les colonnes
sont définies avec les classes uk-width-*. Contrairement
à Bootstrap, il n'y a pas de classes col-md-6 numérotées :
les largeurs sont exprimées en fractions (1/2, 1/3, 2/5…).
Grille de base
<!-- uk-grid active la grille Flexbox + gestion des gouttières -->
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">Colonne 1</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Colonne 2</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Colonne 3</div>
</div>
</div>
<!--
uk-grid-small → petite gouttière entre les colonnes
uk-child-width-1-2@s → 2 colonnes à partir de 640px (sm)
uk-child-width-1-3@m → 3 colonnes à partir de 960px (md)
-->Les suffixes responsive (@s, @m, @l, @xl)
<!-- UIkit utilise des suffixes pour le responsive -->
<!-- @s = ≥640px | @m = ≥960px | @l = ≥1200px | @xl = ≥1600px -->
<div class="uk-child-width-1-1 /* mobile : 1 colonne */
uk-child-width-1-2@s /* 640px+ : 2 colonnes */
uk-child-width-1-3@m /* 960px+ : 3 colonnes */
uk-child-width-1-4@l" /* 1200px+: 4 colonnes */
uk-grid>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>Largeurs de colonnes individuelles
<!-- Contrôle individuel des colonnes -->
<div uk-grid>
<!-- Colonne qui prend 2/3 de la largeur sur desktop -->
<div class="uk-width-2-3@m">
<p>Contenu principal</p>
</div>
<!-- Colonne qui prend 1/3 de la largeur sur desktop -->
<div class="uk-width-1-3@m">
<p>Sidebar</p>
</div>
</div>
<!-- Toutes les fractions disponibles -->
<!-- uk-width-1-2 = 50% | uk-width-1-3 = 33.33% -->
<!-- uk-width-2-3 = 66.66% | uk-width-1-4 = 25% -->
<!-- uk-width-3-4 = 75% | uk-width-1-5 = 20% -->
<!-- uk-width-auto = contenu | uk-width-expand = remplit l'espace -->Gouttières et espacements de grille
<!-- Modifier l'espacement entre les colonnes -->
<div class="uk-grid-collapse" uk-grid>...</div> <!-- 0 gouttière -->
<div class="uk-grid-small" uk-grid>...</div> <!-- petite -->
<div class="uk-grid-medium" uk-grid>...</div> <!-- medium (défaut) -->
<div class="uk-grid-large" uk-grid>...</div> <!-- grande -->
<!-- Grille avec divider vertical -->
<div class="uk-grid-divider" uk-grid>
<div class="uk-width-1-2@m">Colonne gauche</div>
<div class="uk-width-1-2@m">Colonne droite</div>
</div>
<!-- Résultat : une ligne verticale sépare les colonnes -->
Avantage UIkit vs Bootstrap : La grille UIkit gère
automatiquement les nested grids (grilles imbriquées) sans
les problèmes de marge négative de Bootstrap 4. De plus,
uk-grid-match aligne automatiquement les cartes
à la même hauteur dans chaque rangée.
Composants CSS essentiels
UIkit fournit une bibliothèque complète de composants CSS prêts à l'emploi. Voici les plus utilisés dans un projet web standard.
Les boutons
<!-- Styles de boutons -->
<button class="uk-button uk-button-default">Défaut</button>
<button class="uk-button uk-button-primary">Primaire</button>
<button class="uk-button uk-button-secondary">Secondaire</button>
<button class="uk-button uk-button-danger">Danger</button>
<button class="uk-button uk-button-text">Texte</button>
<button class="uk-button uk-button-link">Lien</button>
<!-- Tailles -->
<button class="uk-button uk-button-primary uk-button-small">Petit</button>
<button class="uk-button uk-button-primary uk-button-large">Grand</button>
<!-- Bouton avec icône UIkit -->
<button class="uk-button uk-button-primary">
<span uk-icon="icon: check; ratio: 0.8"></span>
Valider
</button>
<!-- Bouton pleine largeur -->
<button class="uk-button uk-button-secondary uk-width-1-1">Pleine largeur</button>Les cards
<!-- Card standard -->
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Titre de la card</h3>
<p>Contenu de la card avec du texte descriptif.</p>
</div>
<!-- Card avec image en en-tête -->
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="image.jpg" alt="Description" loading="lazy">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Titre</h3>
<p>Description de l'article ou du produit.</p>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-text">En savoir plus</a>
</div>
</div>
<!-- Variantes de cards -->
<div class="uk-card uk-card-primary uk-card-body">Card primaire (fond coloré)</div>
<div class="uk-card uk-card-secondary uk-card-body">Card secondaire (fond foncé)</div>
<div class="uk-card uk-card-hover uk-card-body">Card avec hover effect</div>La navigation
<!-- Navbar UIkit -->
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="/">MonSite</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="/">Accueil</a></li>
<!-- Menu déroulant -->
<li>
<a href="#">Services</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="/web">Développement Web</a></li>
<li><a href="/design">Design UI/UX</a></li>
<li class="uk-nav-divider"></li>
<li><a href="/seo">SEO</a></li>
</ul>
</div>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</nav>Les formulaires
<!-- Formulaire UIkit -->
<form class="uk-form-stacked">
<!-- Champ texte avec label empilé -->
<div class="uk-margin">
<label class="uk-form-label" for="name">Nom</label>
<div class="uk-form-controls">
<input id="name" class="uk-input" type="text"
placeholder="Votre nom" required>
</div>
</div>
<!-- Select -->
<div class="uk-margin">
<label class="uk-form-label" for="category">Catégorie</label>
<div class="uk-form-controls">
<select id="category" class="uk-select">
<option value="">Choisir…</option>
<option value="front">Front-end</option>
<option value="back">Back-end</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="uk-margin">
<label class="uk-form-label" for="message">Message</label>
<div class="uk-form-controls">
<textarea id="message" class="uk-textarea" rows="5"
placeholder="Votre message"></textarea>
</div>
</div>
<!-- État d'erreur -->
<div class="uk-margin">
<input class="uk-input uk-form-danger" type="email"
placeholder="Email invalide" value="adresse@">
<!-- uk-form-danger : bordure rouge -->
<!-- uk-form-success : bordure verte -->
</div>
<button class="uk-button uk-button-primary" type="submit">Envoyer</button>
</form>Alerts et notifications
<!-- Alertes statiques -->
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Message d'information primaire.</p>
</div>
<div class="uk-alert-success" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Opération réalisée avec succès !</p>
</div>
<div class="uk-alert-warning" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Attention, vérifiez vos données.</p>
</div>
<div class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Erreur ! L'opération a échoué.</p>
</div>
<!-- Notification dynamique via JavaScript -->
<script>
// Afficher une notification flottante
UIkit.notification({
message: 'Article sauvegardé avec succès !',
status: 'success', // primary | success | warning | danger
pos: 'top-right', // top-right | top-center | top-left | bottom-*
timeout: 3000 // durée en millisecondes
});
</script>Composants JavaScript interactifs
UIkit brille particulièrement grâce à ses composants interactifs, tous activés via des attributs HTML sans avoir à écrire une seule ligne de JavaScript. Ils embarquent automatiquement la gestion du focus, les attributs ARIA et les transitions CSS.
La Modal (fenêtre modale)
<!-- Bouton déclencheur -->
<button class="uk-button uk-button-primary" uk-toggle="target: #modal-exemple">
Ouvrir la modale
</button>
<!-- Définition de la modale -->
<div id="modal-exemple" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Titre de la modale</h2>
<p>Contenu de la modale. Peut contenir n'importe quel HTML.</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">
Annuler
</button>
<button class="uk-button uk-button-primary" type="button">
Confirmer
</button>
</p>
</div>
</div>
<!-- Ouvrir programmatiquement via JS -->
<script>
var modal = UIkit.modal('#modal-exemple');
modal.show(); // Ouvrir
modal.hide(); // Fermer
</script>L'Accordion (accordéon)
<!-- Accordéon UIkit -->
<ul uk-accordion>
<li class="uk-open"> <!-- uk-open = ouvert par défaut -->
<a class="uk-accordion-title" href="#">
Section 1 — Installation
</a>
<div class="uk-accordion-content">
<p>Contenu de la section 1. Installez UIkit via npm ou CDN.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Section 2 — Grille</a>
<div class="uk-accordion-content">
<p>La grille UIkit est basée sur Flexbox avec des attributs simples.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Section 3 — Personnalisation</a>
<div class="uk-accordion-content">
<p>Utilisez les variables Less/SASS pour personnaliser les thèmes.</p>
</div>
</li>
</ul>
<!-- Permettre plusieurs sections ouvertes simultanément -->
<ul uk-accordion="multiple: true">
...
</ul>Le Slider et le Slideshow
<!-- Slider horizontal (cartes qui défilent) -->
<div class="uk-position-relative uk-visible-toggle" uk-slider>
<div class="uk-slider-container uk-light">
<ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
<li>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="img/photo1.jpg" alt="Photo 1" loading="lazy">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Slide 1</h3>
</div>
</div>
</li>
<!-- Répéter pour chaque slide -->
</ul>
</div>
<!-- Boutons précédent / suivant -->
<a class="uk-position-center-left uk-position-small" href="#"
uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small" href="#"
uk-slidenav-next uk-slider-item="next"></a>
</div>
<!-- Slideshow plein écran avec effet fondu -->
<div class="uk-position-relative uk-visible-toggle" uk-slideshow="animation: fade; autoplay: true; autoplay-interval: 4000">
<ul class="uk-slideshow-items">
<li>
<img src="img/hero1.jpg" alt="Hero 1" uk-cover>
</li>
<li>
<img src="img/hero2.jpg" alt="Hero 2" uk-cover>
</li>
</ul>
<a class="uk-position-center-left" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>Le Tooltip et le Dropdown
<!-- Tooltip (infobulle) -->
<button class="uk-button uk-button-default"
uk-tooltip="Ceci est une infobulle">
Survole-moi
</button>
<!-- Tooltip avec position -->
<span uk-tooltip="title: En haut à gauche; pos: top-left">Positionnement</span>
<!-- Dropdown -->
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">
Menu
</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Profil</a></li>
<li><a href="#">Paramètres</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Déconnexion</a></li>
</ul>
</div>
</div>
<!-- Dropdown déclenché au clic (pas au survol) -->
<div uk-dropdown="mode: click; pos: bottom-justify">...</div>
Note : Tous les composants JavaScript UIkit gèrent
automatiquement les attributs ARIA (
aria-expanded,
aria-hidden, role…) et le piège de focus
dans les modales. Vous obtenez une accessibilité de base
sans effort supplémentaire.
Les utilitaires UIkit
UIkit fournit un système d'utilitaires riche pour la typographie, les espacements, le positionnement et la visibilité. Ces classes s'utilisent directement dans le HTML sans écrire de CSS custom.
Typographie
<!-- Tailles de texte -->
<p class="uk-text-small">Texte petit (0.875rem)</p>
<p class="uk-text-lead">Texte lead, accroche d'introduction</p>
<h1 class="uk-heading-small">Titre moyen</h1>
<h1 class="uk-heading-medium">Titre large</h1>
<h1 class="uk-heading-large">Titre très large</h1>
<h1 class="uk-heading-xlarge">Titre XL</h1>
<!-- Alignement -->
<p class="uk-text-left">Aligné à gauche</p>
<p class="uk-text-center">Centré</p>
<p class="uk-text-right">Aligné à droite</p>
<!-- Couleurs de texte -->
<p class="uk-text-primary">Texte couleur primaire</p>
<p class="uk-text-success">Texte succès (vert)</p>
<p class="uk-text-warning">Texte alerte (orange)</p>
<p class="uk-text-danger">Texte erreur (rouge)</p>
<p class="uk-text-muted">Texte secondaire (gris)</p>
<!-- Poids et style -->
<span class="uk-text-bold">Gras</span>
<span class="uk-text-italic">Italique</span>
<span class="uk-text-uppercase">Majuscules</span>
<span class="uk-text-truncate">Tronqué avec points de suspension si trop long…</span>Espacements
<!-- Marges -->
<div class="uk-margin">Marge standard (bottom)</div>
<div class="uk-margin-small">Petite marge</div>
<div class="uk-margin-medium">Marge medium</div>
<div class="uk-margin-large">Grande marge</div>
<div class="uk-margin-xlarge">Très grande marge</div>
<div class="uk-margin-remove">Supprime toutes les marges</div>
<!-- Direction des marges -->
<div class="uk-margin-top">Marge en haut uniquement</div>
<div class="uk-margin-bottom">Marge en bas uniquement</div>
<div class="uk-margin-left">Marge à gauche</div>
<div class="uk-margin-right">Marge à droite</div>
<!-- Padding -->
<div class="uk-padding">Padding standard (tous côtés)</div>
<div class="uk-padding-small">Petit padding</div>
<div class="uk-padding-large">Grand padding</div>
<div class="uk-padding-remove">Supprime le padding</div>Visibilité responsive
<!-- Masquer selon la taille d'écran -->
<div class="uk-visible@m">Visible uniquement à partir de 960px</div>
<div class="uk-hidden@m">Masqué à partir de 960px</div>
<div class="uk-visible@s">Visible à partir de 640px</div>
<div class="uk-hidden@s">Masqué à partir de 640px</div>
<!-- Masquer complètement (display:none) -->
<div class="uk-hidden">Toujours caché</div>
<!-- Visible uniquement pour les lecteurs d'écran -->
<span class="uk-invisible">Invisible visuellement, visible aux lecteurs d'écran</span>Flex et alignement
<!-- Utilitaires flex -->
<div class="uk-flex uk-flex-center uk-flex-middle">
<p>Centré horizontalement et verticalement</p>
</div>
<div class="uk-flex uk-flex-between uk-flex-wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Flex inline -->
<div class="uk-flex uk-flex-inline">...</div>
<!-- Responsive (colonne sur mobile, ligne sur desktop) -->
<div class="uk-flex-column uk-flex-row@m uk-flex-center">
<div>Item A</div>
<div>Item B</div>
</div>Personnalisation et thèmes
UIkit est conçu pour être personnalisé en profondeur. La méthode recommandée est la surcharge des variables Less ou SASS lors de la compilation. Pour les projets sans bundler, des surcharges CSS suffisent pour la plupart des besoins.
Surcharge CSS sans compilation
/* Après le chargement de uikit.min.css,
ajoutez votre feuille de style personnalisée */
/* Changer la couleur primaire */
:root {
--uk-primary: #6366f1; /* indigo */
}
/* Surcharger les composants directement */
.uk-button-primary {
background-color: #6366f1;
border-color: transparent;
}
.uk-button-primary:hover {
background-color: #4f46e5;
}
/* Modifier le border-radius des cards */
.uk-card {
border-radius: 12px;
overflow: hidden;
}
/* Personnaliser les inputs */
.uk-input,
.uk-select,
.uk-textarea {
border-radius: 8px;
border-color: #e5e7eb;
}Personnalisation via SASS (méthode recommandée)
/* fichier : _variables.scss (AVANT l'import de UIkit) */
/* Couleurs globales */
$global-primary-background: #6366f1; /* couleur primaire */
$global-secondary-background: #1e1b4b; /* couleur secondaire */
$global-success-background: #22c55e;
$global-warning-background: #f59e0b;
$global-danger-background: #ef4444;
/* Typographie */
$global-font-family: 'Inter', sans-serif;
$global-font-size: 16px;
$global-line-height: 1.6;
/* Border radius */
$border-rounded-border-radius: 8px;
$card-border-radius: 12px;
$button-border-radius: 6px;
/* Espacement */
$global-margin: 20px;
$global-small-gutter: 10px;
$global-gutter: 20px;
$global-large-gutter: 40px;
/* Dans votre fichier SASS principal */
@import 'variables'; /* vos surcharges EN PREMIER */
@import 'uikit/src/scss/uikit'; /* UIkit EN SECOND */Le thème sombre officiel
<!-- UIkit inclut un thème sombre officiel -->
<!-- Remplacer uikit.min.css par uikit-rtl.min.css pour RTL -->
<!-- Charger le thème sombre à la place du thème clair -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/css/uikit.min.css">
<!-- Activer le dark mode via l'attribut -->
<div class="uk-section uk-section-muted" uk-height-viewport>
<!-- Contenu dans une section avec fond clair -->
</div>
/* Pour un dark mode personnalisé via CSS */
@media (prefers-color-scheme: dark) {
:root {
--uk-background: #0f0f0f;
--uk-global-color: #e5e5e5;
--uk-card-background: #1c1c1c;
}
}UIkit vs Bootstrap 5 : comparatif
Bootstrap 5 et UIkit 3 sont deux frameworks CSS de premier plan, mais ils ont des philosophies différentes. Voici un comparatif structuré pour vous aider à choisir le bon outil selon votre projet.
| Critère | UIkit 3 | Bootstrap 5 |
|---|---|---|
| Taille bundle | ~74 ko (min+gz) | ~56 ko CSS + ~17 ko JS |
| Syntaxe d'activation | Attributs HTML (uk-modal) |
Classes CSS (data-bs-toggle) |
| Grille | Fractions (1/2, 1/3…) | 12 colonnes numériques |
| Composants avancés | Slider, Sortable, Upload, Filter… | Offcanvas, Floating Labels… |
| Personnalisation | Variables Less/SASS | Variables CSS + SASS |
| Communauté | Moyenne (18k GitHub) | Très large (170k GitHub) |
| Accessibilité | ARIA intégrés dans les composants JS | ARIA intégrés + docs WCAG |
| RTL | Natif (fichier CSS dédié) | Bootstrap RTL disponible |
| Idéal pour | CMS (Joomla/WordPress), projets custom | Prototypes rapides, projets standard |
Exemple comparatif : une card responsive
<!-- === UIkit 3 === -->
<div class="uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-media-top">
<img src="image.jpg" alt="Titre">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Titre</h3>
<p>Description</p>
<a href="#" class="uk-button uk-button-primary uk-button-small">Lire</a>
</div>
</div>
</div>
</div>
<!-- === Bootstrap 5 (équivalent) === -->
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100">
<img src="image.jpg" class="card-img-top" alt="Titre">
<div class="card-body">
<h5 class="card-title">Titre</h5>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary btn-sm">Lire</a>
</div>
</div>
</div>
</div>
Quand choisir UIkit ?
- Vous travaillez avec Joomla ou WordPress + YOOtheme
- Vous avez besoin de composants avancés (Sortable, Filter, Upload) sans plugins tiers
- Vous préférez une syntaxe déclarative HTML aux classes JavaScript
- Votre design doit être fortement personnalisé via SASS
Bonnes pratiques et erreurs courantes
1. Toujours charger le JS UIkit en bas du body
<!-- ❌ Chargement bloquant dans <head> -->
<head>
<script src="uikit.min.js"></script> <!-- Bloque le rendu ! -->
</head>
<!-- ✅ En bas du body -->
<body>
...contenu...
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.0/dist/js/uikit-icons.min.js"></script>
</body>2. Ne pas mélanger Bootstrap et UIkit
/* ❌ Conflits potentiels si les deux sont chargés */
/* Bootstrap et UIkit ont tous deux des classes .container,
des résets CSS et des styles de base qui entrent en conflit */
/* ✅ Choisir l'un OU l'autre pour un projet */
/* Si vous avez déjà Bootstrap : gardez Bootstrap */
/* Si vous démarrez un nouveau projet : évaluez les deux selon vos besoins */3. Utiliser uk-grid-match pour les cartes de même hauteur
<!-- ❌ Sans uk-grid-match : hauteurs différentes -->
<div class="uk-child-width-1-3@m" uk-grid>
<div><div class="uk-card uk-card-default uk-card-body">Texte court</div></div>
<div><div class="uk-card uk-card-default uk-card-body">Texte beaucoup plus long qui prend plus d'espace vertical</div></div>
</div>
<!-- ✅ Avec uk-grid-match : toutes les cards ont la même hauteur -->
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div><div class="uk-card uk-card-default uk-card-body">Texte court</div></div>
<div><div class="uk-card uk-card-default uk-card-body">Texte beaucoup plus long qui prend plus d'espace vertical</div></div>
</div>4. Surcharger les styles avec un sélecteur suffisamment spécifique
/* ❌ Trop peu spécifique : peut être écrasé par UIkit */
.uk-button {
background: #6366f1;
}
/* ✅ Plus spécifique ou utiliser les variables */
.uk-button-primary {
background-color: #6366f1 !important; /* ou mieux : via les variables SASS */
}
/* ✅ La meilleure approche : surcharger via une classe custom */
.btn-brand {
background-color: #6366f1;
color: white;
border-radius: 6px;
padding: 8px 20px;
font-weight: 600;
}5. Charger le plugin d'icônes pour utiliser uk-icon
<!-- ❌ Icône qui n'apparaît pas -->
<!-- Si uikit-icons.min.js n'est pas chargé, les icônes sont vides -->
<span uk-icon="star"></span> <!-- rien ne s'affiche -->
<!-- ✅ Charger OBLIGATOIREMENT les deux fichiers JS -->
<script src="uikit.min.js"></script>
<script src="uikit-icons.min.js"></script>
<!-- Toutes les icônes UIkit disponibles (130+) -->
<span uk-icon="heart"></span>
<span uk-icon="star"></span>
<span uk-icon="user"></span>
<span uk-icon="github"></span>
<span uk-icon="icon: arrow-right; ratio: 1.5"></span> <!-- avec taille -->
Astuce : La liste complète des icônes UIkit est
disponible dans la documentation officielle sous la section
Icon. UIkit fournit plus de 130 icônes SVG vectoriels
intégrés directement dans le fichier JS, sans requête réseau
supplémentaire.
Conclusion et ressources
UIkit 3 est un framework CSS/JS complet, moderne et élégant qui mérite sa place dans la boîte à outils de tout intégrateur web. Sa philosophie déclarative basée sur les attributs HTML, ses 40+ composants prêts à l'emploi et sa personnalisation SASS en font un choix solide — surtout pour les projets CMS ou les interfaces qui nécessitent des composants interactifs avancés sans dépendances lourdes.
Si vous travaillez avec Bootstrap sur des projets existants, pas de migration forcée. Mais pour un nouveau projet, UIkit vaut la peine d'être évalué. Sa documentation est exemplaire, sa courbe d'apprentissage douce, et ses composants bien pensés.
- Charger CSS dans
<head>, JS avant</body> - Utiliser
uk-grid+uk-child-width-*@mpour la grille responsive - Activer les composants JS via attributs HTML (
uk-modal,uk-accordion…) - Personnaliser via SASS pour les projets avec build tool
- Charger
uikit-icons.min.jssi vous utilisez des icônes - Utiliser
uk-grid-matchpour aligner les cards à la même hauteur - Ne pas mélanger Bootstrap et UIkit dans le même projet
- Ne pas oublier les suffixes responsive (@s, @m, @l) sur les classes de largeur
Ressources recommandées
- Documentation officielle UIkit — La référence absolue. Chaque composant y est documenté avec des exemples interactifs en live.
- UIkit sur GitHub — Le code source, les issues et les releases. Idéal pour suivre l'évolution du framework.
- Guide de personnalisation Less/SASS — Documentation complète sur toutes les variables disponibles pour thématiser UIkit.
- Blog YOOtheme — Articles sur l'utilisation de UIkit dans les projets CMS et les patterns avancés.
