đ
Layouts CSS purs
Ces layouts sont des structures CSS réutilisables utilisant Grid et Flexbox.
Copie les classes CSS et adapte-les Ă tes besoins !
1. Layout 3 Colonnes
Cas d'usage : Dashboard, admin panels, applications avec liste + détails + activité.
Responsive : 3 colonnes â 2 colonnes (tablette) â 1 colonne (mobile).
Details
(400px)
Main
(flex)
<div class="layout-3col">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
/* CSS */
.layout-3col {
display: grid;
grid-template-columns: 280px 400px 1fr;
gap: var(--spacing-4);
}
/* Variante : colonnes Ă©gales */
<div class="layout-3col equal">...</div>
2. Sidebar Left
Cas d'usage : Applications web, admin panels, documentation.
Responsive : Sidebar masquée sur mobile.
<div class="layout-sidebar-left">
<aside>Sidebar</aside>
<main>Content</main>
</div>
/* Variantes */
.layout-sidebar-left.narrow /* 200px */
.layout-sidebar-left.wide /* 320px */
3. Holy Grail Layout
Cas d'usage : Sites web classiques, blogs, portails.
Responsive : Empilage vertical sur mobile.
Nav
(200px)
Main Content
Aside
(200px)
<div class="layout-holy-grail">
<header class="layout-holy-grail-header">...</header>
<nav class="layout-holy-grail-nav">...</nav>
<main class="layout-holy-grail-main">...</main>
<aside class="layout-holy-grail-aside">...</aside>
<footer class="layout-holy-grail-footer">...</footer>
</div>
4. Split Screen
Cas d'usage : Landing pages, comparaisons, avant/aprĂšs.
Responsive : Empilage vertical sur mobile.
Left Side
(50%)
Right Side
(50%)
<div class="layout-split">
<div>Left</div>
<div>Right</div>
</div>
/* Variantes */
.layout-split.split-30-70 /* 30% / 70% */
.layout-split.split-70-30 /* 70% / 30% */
5. Header + Content
Cas d'usage : Applications simples, pages de contenu.
Option : Header sticky disponible.
<div class="layout-header-content">
<header>...</header>
<main>...</main>
</div>
/* Variante sticky */
<div class="layout-header-content layout-header-content-sticky">
<header class="layout-header">...</header>
<main>...</main>
</div>
6. App Layout (Header + Nav + Main)
Cas d'usage : Applications web modernes, SaaS.
Responsive : Nav masquée sur mobile.
<div class="layout-app">
<header class="layout-app-header">...</header>
<nav class="layout-app-nav">...</nav>
<main class="layout-app-main">...</main>
</div>
7. Masonry / Auto Grid
Cas d'usage : Galeries, portfolios, cartes de contenu.
Responsive : Adaptation automatique selon largeur disponible.
Item 1
Item 2
Item 4
Item 5
Item 6
<div class="layout-masonry">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
...
</div>
/* Variante dense */
<div class="layout-masonry dense">...</div>
8. Dashboard Grid
Cas d'usage : Dashboards complexes, analytics, monitoring.
Responsive : RĂ©organisation automatique selon Ă©cran.
Stats / KPIs
Main Content
Activity
<div class="layout-dashboard">
<header class="layout-dashboard-header">...</header>
<aside class="layout-dashboard-sidebar">...</aside>
<section class="layout-dashboard-stats">...</section>
<main class="layout-dashboard-content">...</main>
<aside class="layout-dashboard-aside">...</aside>
</div>
9. Centered Content
Cas d'usage : Pages de login, erreurs, confirmations, formulaires.
Centered Content
(max-width: 600px)
<div class="layout-centered">
<div class="layout-centered-content">
<h1>Login</h1>
<form>...</form>
</div>
</div>
â
Tous les layouts sont responsive !
Redimensionne ta fenĂȘtre pour voir les adaptations.
Le CSS est dans css/layouts.css et déjà inclus dans dist/uikit.css.