Adm'in.2

Une interface d'administration légère et complète

L'auteur de ce sujet a trouvé une solution à son problème.
Staff
Auteur du sujet

Hello les agrumes !

Comme ça fait longtemps que je n'ai pas créé de sujet par ici, je me suis dit que j'allais vous parler d'un projet que j'ai mis en place depuis quelque temps : Adm'in.2.

Le principe est simple : fournir une template pour créer des interfaces d'administration simples et jolies, sans passer par des outils lourds comme Bootstrap et jQuery.

Je suis donc parti d'un constat simple : garder les choses simples, ça passe par oublier les vieux navigateurs. À partir de là il n'y avait plus qu'à profiter des joies du duo HTML5/CSS3.

Aperçu de l'interface

Un repo Git

Le projet étant open-source, les sources sont entièrement sur le repo GitHub.

Ça veut dire que vous pouvez contribuer, que vous soyez développeurs ou non !

Une documentation claire

GitHub permettant de mettre en place un site statique simplement, j'en ai profité pour proposer une documentation une ligne que je complète au fur et à mesure. J'essaie de faire en sorte qu'elle soit aussi claire que possible, n'hésitez pas à faire des retours si certains points sont encore obscurs. ;)

Du CSS simple avec LESS

Le plus gros de l'interface est fait avec LESS, qui est ensuite compilé en CSS : ça permet de ne pas alourdir inutilement le HTML ni le JS : pas de balises inutiles, pas de code inutile.

En plus, LESS permet de personnaliser l'interface : les couleurs sont définies sous forme de variables, ce qui permet d'adapter le thème très facilement.

Du JS vanilla, le meilleur des frameworks

Pour rester léger jusqu'au bout, les frameworks et librairies sont exclus de base. Je vous rassure, rien de vous empêche d'en utiliser : tout le code (y compris celui des plugins) est regroupé sous la variable Admin2 pour éviter les conflits.

Des plugins pour beaucoup de choses

Comme les interfaces de gestion nécessitent souvent des fonctionnalités plus avancées, des plugins ont été créés pour mettre en place différente choses :

  • Des toasts, façon Android, pour notifier discrètement
  • Des tabs pour regrouper des contenus sous forme d'onglets
  • Un éditeur de texte (WYSIWYM) : basique mais facilement extensible et personnalisable
  • Du tri par drag'n'drop pour ordonner des éléments facilement

Les plugins nécessitent pour la plupart du JS spécifique. Certains nécessitent également quelques lignes de CSS en plus (comme les toasts ou les tabs).

D'où viennent les idées ?

L'origine du projet vient tout simplement d'une envie personnelle de créer quelque chose d'utile et léger, tout en ayant un côté visuel agréable.

J'ai ensuite décider d'utiliser cette interface pour l'administration de mon site pro lorsque je l'ai refait. Cela m'aura permis d'améliorer quelques détails.

Ensuite un client ayant eu besoin d'un back-office sur mesure pour un projet (une appli mobile), j'ai encore utilisé Adm'in.2. Ce projet m'aura d'ailleurs permis d'introduire quelques nouveautés (comme les sortables par exemple).

Tout cela pour dire que le projet s'appuie sur des exemples concrets : les fonctionnalités ne sont donc pas là pour faire joli mais pour être utiles.

Une démo pour tester tout ça

Si vous souhaitez voir à quoi ça ressemble (en plus de la doc qui montre l'interface de base), n'hésitez pas à faire un tour sur la démo. Il s'agit en réalité de ma page de développement/test, mais ça permet de se faire une idée des principales fonctionnalités. ;)

Et pour la suite ?

C'est bien beau de présenter l'existant, mais il faut bien regarder vers l'avant un peu !

Résoudre quelques petits bugs

Forcément, qui dit développement, dit bugs ! :P Certains sont déjà repérés, il faudra donc les fixer. Quant aux autres, vous pouvez les signaler.

De nouveaux plugins

Des modals, par exemple, seraient les bienvenues. C'est en tout cas une des idées dans les cartons

Des releases plus claires

Actuellement le code est versionné via Git, mais il n'y a pas de numéros ni de releases. C'est quelque chose d'important pour la suite. Ce point implique aussi de proposer le code prêt à l'emploi (LESS compilé, JS assemblé) autre part que sur la page de démo/tests.

Si vous avez des idées pour gérer tout ça, n'hésitez pas à commenter l'issue en question.

Faciliter l'intégration avec d'autres systèmes

Le point qui veut tout dire et rien qui en même temps. ^^

L'idée est à la fois de permettre une intégration aux systèmes de génération d'interfaces (suite à la question de Kje), mais aussi de proposer une intégration avec les principaux gestionnaires de paquets (npm, composer…) pour pourvoir installer et utiliser rapidement et simplement tout ça.


Voili voilou, n'hésitez pas à me faire part de vos retours : s'il y a des points qui posent problème ou des fonctionnalités qui vous intéresseraient, profitez-en ! :D

Édité par viki53

Staff
Auteur du sujet

Merci victor, j'espère que ça te sera utile et que tu en seras satisfait :)


Honnêtement je ne me suis pas vraiment penché sur le sujet (n'ayant jamais utilisé d'outils du genre). Je pense que ça dépend des outils.

C'est principalement des class html à appliquer, comme Bootstrap ou autres, donc ça devrait pas être trop compliqué.

Côté CSS et JS, il y a moyen de tout compresser (il y a un fichier Gulp pour ça) manuellement (pour sélectionner les plugins par exemple), sinon les fichiers sont récupérables sur la démo.

Édité par viki53

Staff
Auteur du sujet

Bonjour bonjour !

Avec la conférence de Google hier, Material Design a un peu évolué, j'ai donc commencé à apporter quelques modifications sur le projet.

La première (et pas des moindres) : les icônes sont là ! :D

J'utilise tout simplement la typo Material Icons pour cela.

La doc sera bientôt mise à jour, ainsi que certains plugins (comme l'éditeur de texte qui l'est déjà). ;)

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte