Framework CSS, lequel choisir ?

Bonjour, Je pense qu'ici c'est le bon endroit pour poser cette question ici pour moi c'est un peu le paradis de la CSS...

Ces derniers jours, je viens d'essayer deux (soit disant) framework CSS : Bootstrap3 et PureCSS. Très intéressant je remercie leur concepteur c'est sans doute un gain de temps évident... Mais je m'interroge car je ne comprends pas que l'on nomme ça des framework alors que ce n'en est pas véritablement ? Cela s'apparente plus a des grids avec lesquels ont peu faire des petits trucs en plus genre un menu, des boutons...

Etant graphiste à la base je dois dire que je suis assez déçu par ses systèmes de colonnes très fixes et pas très responsive. Perso quand je fais un design de page ça se calle au mm. Là il faut aller dans les specs, régler tes marges en te prenant la tête, bref tu ne choisis pas vraiment les tailles de blocs et c'est bien dommage... L'idée c'est de prendre une taille qui s'approche de ce que tu souhaite, j'imagine ?

J'ai entendu que la nouvelle version de Foundation venait de sortir, j'ai lu qqs trucs sur blueprint... Voilà je voulais avoir des avis ??? Ils ont l'ai plus souple... J'ai vu assi le projet de goetter snackCSS qui à l'air intéressant...

Pour moi un CSS Framework cela s'approcherait plus de Compass qui à l'air d'être un outil puissant ? On peut utiliser Bootstrap avec apparemment... Pourquoi cela ne se développe pas un peu plus de ce côté ? Il y a pleins de gens qui semblent délaisser ses solutions car c'est un peu plus lourd à mettre en oeuvre pourtant j'y vois un réel intérêt...

Bon désolé mon message est un peu bateau et à du être traité plusieurs fois j'ai recherché l'historique et trouvé des réponses variées mais j'étais curieux de reposer la question : Qu'est ce qu'un vrais framework pour CSS avec une grille responsive souple, de l'héritage de classe CSS, des menus sympa, des boutons... Est ce qu'il y a des projets intéressants à venir prochainement à suivre de près ? Bref un truc qui soit très souple pour le webdesign avec une gestion simplifiée des styles et des grilles ?

MERCI

Bonjour,

comment as-tu testé ces frameworks ?
Pour ma part je ne répondrait que pour Bootstrap, car c'est celui-ci que j'utilise au quotidien.
Au niveau de la grille, depuis Bootstrap 3, il est devenue extrêmement flexible au niveau du responsive, voir peut-être l'un des plus flexible. Regarde sur leur doc, du côté des classes col-md-*, col-lg-*,.col-sm-* et col-xs-*, pour comprendre de quoi je parle.
Ensuite au niveau de l'intégration avec un graphisme existant, j'ai intégré 2 graphismes avec une grille de 960px et des goutierres de 20px (si je ne dis pas de bêtises), et ça ne pose absolument aucuns problèmes.

Voilà pour mon retour, je ne sais pas si tu es plus avancé avec ça, mais je pense que tu devrais t'arrêter un peu plus sur ces framework, afin de mieux comprendre leur possibilités.

Bonne continuation !
Modifié par Raphi (25 Nov 2013 - 21:54)

OK, ok,

Pour mes tests j'ai pris des sites existants et j'ai fais des intégrations en essayant d'être le plus proche des modèles. J'ai bien compris le principe des md xs et compagnie... Effectivement ma feuille de CSS était presque vide au final. Je suis sur qu'à l'usage c'est un gain de temps. Mais ce que j'aurais apprécié c'est de pouvoir définir mes colonnes au départ prendre une petite réglette et placer mes repères, choisir la taille de mes espacements ou adapter une grille par rapport à mon modéle et faire en sorte que bootstrap puisse coller à ses repères... Je ne dis pas que c'est pas possible dans Bootstrap mais j'aurais imaginé ça plus simple... Et je ne parles pas des floats qui viennent parfois foutre le bazar du coup je suis obligé de faire des blocs de structure et à l'intérieur de remettre des blocs qui englobent mes blocs de contenu et ça j'aime pas trop trop les blocs ds les blocs... Après vous me direz que je m'y prends peut être comme un manche...

Je crois que je vais coller à bootstrap apparemment c'est la tendance général... quand je le maitriserais ainsi que les autres nombreux outils j'irais peut être en essayer d'autres...

J'ai tellement bien apprécié le livre de corinne "intégration web les bonnes pratiques" que je crois que je vais devoir récidiver même si il y a des chapitres qui se croisent : "css maintenables avec sass & compass", ça à l'air sympa... J'aime bien l'intégration mais bon je préférerais tout de même passer plus de temps sur mes créas et mon dév. donc si ça peut aider à avancer plus vite même quand on a pas encore 10 ans de pratique je suis preneur...

Merci

Bonsoir,

