Bonjour,
Je recherche depuis un bon bout de temps le moyen de créer un framework css que je pourrais réutiliser dans mes divers projets webs.
J'aimerais savoir comment m'y prendre :
- Les étapes de la réalisation d'un framework
- les éléments à avoir avant de commencer
- la méthodologie
- le responsive
- etc...
Par la suite, il sera couplé au JavaScript pour les fonctions "fadeIn, ....)
Dans l'idée, ce framework se nommerait "CAT" et serait le plus possible modulable pour répondre au plus possible de projets.
En finalité, il serait publique et disposerait d'un site internet dédié comprenant une documentation, etc.
Voila le petit projet...
Merci par avance pour vos réponses
6 réponses
Hello
En soit créer un framework css n'est pas vraiment compliqué.
Il suffit d'avoir une logique la plus simple possible et de si tenir. Le piege c'est les cas spéciaux.
Pour repondre à ce que tu dis:
1- Les étapes de la réalisation d'un framework
A ma connaissance, il n'existe pas de guidelines pour creer un framework. Pour moi la raison est simple; un framework est quelque chose qui resort d'une pratique soutenue AVEC une logique la plus simple possible. Chaque framework possède ses points forts et ses faiblesses. Pas de solution miracle.
2 - Les éléments à avoir avant de commencer
Faire le points sur tes propres competences. Puis être currieux sur l'évolution du css aujourd'hui.
Avec cela, tu devrait etre capable de voir les lacunes de ta façon de faire et prevoir ce qui est succeptible d'evoluer à l avenir. Ce travail ne s'arrete jamais.
3 - la méthodologie
Il n'y a pas de methodologie. Uniquement des bonnes pratiques et de la rigueur incorruptible. Je code depuis plus de 10ans et il n'y a que des cas particuliers. Les cas particuliers viennent a 75% des lacunes des framework utilisées. les 25% restant viendront de toi.
En realité un bon framework css est plutot une philosophie. C'est pour cela qu'il existe des methodes comme la "BEM" ou pire encore le "smacss sass" (avec les preprocesseur). Ne pas suivre les methodologies existantes c'est refaire la science du css des années 2000.
je t invite à regarder ce qui existe déjà AVANT de commencer ton framework afin d'identifier les points, qui pour toi, sont géant. Tu n'est pas le seul à avoir pensé à cela.
Ne pas s'intérréser à ce qu'ont fait les autres avant toi serait une erreur de débutant introvertie narcissique.
Il y a des framework tres simples qui ont rencontrés un grand success comme http://getskeleton.com
Chaque framework à son point de vue et sont utilité et qui s'adresse a diffrent niveau.
Vouloir refaire bootstrap serait totalement inutil.
Commence pour toi, puis partage ton point de vue et si les autres accroches continue. ( ils seront tous rebelles au debut; courrage ! )
je ne vois pas en quoi les préprocesseurs sont indispesnsables.
Dans ce cas là c'est que le code CSS de ton Framework ne va pas faire plus de 30 lignes (et sans qu'il soit minifié bien sûr).
Si tu regardes bien les autres Framework CSS déja existant, tu remarqueras qu'il utilisent généralement des fichier scss pour la création et la modification de leur Framework en séparant les différentes parties de codes dans plusieurs fichiers, de manière à ce que le code soit le plus maintenable possible, puis ils compilent les fichiers scss en un seul fichier css, de manière à ce qu'il ne soit indispensable de charger qu'un seul fichier css.
Voilà en quoi l'une des principales fonctionnalitées des préprocesseurs CSS est utile et qu'il est indispensable d'en utiliser un pour créer un Framework CSS ou tout simplement pour se créer ses propres fichiers CSS qui pourraient être utilisés pour plusieurs fichiers, mais si tu avais par exemple visionné la formation qu'a réalisé Grafikart, tu le saurais déja et tu ne poserais pas la question.
Exemples :
Ce n'est quand même pas pour rien s'ils utilisent des préprocesseurs CSS pour créer leur Framework et le maintenir pour le mettre à jour.
Libre à toi de ne pas utiliser de préprocesseur CSS si tu ne le veux pas, mais dans ce cas là, crées le uniquement pour ton utilisation personnelle et ne le partages pas.
Bonjour.
Pour commencer, si tu n'a jamais utilisé de préprocesseurs CSS, je te recommande fortement de t'y renseigner (par exemple SASS), car si comme tu le dis tu le voudrais le plus possible modulable, sans préprocesseur CSS tu vas rapidement être débordé.
le responsive
Si tu ne t'y connait pas trop en responsive, il est primordial que tu sois suffisament à l'aise avec.
Pour tout ceci, tu trouveras sur le site des tutoriels qui t'y aideront, bien que certains d'entre eux peuvent dater pas mal depuis leur réalisations, il te suffira de consulter des documentations pour voir les changement qu'il a pu y avoir depuis.
Dans tous les cas avec ce genre de projet, si tu n'as pas une connaissance assez poussée au niveau CSS, tu vas rapidement patauger, surtout si tu es le seul sur le projet.
Sans connaître ton niveau approximatif sur le langage, il est difficile d'être précis pour tes questions.
Bonsoir,
Je te remercie pour ta réponse ! J'ai un bon niveau en CSS mais je ne vois pas en quoi les préprocesseurs sont indispesnsables.
Je connais le principe du responsive avec les @Media mais pas encore en JS.
Pour que ton framework css soit complet, je te conseil de faire, c'est de faire un coté js, qui soit là pour rendre le systeme plus flexible au cas spéciaux, mais ne pas faire en sorte que ce soit le js qui fasse tout. Car pour ce qui desactive le js de leur navigateur sa complètement rendre ton site inutilisable. Et n'ésite pas a mettre beaucoup beaucoup de commentaire. Tu peux aussi utilisé des système comme csscomb pour nétoyer ton css. Et uilise sass, c'est simple et ça permet d'avoir une meilleur "harcitecture".
Bonjour,
Je pense qu'il a un mélange de pas mal de choses dans les réponses.
Déjà dans un framework css il n'y a pas de JS sinon comme bootstrap et foundation tu dis un front-end framework.
Deuxième chose, à la base un framework css était un fichier css qui donnais un style a différent composant d'une page de base (bouton, texte, header, etc.). Depuis un moment on utilise le terme de libraire ce genre de fichier et ce qu'on appel un framework css c'est la même chose sauf qu'on passe part du sass ou autre et on utilise beaucoup les variables pour permettre de se créer une interface sur mesure avec ses couleurs, ses tailles de colonne, etc. etc.
Pour ce qui est de ta partie animation (FadeIn, FadeOut), il te suffit de créer des classes spécifiques à l'animation et laisser le choix à l'utilisateur de les implémenter dynamiquement en js. Sinon tu va créer un front-end framework et c'est beaucoup plus compliqué.
Si tu veux voir des architectures css pour faire ton framework regarde smacss ou bem ou oocss. Il y en a d'autres, je te laisse chercher.