Question générale sur les framework css

Bonjour à tous,

je suis webdesigner et intégrateur depuis plusieurs années mais je suis aussi quelqu'un d'honnête qui à réalisé récemment qu'il avait grandement besoin de se remettre à la page, en effet jusqu'à il y a peu je codais tout from scratch sans rien utiliser d'autre qu'un éditeur de texte et mes 10 doigts.

Seulement de plus en plus on m'a demandé d'utiliser des choses plus précises, parfois bootstrap, parfois LESS etc etc

Donc il y a plusieurs mois j'ai décidé de travailler avec SASS COMPASS, mais j'ai encore du mal à savoir que choisir par exemple pour le système de grille, parfois des clients me demande d'utiliser bootstrap donc je me suis un peu plongé dedans, c'est vrai qu'on gagne du temps, c'est propre, rapide etc mais je ne suis pas super fan par exemple du fais d'utiliser autant de classe de mise en forme dans le code, ça revient presque à utiliser style="" dans le html...

Après recherche en ligne il semble que tout le monde ne soit pas pour l'utilisation de bootstrap en front end... du coup j'ai cherché ce qu'il se fait d'autre, notamment pour le grille que j'ai trouvé bien pratique sur bootstrap et il semblerait que Susy soit pas mal pour Sass ?

Bref j'ai du mal à m'y retrouver et savoir que choisir, d'autant que je fais aussi du dev sur wordpress et la encore, il y a deux ecoles... les pour et les contre la combinaison BT / WP

Et le du coup on se demande c'est quoi la question ! en gros :

- Que recommandez vous ?

- D'une manière générale est ce mieux d'utiliser uniquement un processeur css genre SASS COMPAS en ajoutant éventuellement SUZY pour l'utilisation de grille ? ou est ce qu'il y a des combos plus intéressants ?

- Qu'en est il de boostrap ? est trop lourd pour de petit projet ou pour être utilisé uniquement pour son système de grille et son css déjà en place pour un site front end ? doit on le réserver pour la mise en place rapide de backend uniquement ?

- Bootstrap / Wordpress, pour ou contre ? certain trouve que ça casse la boucle wordpress puisqu'il faut chaque fois réécrire le html et ajouter les classes bootstrap au lieu de styliser les classes wordpress.

- Est ce que le concept de bootstrap d'utiliser des classes de mise en page ne nous fait pas revenir 10 ans en arrière alors que le but est il me semble d'aller constamment de plus en plus vers des classes sémantique et une séparation claire de la structure et la mise en forme ?

Voila, j'espère que je ne suis pas redondant, que le sujet n'a pas été traité 20 fois et que je suis assez claire !

Merci d'avance.

Bonjour,

je suis un peu dans le même cas, voire pire vu que j'ai pas démarré les préprocesseur.

Je me suis mis récemment à bootstrap et j'y ai trouvé les mêmes défaut, à savoir que j'avais l'impression de faire de la mise en forme dans le html en collant tout un tas de balises. Et sans l'utilisation de préprocesseur, je trouve le bénéfice quasi nul car on se retrouve à récrire par dessus toute la mise en forme prédéfinie pour coller à la charte voulue. Par contre, je m'en suis servi dernièrement de la grille (qu'il est possible d'importer uniquement depuis leur site) et j'ai trouvé ça très utile et rapide.

Pour wordpress, on peut écrire ce qu'on veut dans la boucle donc je ne pense pas que ce soit un soucis. C'est plutôt au niveau des menus, galeries et autre code générés par wordpress que ça peut être problématique mais je doute qu'on puisse faire du responsive sans générer en partie son propre code. Le défaut c'est plus une certaine rigidité de wordpress.
Modifié par bzh (21 Mar 2015 - 11:26)

Bonjour,

Une comparaison intéressante :

Responsive CSS Framework Comparison

Un thème WordPress utilisant Foundation :

Responsive WordPress Theme WP-Forge

Après je sais qu'il y a beaucoup de thème BT/WP et même des bien, c'est juste qu'en cherchant un peu j'ai aussi vu pas mal de personne contre et à juste titre essentiellement si on veut utiliser les menus etc, exemple :

Au lieu d’utiliser le code généré par wp_nav_menu(), les développeurs doivent écrire des Walkers personnalisés qui changent la structure HTML de sortie de sorte que les codes CSS et JavaScript de Bootstrap puissent être utilisés.

(source pour en savoir plus : http://www.creativejuiz.fr/blog/wordpress/pourquoi-bootstrap-n-est-pas-adapte-theme-wordpress)

Mais les avis semblent diverger.

Perso pour l'heure j'en suis la :

- D'une manière générale je bosse avec SASS COMPASS et me mets à Susy pour les grids.
- Si je dois faire un backend je trouve par contre que bootstrap fera gagner du temps, la sémantique, seo etc n'étant pas autant importante en backdend qu'en front, pourquoi pas

Mais je suis encore assez indécis sur :

1) l'utilisation de bootstrap en frontend ou d'un autre framework css mais il me semble que la même problématique se retrouve sur tous

2) et si j'en utilise, est ce judicieux de le combiner à wordpress ou pas

Difficile de choisir car les avis encore une fois divergent pas mal.

