Discussion du vendredi : les frameworks css

Bonjour à tous,

Assez rarement on peut le regretter, les membres du forum nous proposent des actualités. En effet, avec la nouvelle version d'Alsa, c'est très simple à faire et ça rapporte quelques kiwiz.

Nous sommes toujours ravis quand les membres proposent des actus, par contre c'est assez rare et généralement l'actu tient en une simple ligne

Récemment, jeromeM nous propose une actu sur le framework CSS Boks qui nous semble intéressante mais bien trop courte.

Du coup, nous nous sommes dit qu'il pourrait être intéressant d'en discuter entre tous les membres et d'en tirer les meilleurs moments et ressources pour aboutir à un article plus abouti.
Il pourrait même être envisageable, un beau jour, de profiter des Chats sur la terrasse pour discuter de ces thèmes.

Si vous êtes d'accord, le thème de cette semaine est donc "les frameworks css".

Dites-nous tout ce que vous en pensez : c'est bien, c'est pas bien ? ça marche comment ? lesquels vous utilisez, pourquoi ? comment cela vous aide au quotidien ? etc.

PS : en participant, sachez que des extraits de vos messages pourront figurer dans un article ou une actualité publiée sur Alsacréations.
Modifié par Raphael (26 Jun 2009 - 14:31)

En parlant de la terrasse il n'y a évidemment pas de clavardage organisé cette semaine étant donné que je ne m'en suis pas occupé, cependant s'il y a une demande on peut organiser pour la semaine prochaine …

(HS) Euh sinon, sans vouloir vexer personne : est-on vraiment obligé d'utiliser le terme "clavardage" au-lieu de "chat" ? Je crois bien qu'il ne doit y avoir que 3 personnes sur toute la communauté qui comprennent ce que cela signifie

Non on est pas obligé.

Raphael a écrit :
(HS) Euh sinon, sans vouloir vexer personne : est-on vraiment obligé d'utiliser le terme "clavardage" au-lieu de "chat" ? Je crois bien qu'il ne doit y avoir que 3 personnes sur toute la communauté qui comprennent ce que cela signifie

+1

Raphael a écrit :
Il pourrait même être envisageable, un beau jour, de profiter des chats sur la terrasse pour discuter de ces thèmes.

Euh donc le plan c'est que j'embarque le chat de mes parents et les deux chats de mon frère, et on va bronzer sur la terrasse chez mes grand-parents à Albigny? On prévoit un barbecue ou bien? Quelqu'un a consulté la météo?

Pour en revenir au sujet, je n'utilise aucune framework CSS. Je préfère mes templates à moi (qui sont très similaires à ceux de Florent ).

Idem, aucun framework et je déconseille a mes collegues de les employer.
Pourquoi? Ils rajoutent une couche de complexité à un projet.

En travaillant sur plusieurs projets employant différents frameworks, il faudrait à chaque fois se replonger dans les spécificités de ces frameworks.

Il y a aussi les courbes d'apprentissages et de maintenance des connaissances (toujours dans le cadre d'une société d'une dizaine d'intégrateurs) qui m'ont décidé à ne pas recommander l'emploi des framework css.

Ceci dit, pour des petits projets ou en sachant qu'on sera le seul à travailler sur le projet, je ne vois pas d'inconvénient à employer UN framework

Personnellement je n'ai jamais testé de framework, surtout par manque de temps pour apprendre plus que ce qui m'est nécessaire dans l'instant.

Si cela peut faire gagner du temps sans perdre en lisibilité et simplicité au niveau du code, pourquoi pas mais je n'aime pas trop m'en remettre à des outils pour ce qui est du codage en soi (à part pour jQuery et quelques APIs bien spécifiques), je préfère tout faire à la main "from scratch".

Je n'étais même pas au courant que des frameworks existés en CSS.

Et à part le reset.css (si on peut considérer cela comme une partie de framework) je ne vois pas trop l'utilité !

Personnellement, je serais ravi de pouvoir implanter un framework CSS aux "outils" de ma société. Ceci dans un souci d'industrialisation du webdesign. Ras le bol des CSS de 1000 lignes où pas un CSS ne ressemble à un autre.

Certes, il y a une courbe d'apprentissage importante pour tout framework mais également pour la reprise d'un CSS existant.

Je serais très intéressé par un retour d'expérience sur Blueprint (notamment sur le Grid Layout) ou oocss ou YAML ou encore Yahoo! UI Library CSS Foundation.

Voici deux ressources qui feront peut-être changer d'avis certains ici :
- Développement efficace avec les frameworks CSS : http://case.oncle-tom.net/2008/developpement-efficace-frameworks-css/
- Frameworks CSS + Reset CSS : design from scratch : http://www.css4design.com/blog/frameworks-css-reset-css-design-from-scratch
Modifié par Raphael (29 May 2010 - 16:26)

Je connaissais pas l'existence des frameworks CSS jusqu'à aujourd'hui. Je viens de parcourir les liens que vous avez fournis et je dois dire que je suis agréablement surpris.

Je pense que de standardisé et normalisé la mise en page CSS est un réel gain de temps. Et ce n'est pas les quelques kilos octets que cela rajoute qui va être un obstacle.

Je pense me renseigner plus en profondeur là dessus et pourquoi pas l'intégrer dans mon travail de tous les jours.

