Partage
  • Partager sur Facebook
  • Partager sur Twitter

Création d'un framework CSS

    24 juillet 2017 à 19:10:48

    Salut tout le monde!

    Je ne suis pas trop sur d'avoir le droit (si ce n'est pas le cas n'hésitez pas à supprimer le post) mais je poste ici un début de framework open-source, sur lequel je travail en ce moment, dans le but d'avoir des avis sur son fonctionnement et éventuellement sur ce qu'il y aurait a revoir/ajouter,... etc.

    Il s'agit un framework basé sur flexbox et SASS et se veux totalement responsive et modulable.

    https://www.puzzle-framework.fr/

    Merci d'avance!

    -
    Edité par jµlienT 24 juillet 2017 à 22:13:35

    • Partager sur Facebook
    • Partager sur Twitter
      24 juillet 2017 à 20:32:14

      Salut,

      Juste pour revenir sur le "donc" : flexbox et Sass ne sont ni des garanties ni des prérequis pour faire du responsive et modulable. On peut faire totalement responsive et modulable sans l'un et l'autre, mais également les utiliser et n'avoir ni le responsive, ni la modularité.

      Voilà, je pinaille.

      Pour ce qui est du Framework en lui-même, pour l'instant il n'est pas responsive ; ou alors la doc n'en parle pas et ne le montre pas sur les exemples.

      Le gros problème que je vois, c'est que ton CSS se repose sur des sélecteurs beaucoup trop spécifiques (pour la navbar par exemple, à priori on est sur du .navbar ul li a ; pourquoi nécessairement utiliser des listes ? Que se passe-t-il si j'en imbrique ? Et si je ne veux pas utiliser de fieldset dans mon formulaire, par exemple ?

      En clair, ta modularité commence très mal : pour l'instant, il n'y a rien de modulaire là-dedans. L'utilisateur est absolument bloqué dans le schéma prévu et ne peut pas en sortir, sous peine que plus rien ne fonctionne. Tes sélecteurs doivent être légers, basés sur des classes simples ou des sélecteurs simples. La gesstion du poids des déclarations est une notion très importante dans un Framework.

      Je t'invite à te pencher sur la syntaxe BEM : https://github.com/EmmanuelBeziat/guidelines/blob/master/css/bem.md, de réfléchir à une nomenclature propre https://github.com/EmmanuelBeziat/guidelines/blob/master/css/nomenclatures.md, et d'envisager l'architecture ITCSS https://github.com/EmmanuelBeziat/guidelines/blob/master/css/itcss.md 

      Au passage, tu peux directement mettre tes sélecteurs d'attributs sans avoir à utiliser le sélecteur universel.

      Venons-en au Javascript ; actuellement il y a une dizaine de lignes pour gérer une fonctionnalité et déjà, ça requiert jQuery ; est-ce vraiment nécessaire ? As-tu prévu des fonctionnalités avancées en Javascript ? Vas-tu vraiment obliger tes futurs utilisateurs à charger une librairie lourde et vieillissante pour utiliser une fonction "sticky" ? Tant qu'on y est d'ailleurs, la fonction en question est très mal optimisée : il va faire le travail de rajouter / retirer la classe autant de fois que de lignes scrollées par l'utilisateur (même si la classe est déjà présente ou absente) ; ça va être très lourd. Il faut une vérification supplémentaire dans ta condition pour savoir si l'élément porte déjà la classe ou non.

      Pour ce qui est de la doc, la page est pleine de fautes, il faut absolument corriger ça. Et plutôt que de la faire à la main (au risque d'oublier des trucs) tu peux regarder autour des générateurs de docs ; par exemple http://atomicdocs.io/ 

      Bref, la création d'un Framework, c'est un gros boulot ; assure-toi de prendre un bon départ directement. Bon courage !

      • Partager sur Facebook
      • Partager sur Twitter

      Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

        24 juillet 2017 à 22:12:31

        Tout d'abord merci d'avoir pris le temps de me donner une réponse aussi complète!

        Concernant mon "donc", en effet ce n'est pas une garantie, je voulais dire par là que l'on peut tout à fais retirer les différentes parties/module de mon "framework" sans que cela ne dérange le reste. Toutes les parties sont indépendantes, mais peuvent ajouter un comportement supplémentaire comme celle contenant les media queries.

        Pour l'instant il consiste principalement en la grille flexbox, le reste n'est, comme tu l'as bien fais remarquer, que des briques que j'ai utilisée plus ou moins récemment et que je compte épurée/améliorer au fur et à mesure.

        Cependant ma grille flexbox s'adapte parfaitement aux différents affichages que j'ai pu essayer (et il y en a pas mal), donc, au risque de paraître buté, j'avoue ne pas comprendre pourquoi tu me dis que ce n'est pas responsive...

        Pour préciser le contexte, il s'agit essentiellement d'un travail personnel, mais si ça peut finir par servir à quelque chose c'est quand même plus sympa ^^

        Quoi qu'il en soit encore merci pour toutes les pistes de travail dont tu m'as fait pars!

        -
        Edité par jµlienT 24 juillet 2017 à 22:24:52

        • Partager sur Facebook
        • Partager sur Twitter
          24 juillet 2017 à 22:19:59

          En effet, j'avais pas bien vu l'évolution ; mais du coup, elle n'est pas très au point :

          Pour l'instant il n'est pas possible de régler cet affichage selon différentes tailles. Là c'est juste avant le breakpoint, et c'est clairement pas adapté. C'est une disposition qui nécessiterai des adaptations bien plus tôt.

          • Partager sur Facebook
          • Partager sur Twitter

          Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

            24 juillet 2017 à 22:29:34

            Ah oui effectivement, je vais me pencher sur un ou plusieurs breakpoints intermédiaires.
            • Partager sur Facebook
            • Partager sur Twitter

            Création d'un framework CSS

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown