Discussion du vendredi : les frameworks css

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

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 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.

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...

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.