9 Frameworks CSS pour simplifier vos mises en pages

L’idée de framework est très répandue dans le monde du développement Web : Code Igniter, Django ou Ruby on Rails.

La notion de framework CSS est toutefois plus récente mais offre des avantages similaires qui visent à simplifier la vie des web designers pour la mise en page de sites Internet. Cette liste vous permettra de faire votre choix dans les diverses solutions qui s’offrent à vous.

Lien permanent 4 Commentaires

Comment fonctionnent les frameworks CSS ?

Un framework CSS se compose principalement de plusieurs de feuilles de styles qui servent de base dans l’intégration d’une page web. Elles ont généralement pour but de :

D’initialiser des propriétés CSS par défaut dans tous les navigateurs. En effet, l’une des plus grande difficultés dans un travail de mise en page vient du fait que les navigateurs définissent des propriété de texte, de marge, de police, (...) différentes et le framework CSS va faire en sorte que toutes les propriétés soient identiques sur tous les navigateurs.
Ils permettent aussi un positionnement des éléments par grille (grid layout). Ceci est très pratiques pour facilement mettre en page des modèles complexes composé de plusieurs colonnes. Vous n’aurez plus à vous soucier des flottements qui ne s’arrêtent plus de flotter et des colonnes qui bizarrement parfois ne flottent pas.
Ils peuvent aussi selon les cas prendre en charge l’apparence des formulaires, des tableaux et des styles destinés à l’impression.

Avantages et inconvénients

Le gros désavantage vient du fait que les frameworks vous obligeront à utiliser des classes qui seront déjà définies (cela ne vous empêche pas bien entendu d’utiliser vos propres classes), et vous aurez parfois besoin d’utiliser plusieurs div alors qu’une seule aurait pu suffire. Même si, au final cela ne change pas grand chose pour l’utilisateur final, la valeur sémantique d’un document s’en voit affectée . Si la sémantique est votre priorité, vous pouvez opter pour un simple reset des styles.

L’utilisation de frameworks CSS se traduit toutefois par un gain de temps énorme, surtout si vous êtes habitué à utiliser des grilles pour designer vos sites, et si vous avez à mettre en page un site de type magazine (des colonnes, des colonnes, et encore des colonnes).

Ici, chez Web Designer Things, nous utilisons Blueprint.

9 Frameworks CSS pour vous simplifier la vie

Blueprint

YAML

Boilerplate

Yahoo! UI Library: Grids CSS

Elements CSS Framework

WYMstyles CSS Framework

Schema Web Design Framework by David Golding Design

CleverCSS (Python)

Tripoli - CSS standard for HTML rendering

960 Grid System

À propos de l'auteur : Benjamin David

Hey there, I’m Ben ! I’m multimedia project manager, and when I’m not designing or writing posts, I listen to good music like Jack Johnson.

Site Internet

ekevin a dit...

Je ne les connais pas tous et loin de là, mais il serait intéressant d’indiquer la license. Yaml est payant il me semble, tandis que Blueprint est sous license MIT tandis et Sparl (non cité) sous GNU.

Il est agréable d’utiliser un Framework dans un projet, mais il est impératif à mon avis de connaître la logique du Framework utilisé au risque de quand même se perdre lors de l’ajout de sa feuille de style personnalisé

Merci pour cette liste

Le 10/10/2008 à 01:53 AM

Benjamin David a dit...

Ta remarque est tout à fait pertinente. L’objectif de cet article était de faire découvrir différents frameworks développés par des groupes ou des particuliers, et en effet, des informations sur les licences peuvent avoir une influence sur les choix des visiteurs de Web Designer Things.

Je m’empresse de regrouper les infos et de mettre à jour l’article.

Merci pour ton commentaire !

Le 10/10/2008 à 08:58 AM

Two December Network