Frameworks CSS + Reset CSS : design from scratch

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Frameworks CSS + Reset CSS : design from scratch

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta.

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

  • Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
  • Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
  • Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

  • Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
  • Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
    • typography.css pour les règles typographiques de base,
    • grid.css pour la mise en page par grille ou
    • layout.css pour des maquette générales,
    • form.css pour des styles de formulaires basiques,
    • general.css pour tout autre style supplémentaire.
  • et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
  • En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

  • Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
  • Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
  • Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
  • Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
  • Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

  • Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, […] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don’t use frameworks]
  • Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don’t use frameworks]
  • Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
  • Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
  • Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
  • Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
  • Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Yet Another Multicolumn Layout

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

YAML Builder

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Logo blueprint

blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

générateur de grille CSS Blueprint

Yahoo! UI Library CSS Foundation

Yahoo! UI Library

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

  • Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
  • *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
  • Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.Tripoli
  • Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
  • Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
  • CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
  • CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
  • CSS Global Reset par Mike Rundle.
  • Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

  1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
  2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



46 commentaires pour “Frameworks CSS + Reset CSS : design from scratch”

  1. giz404 dit :

    J’ai travaillé ces dernières années dans une boite où la rapidité d’exécution était primordiale et le copicollage élevé au rang d’art. De plus, nous bossions sur des sites qui reprenaient assez souvent la même structure. J’ai donc cherché à rationaliser l’emploi des classes et des styles, créé un petit reset.css, afin d’avoir un code le plus simple et le plus réutilisable possible. J’avais inconsciemment créé un framework CSS, qui a rapidement été adopté par le reste de l’équipe. J’ai testé par la suite (à des fins personnelles) Yahoo! Grids que je considère comme une usine à gaz, et j’ai découvert récemment Blueprint, qui est vraiment réussi. Très simple et rapide à prendre en main, il conviendra à tous ceux qui souhaitent faire des sites orientés publication (pas sûr que l’emploi d’un framework CSS soit adapté au développement de l’interface d’une application web…) En outre, il permet d’obtenir rapidement un rendu correct, même lorsque l’on ne peut pas consacrer beaucoup de temps au graphisme du site. Accessoirement, les framework gèrent les problèmes de rendu inter-navigateurs, ce qui représente là encore un gain de temps des plus appréciables. En bref, je suis conquis par ces nouveaux outils, tout en gardant à l’esprit qu’il faut les utiliser avec discernement.

  2. burningHat dit :

    Alors là Bravo Bruno ! Du grand art cet article vraiment !!!

    Par contre, les gars de YAML auraient mieux fait de se péter une jambe le jour où ils ont choisi leur nom, vu que pendant toute la lecture (jusqu’à ce que j’arrive à ce passage), je me demandais ce que ce format (YAML = Yaml Ain’t Markup Language) venait foutre au milieu d’une histoire de CSS…

    Bref, ce genre de confusion dans les acronymes deviennent de plus en plus fréquentes dans l’info (où nous sommes fans d’acronymes, surtout s’ils sont récursifs :p) et ça devient plutôt pénible en plus de nuire à la clarté du discours…

    Mais ça mon cher, tu n’y peux rien bien sûr, donc pour ta part, c’est un sans faute ! :D

  3. j.ducastel dit :

    Impressionnant. Il faut vraiment que je jette un œil à tout ça…

    merci pour ce travail !

  4. blazouf dit :

    excellent article !!

  5. Merci à tous pour les compliments ;) giz > J’avoue avoir un faible pour le travail artisanal, mais je n’ai rien contre me rendre la vie plus facile pour autant : j’ai testé Blueprint pour faire une découpe intégration relativement simple et bon, j’ai laissé tombé ^^

    Ceci dit, le fichier typography.css de Blueprint est bluffant d’efficacité et il suffit de l’inclure dans n’importe quelle feuille de style pour avoir une page qui a de la gueule !

    burningHat > Tiens, je ne connaissais pas ce Yaml là ;) (mais jusqu’où s’arrêteront-ils…)

  6. loïc m. dit :

    Très bon article. Personnellement, je ne suis pas webdesigner dans l’âme : tout ce qui touche de près ou de loin au design d’un site me fait perdre des heures. Mon truc c’est le code brut ;)

    Tout ça pour arriver à cette conclusion personnelle : les Framework CSS ne me conviennent pas du tout :x Je trouve que je perds à chaque fois trop de temps à adapter mes créations aux framework. Seul quelques parties bien précises peuvent être utiles, comme le précise Bruno dans le commentaires précédent ;)

    Je vais me contenter des Framework de développement et laisser ces framework CSS à d’autre :)

  7. burningHat dit :

    Ce YAML-là est en fait une sorte de manière de structurer un fichier texte et est idéal pour les fichiers de configuration (beaucoup plus poussé/complet que les .ini et moins verbeux que le XML). Surtout très apprécié des RoRiens (ndlr: adeptes de Ruby On Rails) mais utilisable dans tout les langages de prog’ (y a de chouettes librairies pour parser des fichiers .yml en php, python, perl, etc. etc.).

    Du coup, apprendre l’existence d’un YAML pour CSS, bah ça facilite pas les choses dans mon esprit ! :D

  8. Gregoire dit :

    Impressionnant ! Même si ce n’est "que" une traduction, en version beta qui plus est, c’est super complet !

    Je suis d’accord avec toi sur ta conclusion. Perso, je suis beaucoup plus souvent dans le cas [2] (vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin) et dans ce cas précis, les frameworks css, c’est plutôt une perte de temps qu’autre chose.

    Mais bon, j’essaierai bien Yaml quand même.

  9. bruno bichet dit :

    Gregoire > Je mets version bêta, car je suis loin d’être un traducteur né : l’anglais était ma troisième langue derrière l’Allemand et l’Espagnol… Donc, voilà ;)

    burningHat > Merci pour ces précisions concernant ce Yaml dont j’ignorais tout ;)

    loïc m. > A l’occasion tu pourrais nous parler des frameworks de dév. que tu utillise !

  10. Anonyme dit :

    Frameworks CSS + Reset CSS : design from scratch…

    Traduction en franas de larticle « CSS Frameworks + CSS Reset: Design Trom Scratch » paru sur Smashing Magazine qui fait le tour des diffrents environnement de travail orients CSS pour l’intgration CSS…

  11. […] effectuer quelques tests, pour vous concocter un article. Entre temps, j’ai lu cette excellente traduction de Bruno Bichet, à laquelle je n’ai pas grand chose à […]

  12. giz404 dit :

    Quelques mois après, je persiste dans l’utilisation de frameworks, et je passe même à l’étape d’après : je me suis lancé dans la création de Bungee, un framework CSS qui a la particularité d’être élastique. L’idée : obtenir un site au graphisme dépouillé mais très lisible, et élastique sans se lancer dans de complexes conversions px/em qui finissent toujours par échouer pour une sombre histoire d’arrondi…

    J’ai essayé d’éviter les écueils des trop gros frameworks tels que Yahoo! UI : Bungee est très léger et ultra simple d’utilisation : son apprentissage est quasi instantané et « n’enferme pas » le designer dans une logique trop spécifique. Le projet n’en n’est qu’à sa naissance, mais je pense qu’il a un avenir dans le sens où aucun framework ne propose d’élasticité aujourd’hui…

  13. Bruno Bichet dit :

    @giz404 > Depuis ce billet, j’ai commencé à utiliser Blueprint que j’ai trouvé finalement assez bien fait et qui permet de faire effectivement des sites web avec un système relativement browser proof ;)

    Seulement, j’ai vite abandonné le bouzin parce qu’à l’usage je trouve que c’est fatiguant de faire l’aller-retour entre la partie html et la partie css pour savoir où j’en suis.

    En revanche, j’ai adopté les principes de conception de Blueprint avec les float:left + margin-right qui uniformisent un peu le travail car j’avais l’habitude de mélanger un peu trop les float:left avec les position:relative et/ou absolute en fonction de l’inspiration.

    Un des trucs vraiment bien avec BP, c’est la CSS typography.css qui permet d’avoir une belle grille verticale parfaitement lisible.

    Bon, maintenant, faut que je teste ton frameworks ! Je ferais sûrement un billet dans le genre Blueprint vs Bungee quand j’aurais tout bien en main ;)

  14. giz404 dit :

    « Blueprint vs Bungee », aïe, ça va tourner en ma défaveur ça. Bungee n’en n’est qu’à ses balbutiements…

  15. bruno bichet dit :

    @giz404 je pense que je parlerais surtout de ton travail en faisant deux ou trois comparaison avec BP pour situer un peu les techniques utilisées ;)

  16. Article excellent. Merci pour la traduction.

  17. Merci bcp pour la traduction de cet excellent article du formidable site qu’est Smashing Magazine. Je suis en train d’expérimenter BlueprintCSS.

  18. étant DA, j’ai toujours eu plutot une démarche artisanale, mais cet article sur les Frameworks me donne l’eau à la bouche, merci !

  19. […] ni sur le choix du meilleur d’entre eux. Vous trouverez des éléments de réponse  dans : Frameworks CSS + Reset CSS : design from scratch paru initialement en anglais sur Smashing Magazine ; dans Développement efficace avec les […]

  20. […] très en vogue dans le design des blogs de type magazine avec l’utilisation des frameworks CSS comme Blueprint, la mise en place d’une grille de mise en page en 6, 8, 12 ou 24 colonnes […]

  21. […] Frameworks CSS + Reset CSS : design from scratch […]

  22. […] Frameworks CSS + Reset CSS : design from scratch, […]

  23. […] c’est-à-dire des designs en 960 ou 950 pixels que l’on trouve généralement dans les frameworks CSS. S’il suffisait de tomber sur des dizaines entières pour avoir des proportions harmonieuses, […]

  24. […] (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille […]

  25. […] popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une […]

  26. truffo dit :

    Les grids cela ressemble quand même beaucoup à une mise en page par tableau. Le temps de montage est certes diminué mais la maintenance et tout simplement horrible (Comme pour les tableaux).

    Il fut un temps où on avait séparer la structure de la présentation, maintenant on veut de nouveau les mélanger.

    Pour, les feuilles reset ou autres widget c’est sur que c’est pas mal. Mais finalement, on les utilise tous plus ou moins sans le savoir.

    • Rivsc dit :

      @truffo on avait séparé la structure de la présentation pour des raisons d’accessibilités et non pour des problèmes de maintenance du code.

      J’ai toujours aimé la mise en page en tableau… (merci CSS3 pour ton display:table)

      Merci pour l’article sinon, ça résume bien tout sans mettre les mains dans le cambouis !

  27. […] petite application Boks qui permet en quelques clics de générer l’ensemble des fichiers du framework CSS Blueprint après avoir déterminé la largeur de l’empagement et de la gouttière ainsi que […]

  28. […] En parlant de diète, ce thème est particulièrement léger puisqu’il est composé uniquement des fichiers index.php et comments.php et functions.php. Pour la mise en page, je me suis laissé tenté par Boks, le générateur de grilles CSS qui s’est occupé de générer un fichier screen.css qui regroup les fichiers compressés du framework CSS Blueprint. […]

  29. […] existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, […]

  30. […] très en vogue dans le design des blogs de type magazine avec l’utilisation des frameworks CSS comme Blueprint, la mise en place d’une grille de mise en page en 6, 8, 12 ou 24 colonnes […]

  31. […] ♥ Frameworks CSS et Reset CSS : design from scratch […]

  32. […] feuilles de style du framework CSS Blueprint que j’ai eu l’occasion de présenter dans cette traduction. Sans oublier le billet de Country qui a déclenché l’envie d’en faire un billet […]

  33. Oncle Tom dit :

    J’aurais quand même du mal à recommander à des utilisateurs de concevoir leur propre framework CSS ; pas dans un premier temps. Les gars qui créent un framework, ils ont la compétence et la vision.

    Créer son framework parce qu’un autre ne nous plait pas (parce qu’on n’arrive pas à l’apprivoiser), c’est se tirer une balle dans le pied.

    • Bruno Bichet dit :

      Il faut effectivement avoir une bonne connaissance des frameworks pour concevoir le sien. Mais je pense que d’un point de vue pédagogique, le fait de faire le sien dans son bac à sable peut s’avérer profitable sur le long terme.

  34. […] The Yahoo! User Interface Library (YUI) — Cette bibliothèque comprend un jeu d’utilitaires et de contrôles écrits en Javascript pour concevoir des applications hautement interactives en utilisant le DOM, le DHTML et Ajax. Inclut également un framework CSS. […]

  35. […] ♥ Frameworks CSS et Reset — design from scratch […]

  36. […] ♥ Frameworks CSS et Reset — design from scratch […]

  37. […] Frameworks CSS + Reset CSS : design from scratch […]

  38. […] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base […]

  39. Jarode dit :

    Dreamweaver ? C’est pas préhistorique ça ?

  40. Jardinage dit :

    La guerre des navigateur fait décidement du mal. Quoi que c’est encore l’hégémonique IE6 qui en a fait le plus !

  41. […] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Frameworks CSS + Reset CSS : design from scratch […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site