Mais j'aimerais quand même avoir quelques retours sur des personnes qui utilisent les frameworks CSS ? Est ce que l'intégration des frameworks dans votre travail n'a pas été trop compliqué ? Cela a-t-il impliqué des changements dans la manière de découper les maquettes ?

Raphael a écrit :
Voici deux ressources qui feront peut-être changer d'avis certains ici :
- Développement efficace avec les frameworks CSS : http://case.oncle-tom.net/2008/11/25/developpement-efficace-frameworks-css/
- Frameworks CSS + Reset CSS : design from scratch : http://www.css4design.com/blog/frameworks-css-reset-css-design-from-scratch

Je me base plutôt sur une approche propre de OOCSS. Où des éléments courants (widgets) sont repris dans un wiki. Ces éléments sont testés et approvés cross-browser.

On est dans une étape d'implémentation de ces widgets avec différents adapteurs pour les drupal/zend/.Net etc...

Donc en fait je n'emploie pas de framework (où les inconvéniants sont plus gros que les avantages - IMHO) à part un micro reset, et des blocs de codes qui reviennent de projets en projets.

j'ai jeté un oeil rapide à qq solutions, et dans l'ensemble le code html ne me paraît pas très sémantique.
Si on regarde un exemple chez blueprint css :
http://www.blueprintcss.org/tests/parts/grid.html
la structure semble fortement liée à du positionnement graphique.

Maintenant je ne sais pas si on peut généraliser à tous les frameworks css à base de grid...

Bonjour,

Pour ma part j'utilise le framework 960.gs (pour grid system). Il est extrêmement simple à apprendre et à utiliser. Il utilise un reset.css (qui permet de mettre tous les "compteurs à zéro" quel que soit le navigateur), un fichier text.css (qui permet la mise en forme de la typo), un fichier 960.css (qui est le framework en soit) et un fichier layout.css (grâce auquel on personnalise le site).

La syntaxe est on ne peut plus simple sachant que l'on part du principe que le design final fera 960px de large. Ensuite, on a la possibilité de diviser l'espace disponible (que l'on appelle "container") par 16 ou 12 blocs (on ajoute alors le suffixe _12 ou _16 à container en fonction de ce que l'on choisi, ce qui nous donne les class "container_16" ou "container_12")).

Ensuite, dans ce container, on peut placer des blocs qui font (960/16) soit 60px ou (960/12) soit 80px de large. Si l'on choisi la division par 16, on dispose de 16 blocs (dont le nom de la class est "grid_x", avec x = 1 à 16). Si l'on choisi la division par 12, on en a 12 (idem pour le nom de la class avec x compris entre 1 et 12).

Exemple :

Si l'on veut 3 blocs alignés, on utilisera par exemple :

<!-- Le container -->
<div class="container_12">

     <!-- Nos trois blocs 
  (la somme des suffixes des "grid" doit être égale au suffixe du container)
      -->
     <p class="grid_4">Mon texte de remplissage</p>
     <p class="grid_4">Mon texte de remplissage</p>
     <p class="grid_4">Mon texte de remplissage</p>
</div>

Si l'on veut placer d'autres blocs en dessous (par exemple 5 blocs), on ajoutera un saut de ligne (matérialisé par

<div class="clear"> </div>

) à la suite du dernier paragraphe, ce qui nous donne :

<!-- Le container -->
<div class="container_12">

     <!-- Nos trois blocs -->
     <p class="grid_4">Mon texte de remplissage</p>
     <p class="grid_4">Mon texte de remplissage</p>
     <p class="grid_4">Mon texte de remplissage</p>

     <!-- Le saut de ligne -->
     <div class="clear"> </div>

     <!-- Nos cinq autres blocs -->
     
     <p class="grid_3">Mon texte de remplissage</p>
     <p class="grid_2">Mon texte de remplissage</p>
     <p class="grid_2">Mon texte de remplissage</p>
     <p class="grid_2">Mon texte de remplissage</p>
     <p class="grid_3">Mon texte de remplissage</p>
</div>

Il y a quelques autres subtilités minimes mais l'essentiel est là. On peut mélanger les container à 12 et 16 blocs dans une même page puisqu'il s'agit de class. Et on gagne un temps assez impressionnant (enfin cela n'engage que moi ).

J'avais essayé Blueprint à une époque mais il ne m'avait pas semblé aussi clair. 960.gs est plus facile à maitriser il me semble.

En espérant vous avoir convaincu...

J'ai "essayé" de tester BluePrint sans conviction, je perds plus de temps à l'appliquer qu'à concevoir mes propres css... Surtout pour des sites complexes, genre site de presse en ligne avec de multiples blocs de contenu textes, articles, images, commentaires, liens...
il est difficile à mon avis d'adapter une solution "toute faite".

Marin a écrit :

Je me base plutôt sur une approche propre de OOCSS.

C'est vraiment la seule bonne approche j'en suis également persuadé. Mais ce n'est pas incompatbile avec l'utilisation d'une grille pour la mise en place des widgets.

Ma question Pour ceux qui, comme moi, n'utilisent pas un full stack css framework mais juste un systeme de grille vous utilisez lequel et pourquoi?

Un système de grille très simple (et donc sans doute limité):
http://www.1kbgrid.com/

Une autre ressource :
http://css.developpez.com/tutoriels/framework-css/

L'article date de plus d'un an.