Dans cet article, nous allons démontrer l'utilisation de Flowbite dans un projet personnel pour créer une interface utilisateur moderne et performante. L'intégration sera réalisée avec NPM, en suivant les étapes nécessaires pour configurer Flowbite avec Tailwind CSS et utiliser ses composants interactifs.
Étape 1 : Configuration initiale du projet
Avant de commencer, assurez-vous d'avoir installé Node.js et NPM sur votre machine. Ensuite, créez un nouveau projet Tailwind CSS.
-
Installation de Tailwind CSS :
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p -
Configuration de
tailwind.config.js: Ajoutez les chemins des fichiers source dans la propriétécontent:
module.exports = {
content: [
"./src//*.{html,js}",
"./node_modules/flowbite//*.js"
],
theme: {
extend: {},
},
plugins: [require("flowbite/plugin")],
};
Étape 2 : Installation de Flowbite
Installez Flowbite via NPM pour accéder à ses composants :
npm install flowbite
Ajoutez les styles CSS de Flowbite dans votre fichier principal Tailwind : @import "flowbite";
Incluez également le fichier JavaScript avant la fermeture de la balise <body> :
<script src="./node_modules/flowbite/dist/flowbite.min.js"></script>
Démo : Création d'une interface utilisateur avec Flowbite
Exemple 1 : Page de connexion
<!-- Include Header -->
<header th:include="header.html"></header>
<!-- Login form -->
<section class="bg-gray-50 dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
<div class="flex flex-col justify-center">
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">We invest in the world’s potential</h1>
<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here at CollabSpace we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<a href="#" class="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg inline-flex items-center">Read more about our app
<svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
<div>
<div class="w-full lg:max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Sign in to CollabSpace</h2>
<form class="mt-8 space-y-6" action="#">
<!-- Form content -->
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required />
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="remember" aria-describedby="remember" name="remember" type="checkbox" class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" required />
</div>
<div class="ms-3 text-sm">
<label for="remember" class="font-medium text-gray-500 dark:text-gray-400">Remember this device</label>
</div>
<a href="#" class="ms-auto text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Lost Password?</a>
</div>
<button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login to your account</button>
<div class="text-sm font-medium text-gray-900 dark:text-white">
Not registered yet? <a href="register.jsp" class="text-blue-600 hover:underline dark:text-blue-500">Create account</a>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Include Footer -->
<footer th:include="footer.html"></footer>
Git_Lab-plateformedecollaborationartistique
ExplicationCe code illustre l'utilisation de Flowbite, pour créer une page de connexion responsive et stylisée.
Principales caractéristiques
-
Structure de la page : Le code utilise une mise en page à deux colonnes pour les grands écrans (
lg:grid-cols-2), avec un texte de présentation à gauche et un formulaire de connexion à droite. -
Composants Flowbite : Bien que ce code n'utilise pas de composants Flowbite spécifiques, il suit les conventions de style de Flowbite, qui sont basées sur Tailwind CSS.
-
Responsive Design : Utilisation de classes Tailwind pour ajuster la mise en page et les tailles en fonction de la taille de l'écran (ex:
lg:py-16,md:text-5xl).
Propriétés de couleur
Tailwind CSS (et par extension Flowbite) utilise un système de couleurs prédéfini. Voici quelques exemples tirés du code :
-
bg-gray-50: Fond gris clair -
dark:bg-gray-900: Fond gris foncé en mode sombre -
text-gray-900: Texte gris foncé -
dark:text-white: Texte blanc en mode sombre -
bg-blue-700: Fond bleu pour le bouton -
hover:bg-blue-800: Couleur de survol pour le bouton
Pour créer vos propres couleurs, vous pouvez étendre le thème Tailwind dans le fichier tailwind.config.js :
module.exports = {
theme: {
extend: {
colors: {
'custom-color': '#ff6b6b',
}
}
}
}
Ensuite, vous pouvez utiliser cette couleur comme ceci : bg-custom-color
Autres aspects notables
-
Mode sombre : Utilisation systématique de variantes
dark:pour adapter les styles en mode sombre. -
Accessibilité : Utilisation d'attributs
aria-pour améliorer l'accessibilité (ex:aria-describedby="remember"). -
Formulaires stylisés : Les champs de formulaire utilisent des classes Tailwind pour un style cohérent et moderne.
-
Interactions : Utilisation de classes
hover:etfocus:pour des effets d'interaction. -
SVG inline : Intégration d'icônes SVG directement dans le HTML avec des classes Tailwind pour le style.
-
Espacement : Utilisation intensive des classes d'espacement Tailwind comme
p-6,mb-4,space-y-8.
Conclusion
L’intégration de Flowbite dans un projet Tailwind CSS via NPM permet de gagner un temps précieux tout en garantissant une interface moderne, responsive et accessible. Grâce à ses composants prêts à l’emploi et son intégration fluide avec Tailwind, Flowbite s’impose comme une solution idéale pour accélérer le développement front-end sans sacrifier la qualité du design.
L’exemple présenté dans cet article démontre comment créer une page de connexion claire, esthétique et fonctionnelle, tout en respectant les bonnes pratiques de développement web. Que ce soit pour des projets personnels, professionnels ou collaboratifs, Flowbite offre une base solide pour construire des interfaces utilisateur intuitives, évolutives et harmonieuses.
Commentaires