Flat-UI est un ensemble de composants et de feuilles de style CSS à design plat basé sur Bootstrap, offrant des éléments d'interface modernes et épurés pour les applications web. Le composant Todo List, présent dans l'exemple docs/examples/todo-list.html, constitue une base idéale pour un système de suivi de tâches simple et productif.

Atouts principaux du composant Todo List

• Interface utilisateur claire : la hiérarchie visuelle permet de distinguer rapidement l'état et la priorité des tâches. Chaque élément comprend une icône, un titre et une description.
• Fonctionnalités de gestion flexibles : basculement de l'état d'achèvement, champ de recherche, le tout accessible via une structure HTML simple.
• Design responsive : adapté à toutes les tailles d'écran, du mobile au desktop, pour une expérience uniforme.

Structure de base du composant

Pour intégrer le composant, incluez d'abord les fichiers CSS et JavaScript de Flat-UI. Voici un exemple de structure HTML :

<div class="task-widget">
  <div class="task-search">
    <input class="task-search-field" type="search" placeholder="Rechercher" />
  </div>
  <ul class="task-list">
    <li class="task-item completed">
      <div class="task-icon fui-user"></div>
      <div class="task-content">
        <h4 class="task-title">Rencontrer <strong>Adrien</strong> à <strong>18h</strong></h4>
        <span>Times Square</span>
      </div>
    </li>
    <!-- autres tâches -->
  </ul>
</div>

La classe completed marque une tâche comme terminée.

Personnalisation du composant

Codage par couleur et icônes

Dans le fichier app/styles/modules/todo-list.scss, redéfinissez les couleurs en fonction du type de tâche :

.task-icon.fui-user { background-color: #1abc9c; }
.task-icon.fui-list { background-color: #3498db; }
.task-icon.fui-time { background-color: #f39c12; }

Ajout de la priorité

Étendez le HTML avec un indicateur visuel :

<div class="task-content">
  <h4 class="task-title">
    <span class="priority urgent">!!!</span> Corriger le bug sur le site
  </h4>
</div>

Intégration d'une date d'échéance

Utilisez le composant Datepicker de Flat-UI pour ajouter un champ de date limite à chaque tâche.

Mise en œuvre : de l'installation au déploiement

1. Récupération du framework : git clone https://github.com/designmodo/Flat-UI
2. Intégration : incluez les fichiers CSS et JS, puis ajoutez la structure HTML du widget dans un conteneur Bootstrap (par exemple <div class="col-sm-6 col-md-4">).
3. Personnalisation : modifiez le fichier SCSS comme indiqué ci-dessus, et étendez éventuellement le JavaScript pour des interactions avancées (librairie située dans app/scripts/flat-ui.js).
4. Construction et déploiement : exécutez npm install puis gulp pour compiler les assets. Copiez les fichiers générés sur votre serveur web.

Le composant Todo List de Flat-UI offre une base solide pour construire un outil de gestion de tâches efficace, facilement adaptable grâce à sa structure modulaire et son code source ouvert.