[Pour info c'est moi aussi lalakuikui, je ne me souvenais plus de mes identifiants quand j'ai posté la question puis j'ai retrouvé ]
Modifié par crashbdx (21 Mar 2015 - 13:41)

Bonjour,

De base je n'aime pas trop l’appellation générique «framework» pour ce genre d'outils. Un framework devrait fournir un cadre de travail et des outils pratiques prêts à l'emploi (par exemple ce que fait http://www.knacss.com ). Or Bootstrap ou foundation font bien plus: Ils proposent un vrai style utilisable tel quel sans écrire une seule ligne de CSS. Ce faisant, cela les rend beaucoup moins souples et utiles en tant que frameworks, mais très pratiques dans certains cas.
Leurs avantages sont particulièrement intéressants lorsque on ne peut pas ou ne veut pas avoir de graphiste, lorsque on ne souhaite pas prendre le temps de travailler sur un graphisme original, etc. Pour des backends, des sites techniques ou très vite mis en place, il n'y a pas mieux.
Par contre sur un vrai travail original, ça devient vite un boulet, et il vaudrait mieux privilègier d'autres solutions: de vrais frameworks comme knacss, de feuilles de style de départ (htmlboilerplate, resets, etc.), des librairies, ou finalement votre propre feuille de mise-en-route, inspirée des exemples précédents mais convenant à vos habitudes.

lalakuikui a écrit :

- Que recommandez vous ?

ça dépend de l'intégrateur, du cadre de travail, du projet, du client, etc.

lalakuikui a écrit :
- Bootstrap / Wordpress, pour ou contre ? certain trouve que ça casse la boucle wordpress puisqu'il faut chaque fois réécrire le html et ajouter les classes bootstrap au lieu de styliser les classes wordpress.

Je n'utile pas Wordpress, mais de manière générale, les CMS génèrent de base effectivement leurs propres classes, et cela demande pas mal de travail de tout modifier ce balisage par défaut. On peut généralement se servir d'un thème de base qui le fait déjà (et bien), mais cela reste plus délicat sur la maintenance. Il ne faut pas écarter cette possibilité bien sûr, mais y penser lorsque on évalue le pour ou le contre d'utiliser tel ou tel framework basé sur des noms de classe en dur, c'est clairement un désavantage sur ce point. Par ailleurs foundation permet de lier ses outils à des noms de classes existants (et sémantiques), et est probablement plus intéressant dans ce cas (mais je ne l'ai jamais essayé ainsi, si quelqu'un a des retours d'expérience?).

lalakuikui a écrit :
- Est ce que le concept de bootstrap d'utiliser des classes de mise en page ne nous fait pas revenir 10 ans en arrière alors que le but est il me semble d'aller constamment de plus en plus vers des classes sémantique et une séparation claire de la structure et la mise en forme ?

C'est en sacré débat, qui n'a pas vraiment de réponses toutes faites. Il y a la maintenance, la performance, la collaboration, le pragmatisme à prendre en compte aussi. OOCSS, BEM, diverses méthodologie essaient d'apporter des réponses à ce genre de questions sans jamais apporter de solutions 100% satisfaisante. Parce que cela dépend aussi du mode de fonctionnement/déploiement du projet: est il plus aisé de modifier le CSS ou le HTML? ou est-ce que ça ne change rien? j'ai vu des cas où on se retrouve vite avec des patchs devant être appliqués rapidement dans le genre:

.truc .text-right {
  text-align: left;
}
.red {
  color: blue;
}

lalakuikui a écrit :
Voila, j'espère que je ne suis pas redondant, que le sujet n'a pas été traité 20 fois et que je suis assez claire !

Plus que 20 fois à mon avis

Ahah désolé alors si ça à déjà été traité maintes fois

Merci pour ces réponses qui m'éclairent un peu plus et me conforte dans mon idée, je vais donc continuer dans ce sens,à savoir lorsqu'on me demande de faire un design original, sans rien d'imposer je vais continuer comme je fais dernièrement, partir d'une base html5boilerplate et faire mon css a la mano via SASS COMPASS et SUSY pour les grilles.
Si on me demande un backend je partirais plus sur du bootstrap version SASS, idem pour des sites simple ou le design importe peu (ou s'il n'y a pas vraiment de budget design et que du classique mode BT convient).

Du coup idem pour wordpress, dans la mesure du possible privilégier un travail from scratch SASS COMPASS SUSY et sinon du bootstrap même si ça surcharge selon moi et ne va pas vraiment dans le sens de la boucle wordpress.

Je vais quand même jeter un oeuil à Fondation voir si il me plait plus que bootstrap au lieu de bêtement suivre le plus populaire

Merci en tout cas pour ces réponses !!! et si il y a d'autres avis bien sur je suis preneur

Il existe des frameworks "sans design". Par exemple :

Inuit.css

« Use inuit.css if:

You need a powerful library of objects and abstractions.
You understand/appreciate the value of OO code and the need for scalability and reuse.
You are a confident/competent developer comfortable with OOCSS and Sass, as well as familiarity with OO principles in general.

Do not use inuit.css if:

You need a framework that supplies design (I’d recommend Bootstrap for that). »

Ou Blocss :

« Blocss is a small but powerfull css framework designed specially for serious developers.

It started initially as a fork of Inuit css. Although it shares the same modular & OOCSS approach, Blocss has evolved into a framework of its own. Blocss provides little to no design wich means no undoing other peoples design decisions. I’m constantly updating en revising the code to be more lean, more future proof, and most of all: A great base to start your front-end project with.

Use Blocss if:

You need a powerful library of modules & objects.
You appreciate the value of Object Oriented code and the need for scalability and reuse.
You need a framework that is robust and evolves constantly. »

Merci beaucoup, je vais jeter un œil je ne connaissais pas !