pour l’appellation framework, on put en effet se poser la question. Le terme est très générique et peu précis. Concernant bootstrap, son côté utilisable tel quel n'en fait pas le meilleur candidat à l’appellation. Je ne connais pas PureCSS donc je ne peux rien en dire. Néanmoins peu importe comment on appelle cela l'important est de comprendre comment il fonctionne, et ses forces et faiblesses.

Compass est un préprocesseur CSS, autrement un code qui apporte des améliorations significatives au niveau du codage et qui va se compiler en code CSS. L'avantage est de pouvoir utiliser certains outils très avancés, sans problèmes de compatibilité et de lenteur de développement inhérent au CSS. Bootstrap est construit sur LESS, un autre préprocesseur. Cette pratique est courante dans l'informatique depuis au moins 40 ans.

Pour Bootsrap, mon expérience me dit qu'il est parfait pour l'utiliser tel quel (création d'une documentation, ou de documents ne nécessitant pas de visuels spécifiques). Il convient aussi très bien en tant que base solide pour des projet plus personnalisés, mais n'ayant pas vraiment de prétention à vouloir créer quelque chose de complètement original, ainsi pour des projets complexes, il peut devenir un précieux allié pour éviter de faire exploser les coûts, mais il faut accepter de «lâcher du lest». Pour des mise en page vraiment originales, il devient plus un frein qu'autre chose. Sur un site simple et léger, il est en outre très facile de s'en passer.

Apparemment il y a une version unofficiel de bootstrap pour Compass : https://github.com/vwall/compass-twitter-bootstrap

Venant du print je trouve que cela n'est pas dépourvu d'intérêt de faire ses mise en page avec une grille de fond... Je trouve même que c'est un atout évident pour une belle mise en page... Après je n'ai pas beaucoup d'expérience avec mais on peut très bien se servir de la grille pour caler le texte et déplacer les images indépendamment en background-image donc je pense que l'on doit tout de même arriver à des compromis sympa. Je me demande par contre les conséquences que cela peut avoir au resizing ? À tester !

inkobl a écrit :
Mais ce que j'aurais apprécié c'est de pouvoir définir mes colonnes au départ prendre une petite réglette et placer mes repères, choisir la taille de mes espacements ou adapter une grille par rapport à mon modéle et faire en sorte que bootstrap puisse coller à ses repères... Je ne dis pas que c'est pas possible dans Bootstrap mais j'aurais imaginé ça plus simple...

Voila pour ma part comment j'ai procédé pour recréer ma propre grille.
J'ai placé ce code dans mon fichier css, afin d'écraser les règles existantes pour Bootstrap.

.container,
.col-xs-1, .col-xs-2,
.col-xs-3, .col-xs-4,
.col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8,
.col-xs-9, .col-xs-10,
.col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2,
.col-sm-3, .col-sm-4,
.col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-10,
.col-sm-11, .col-sm-12,
.col-md-1, .col-md-2,
.col-md-3, .col-md-4,
.col-md-5, .col-md-6,
.col-md-7, .col-md-8,
.col-md-9, .col-md-10,
.col-md-11, .col-md-12,
.col-lg-1, .col-lg-2,
.col-lg-3, .col-lg-4,
.col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8,
.col-lg-9, .col-lg-10,
.col-lg-11, .col-lg-12 {
    padding-left:10px;
    padding-right:10px;
}

.row{
    margin-left:-10px;
    margin-right:-10px;
}

@media (min-width: 768px) {
    .container{
        max-width: 740px;
    }
}

@media (min-width: 992px) {
    .container{
        max-width: 960px;
    }
}

@media (min-width: 1200px) {    
    .container{
        max-width: 1160px;
    }
}

Ensuite j'ai également créer une classe, qui supprime les padding. Classe que j'appelle lorsque j'en ai besoin sur mes container :

.no-padding {
    padding:0;
}

Bonjour,

kustolovic a écrit :
pour l’appellation framework, on put en effet se poser la question. Le terme est très générique et peu précis.

Oui, autant côté back-end le mot a un sens autant en CSS c'est plutôt abusif.

kustolovic a écrit :
Je ne connais pas PureCSS donc je ne peux rien en dire.

C'est modulaire et "agnostique" dans le sens où on peut parfaitement ajouter Bootstrap par dessus.
Mais le nommage à la YUI gargbl

inkobl a écrit :
Etant graphiste à la base je dois dire que je suis assez déçu par ses systèmes de colonnes très fixes et pas très responsive. Perso quand je fais un design de page ça se calle au mm. Là il faut aller dans les specs, régler tes marges en te prenant la tête, bref tu ne choisis pas vraiment les tailles de blocs et c'est bien dommage... L'idée c'est de prendre une taille qui s'approche de ce que tu souhaite, j'imagine ?

Il doit y avoir 2 types de graphistes j'imagine
N'utilise pas les grilles, les colonnes et les gouttières si tes design ne les utilisent pas. C'est très restrictif si tu veux caler tes intégrations dans une grille alors que dans ton design, tu avais choisi de ne pas utiliser de grille.

inkobl a écrit :
J'ai vu assi le projet de goetter snackCSS qui à l'air intéressant...

OK tu sors
KNACSS, comme une paire de knacks quoi !
Avec ce framework volontairement minimaliste, tu peux avoir un conteneur en display: table (.row) auquel tu donnes une largeur de 100% ou autre et ensuite des blocs (.col) de largeur en pourcentage et/ou pixel et/ou rien de précisé. C'est bête comme chou mais le nommage est cohérent et déjà décidé : .row, .col, largeur et c'est bon, à répéter autant de fois que nécessaire.
Si tu n'utilises pas les grilles, sur le site de KNACSS, il y a un "builder" où tu ne coches pas "grids" pour ne pas avoir cette partie-là.
Sur Github, tu as la version LESS tandis qu'Hugo Giraudel maintient une version SASS (qui n'a pas forcément la même compatibilité navigateur, je n'ai pas vérifié)

inkobl a écrit :
Pour moi un CSS Framework cela s'approcherait plus de Compass qui à l'air d'être un outil puissant ? On peut utiliser Bootstrap avec apparemment... Pourquoi cela ne se développe pas un peu plus de ce côté ? Il y a pleins de gens qui semblent délaisser ses solutions car c'est un peu plus lourd à mettre en oeuvre pourtant j'y vois un réel intérêt...

SASS et LESS sont des préprocesseurs ; Compass une collection d'outils pour SASS.
Si c'est ce qui te convient, fonce.

Sinon Bootstrap est créé sur une base de LESS tandis que Foundation c'est avec SASS. Mais si tu ne modifies pas ces frameworks et que tu utilises l'autre préprocesseur (ou pas de préprocesseur), tu prends la version compilée enfin CSS et tu travailles comme tu veux à partir de là.

inkobl a écrit :
Bon désolé mon message est un peu bateau et à du être traité plusieurs fois j'ai recherché l'historique et trouvé des réponses variées mais j'étais curieux de reposer la question : Qu'est ce qu'un vrais framework pour CSS avec une grille responsive souple, de l'héritage de classe CSS, des menus sympa, des boutons...

Ça dépend©
de ton/tes projet(s), du support navigateur enfin IE, des personnes avec qui tu travailles s'il y en a (autres intégrateurs, toi avec la casquette graphiste, développeurs, etc), de tes clients si tu en as donc de qui modifiera ça dans quelques semaines/mois/années, de, de, de, etc

EDIT: Atelier lParis-Web 2013 sur les Frameworks CSS par Raphaël Goetter et Nicolas Hoffmann
Grid generator(s) si tu as une cohérence dans tes designs mais que ce n'est pas "960px 12 colonnes gouttière 10px" ou autre grand classique style vêtement "taille unique"
Et je ne retrouve pas cet outil ou framework que Raphaël m'a montré 10 fois et qui permet avec un préprocesseur d'indiquer les classes/id de ses colonnes, les largeurs voulues et de créer une "grille" à partir de ça, nouvelle pour chaque site... Je retrouverai ça demain
Modifié par Felipe (26 Nov 2013 - 00:53)

ahahahah, Je suis très fatigué moi je voulais bien sur écrire KNACSS...

Merci pour ses commentaires en ce moment je fais une formation de DEV en 3 mois donc j'essaye d'en apprendre à max... J'ai commencé le javascript+Jquery on est à la 4éme semaine, on a bientôt finit l'intégration. COMPASS et SASS ne sont malheureusement pas au programme... Mais bon comme j'avais déjà un peu de bouteille je me dis que ça va le faire... J'ai pas trop envie de perdre du temps sur l'intégration faut que j'avance en DEV, éventuellement je reviendrais là dessus plus tard à moins que cela puisse me faire gagner du temps, ce qui semble être le cas... Je me dis autant prendre de bonnes habitudes dès le départ. Je vais voir le livre et essayer d'en faire encore et encore histoire de prendre le coup de main...

Après pour ce qui est de mon travail jusqu'à présent j'ai (presque) toujours était indépendant donc si je pouvais continuer à travailler sur des projets intéressants. Petits mais pas trop non plus. Ou je puisse de préférence choisir mes outils, quitte à s'adapter de temps en temps pour les demandes spécifiques... (J'aimerais aussi éventuellement trouver un moyen d'aller vers le webdocu mais c'est un autre sujet...). Enfin voilà, j'ai commencé à constituer une petite team avec les gens avec qui j'étudie on est pleins de motivations... Voilà bref, v me coucher je suis naze et c'est repartis demain.

Bonne nuit

Felipe a écrit :
Et je ne retrouve pas cet outil ou framework que Raphaël m'a montré 10 fois et qui permet avec un préprocesseur d'indiquer les classes/id de ses colonnes, les largeurs voulues et de créer une "grille" à partir de ça, nouvelle pour chaque site... Je retrouverai ça demain

Salut,

Je pense que tu parles de SemanticGrid : http://semantic.gs/

Bonne journée.

Raphael a écrit :
Je pense que tu parles de SemanticGrid : http://semantic.gs/

J'avais les liens vers Semantic UI et Unsemantic mais forcément... Yop c'est bien ça merci