Démarrer
Flexocss est un framework CSS léger basé sur flexbox. Il offre une grille responsive à 16 colonnes, des classes utilitaires et un mode wireframe pour le débogage. Pas de JavaScript, zéro dépendances.
Installation
Vous pouvez installer flexocss via npm pour une personnalisation complète en SCSS, ou inclure le CSS précompilé via CDN sans aucune configuration.
npm
Installez le paquet depuis npm :
npm install @daveaki/flexocssPuis importez-le dans votre fichier SCSS :
@use "@daveaki/flexocss/scss/flexo";Pour remplacer les variables de configuration par défaut, utilisez la syntaxe with :
@use "@daveaki/flexocss/scss/config" with (
$box: 12,
$gapStep: 4
);
@use "@daveaki/flexocss/scss/flexo";CDN
Incluez le CSS directement dans votre HTML pour un setup rapide avec les paramètres par défaut :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">Structure de base
Flexocss utilise trois niveaux d'imbrication : container, row et fl-box. La grille utilise 16 colonnes par défaut.
<div class="container">
<div class="row">
<div class="fl-box fl-8">Column 8/16</div>
<div class="fl-box fl-8">Column 8/16</div>
</div>
</div>Exemple en direct
Voici ce que fait chaque classe :
.container— centre le contenu et définit une largeur maximale..container.fluid— rend le container pleine largeur..row— crée une rangée flex qui enveloppe ses enfants..fl-box— définit un élément flex (colonne)..fl-{n}— définit la largeur de la colonne, oùnest une valeur de 1 à 16.
Layout responsive
Ajoutez les préfixes de breakpoints pour modifier la largeur des colonnes à différentes tailles d'écran. Flexocss suit une approche mobile-first : les breakpoints plus petits s'appliquent vers le haut sauf s'ils sont remplacés.
<div class="fl-box fl-16 fl-lg-8 fl-sp-5">
Responsive column
</div>Cette colonne occupe toute la largeur sur mobile (fl-16), la moitié sur tablette (fl-lg-8) et environ un tiers sur desktop (fl-sp-5).