Choix d'un framework CSS en 2017

La tendance se confirme il me semble, de plus en plus de framework plus minimalistes gagnent en popularité par rapport aux monstres Bootstrap et Foundation.
Et le choix devient à la fois sympa mais compliqué !

Contexte:
un site de jeu de taille moyenne, principalement orienté desktop (pas mobile first quoi). Je recherche donc un framework de taille petite ou moyenne (car si c'est pour utiliser 10% de Boostrap..) avec une possibilité de customiser le style et variables
(juste pour info avec Laravel côté backend)

Les choix:
- knacss: j'avais démarré là dessus, et c'était bien sympa. Mais je voudrais maintenant quelque chose d'un peu plus fourni
- Semantic UI: grosse popularité. Ca a pas l'air si simple de custom. J'ai vu quelques retours moyens sur le responsive, mais c'était il y a 6 mois, et ça va tellement vite..
- Bulma: pareil, grosse popularité. Encore en version de dev, on attend la 1.0. Mais j'aime bien car que du CSS, pas de JS, et ça a l'air simple à utiliser.
- Materialize: j'ai vu des "bons" et "mauvais" retours. Comme c'est basé sur material design, c'est opiniated et c'est pas neutre. Il semblerait aussi que le custom soit limité

Et j'ai vu passer PureCSS, Miligram, UIKit..je suis un peu perdu devant tant de choix.

Le but ici n'est pas de choisir celui qui est le mieux, car ça n'existe pas, les gouts et les couleurs. Mais d'éventuellement profiter de retour de la communauté sur certains de ces frameworks (ou autres non cités)

Merci beaucoup !
Modifié par nicolasca (20 Sep 2017 - 11:44)

Hello,

nicolasca a écrit :

- knacss: j'avais démarré là dessus, et c'était bien sympa. Mais je voudrais maintenant quelque chose d'un peu plus fourni

Je comprends le manque de "fournitude". Tu aurais des requêtes particulières ?
Tu as vu les nouveautés prévues dans la prochaine version de KNACSS ? https://knacss.com/styleguide.html

- Tu peux utiliser bootstrap en y intégrant uniquement les fonctionnalités nécessaires.
- Attention aux frameworks qui ont l'air hype mais qui en réalité ne le sont pas du tout

Boostrap ça reste un framework éprouvé. Les autres je connais pas mais j'ai eu des soucis avec certaines grilles qui avaient l'air sympa mais dans les faits non.

Je pense que tu te trompes un peu en voulant intégrer un nouvel outil dans un projet mais sans trop savoir pourquoi visiblement. Toujours tester d'abord.

T'as raison pour les frameworks hype. Là par rapport à l'année dernière, on en voit un paquet qui ont stoppé tout dev depuis 5-6 mois.
Du coup je regarde souvent qui l'a créé, pourquoi, les futurs plans etc.. C'est important.

Est ce que je me trompe ? Peut être, je ne suis pas super expérimenté encore pour tous ces outils front-end. Les choix ne sont pas simples (qui dépendent des besoins).
Pour Bootstrap v4 je n'ai pas vu de fonction pour récupérer les sources css/js uniquement de certaines fonctionnalités.
Et comme j'ai mentionné, je recherchais un truc un peu plus fourni que knacss (en attentant le spoiler v7 évidemment ^^).

Que de questions !

Pour ne pas trop polluer ton sujet de départ, et pour éviter d'éparpiller les questions / suggestions, n'aurais-tu pas un compte Github par hasard, histoire de tout rassembler ici : https://github.com/alsacreations/KNACSS/issues/253 ?

Yep, je déplace la conversation là bas.

Sinon, les avis sur le paysage actuel des frameworks CSS du moment est toujours d'actualité

Selon moi, il s'agit d'une très vaste question et voici ma réponse en version courte (que je vais sans doute développer dans un article de blog prochain) :

Besoins couverts par un framework :
- Reset CSS (ex. normalizeCSS)
- Convention d'usage et de nommage (ex. BEM)
- Grille de mise en forme
- Composants pré-stylés et JavaScript associé

Si tu n'as pas besoin de ces 4 fonctionnalités, as-tu finalement besoin de framework ?

Apports quotidiens d'un framework :
- Ne pas réinventer la roue (Un « reset » CSS, Une base réutilisable, Des solutions de positionnement, de formulaires, de boutons, de navigation, etc.)
- Faciliter le travail en équipe (Outil commun, Documentation partagée, Conventions de nommage et de code)
- Permettre de prototyper rapidement (Interfaces prêtes à l’emploi, des grilles de positionnements)

Si tu ne travailles pas en équipe, as-tu finalement besoin de framework ?

Choisir selon ses priorités / besoins / types de projets :
- Quelle compatibilité adopter ?? IE6 ? IE8 ? Navigateurs modernes ?
- Niveau de complexité et de d'appropriation de l'outil ?
- Niveau de prise en compte du Responsive Webdesign ? Mobile First ?
- Prise en compte de l'Accessibilité (polices en pixel, niveau de contrastes) ?
- Prise en compte de la performance (pas d'animations ou de JS gourmands en ressource) ?
- Quelle Licence ? Open Source ou pas ? Quel Prix ?
- Source en LESS, Sass, Stylus ? En CSS pur ?
- Nombre de modules (grilles, navigations, carrousel, paginations, etc.) ?
- Personnalisation possible ?
- Taille de l'Écosystème, documentation, mises à jour, contributeurs ?

En résumé :
1- c'est compliqué
2- ça dépend

:)
Modifié par Raphael (20 Sep 2017 - 17:35)

En effet il n y a plus l'outil de customisation en ligne pour bootstrap 4. Par contre il y a possibilité de récupérer uniquement la grille ou de configurer certaines choses avec SASS. Personnellement je m'intéresse qu'à la grille et en effet les jumbotrons ou autres card n'ont pas une grande utilité je trouve.

bzh a écrit :
En effet il n y a plus l'outil de customisation en ligne pour bootstrap 4.

Ce devait être un monstre à maintenir. Qui plus est les développeurs du frameworks estiment sans doute que désormais les dev' fronts maîtrisent l'outil SASS qui s'est fortement répandu depuis quelques temps. Donc intérêt moindre de maintenir un tel truc.

Me semble qu'avant bootstrap était fait à partir de less même si récupérable en sass dans un projet à côté sur github (perso je me servais de leur outil en ligne). J'ai pas suivi la course des préprocesseurs css mais sass semble nettement plus populaire aujourd'hui donc c'est en effet plus simple comme cela.

Sympa les réponses !
Oui pour Bootrap 4 on peut ensuite essayer d'import les sass qu'on veut, en espérant qu'il y ait vraiment 0 dépendance entre chaque module (pour le js plus compliqué je pense).

Donc en attendant l'article à venir de Raphael, je vais pousser jusqu'au bout, et profiter de vos connaissances lol

Besoins couverts par un framework
Apports quotidiens d'un framework
Yep, ça j'en ai besoin, ça sera très appréciable

Choisir selon ses priorités / besoins / types de projets
- Quelle compatibilité adopter ? Chrome/Firefox/Safari. No IE
- Niveau de complexité: simple
- Responsive: raisonnable, mais pas de Mobile First
- Open Source gratuit
- Source Sass
- Nombre de modules: un juste milieu entre aucun et beaucoup ^^
- Personnalisation possible: yep customization du style (sur le plus d'éléments possibles)
- Taille de l'Écosystème: taille petite, 2-3 contributeurs

Et bien rien que d'écrire ce message me clarifie les idées.

Là à froid, de bon matin, et sans recul, je dirais que d'après ces éléments je partirais sur knacss v7 ou Bulma (car les deux en plus en pur css). Juste que ces deux frameworks sont en version de dev ^^

En tout cas merci pour les réponses, c'est cool d'avoir des retours de personnes ayant de l'xp.
Je ne sais pas si j'utilise les bons mots clés sur Google (en EN), mais je tombe souvent sur les mêmes styles d'articles/blog posts qui surfent sur la hype.
Avez vous d'ailleurs sur ce sujet précis du post des ressources que vous recommandez ? (ouai je suis gourmand ^^)

Haha, oui pareil que Bootstrap 4

Oui pardon, Pour la taille de l'écosytème j'ai mal lu.
Je n'attends pas quelque chose d'immense pour celui du framework, mais avec malgré tout une documentation complète et une équipe assez réactive (fix & evolution).

D'ailleurs la branche knacss v7, elle est en version alpha, pre-alpha, ou pas encore testable ?

Yep, moi aussi le mien il est en version de dev', et c'est pas prêt de changer...
Modifié par Olivier C (21 Sep 2017 - 10:25)

nicolasca a écrit :

Choisir selon ses priorités / besoins / types de projets
- Quelle compatibilité adopter ? Chrome/Firefox/Safari. No IE

Nier IE ne me parait pas un bon plan : il est encore utilisé en entreprise, parfois même le seul autorisé à l'intérieur d'une entreprise (cas vécu tout début 2017).

nicolasca a écrit :

Là à froid, de bon matin, et sans recul, je dirais que d'après ces éléments je partirais sur knacss v7 ou Bulma (car les deux en plus en pur css). Juste que ces deux frameworks sont en version de dev ^^

Il y a aussi PureCSS (https://purecss.io/) qui répond à vos critères, développé et maintenu par Yahoo si je ne me trompe pas.

Ceci dit, PureIO perd son intérêt face à KNACSS v7.
Cette nouvelle version est très prometteuse, mais AMHA, je trouve que baser les grilles sur GridLayout est très et trop anticipé vu que le support de GridLayout par Edge ne date que de quelques mois à peine.