Un framework CSS léger et utility-first basé sur flexbox. Mises en page rapides, grilles responsive et zéro dépendances.
Un seul fichier CSS sans JavaScript et sans surcharge à l'exécution. Du CSS pur qui fonctionne partout.
Entièrement construit sur flexbox pour des mises en page prévisibles et puissantes, sans la complexité des float ou des hacks grid.
Colonnes, pas de gap, padding, largeur du container, transitions et plus. Chaque aspect est contrôlé via des variables SCSS.
Du petit mobile aux écrans ultrawide : sm, md, lg, sp, mg, ut. Contrôle total à chaque taille d'écran.
Padding, marge, gap, alignement, visibilité responsive et plus. Le tout avec une convention de nommage cohérente.
Déboguez vos mises en page instantanément avec un seul ID. Visualisez les limites des colonnes, les tailles et les infos de breakpoint en un clin d'œil.
Les largeurs des colonnes sont calculées en tenant compte des gaps automatiquement. Plus de mises en page cassées à cause des calculs d'espacement.
Aucun framework JavaScript requis. Utilisez le CSS précompilé directement ou personnalisez via SCSS avec votre outil de build préféré.
Construisez des mises en page complexes en quelques secondes avec un système de grille flexible qui utilise 16 colonnes par défaut, mais configurable selon vos besoins. Gaps, pas de padding, largeurs de container et transitions sont tous personnalisables via des variables SCSS. Chaque calcul de largeur tient compte des gaps automatiquement, et six breakpoints responsive vous permettent d'adapter n'importe quelle mise en page du mobile à l'ultrawide.
Activez le mode wireframe avec un seul ID sur la balise body et visualisez instantanément la structure de votre grille mise en évidence par des contours colorés. Chaque colonne affiche le nom du breakpoint et sa taille, facilitant la détection des problèmes d'alignement et le réglage de vos mises en page responsive avant la production.
Chaque breakpoint utilise une approche mobile-first avec des media queries min-width. Les classes suivent le pattern fl-{breakpoint}-{propriété}-{valeur} pour une API cohérente et prévisible.
smmdlgspmgutChoisissez votre méthode préférée : installez via npm pour personnaliser les colonnes, gaps, padding, largeur du container, transitions et plus via SCSS — ou incluez le lien CDN pour zéro configuration.
npm install @daveaki/flexocss<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">