CSS dispose également d'un Framework : Introduction à Blueprint

La conception du framework CSS peut nous aider à créer rapidement et efficacement des pages de haute qualité, et également contribuer à la standardisation du code. Bien entendu, chaque framework est basé sur les efforts d'innombrables prédécesseurs. Voici un framework CSS recommandé - le framework CSS Blueprint.

Frameworks CSS + Réinitialisation CSS : Conception à partir de zéro

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

1. Introduction

Blueprint est ce qu'on appelle un framework CSS. En comparaison, les commentaires dans le code du blueprint sont relativement détaillés.

Suivez la méthode de création d'un framework CSS telle que décrite dans Frameworks for Designers de Jeff Croft (ou la version chinoise de Understanding Web Frameworks and How to Build a CSS Framework) :

Il existe plusieurs manières possibles de créer un framework, mais la plus courante et sans doute la plus utile consiste à résumer votre CSS commun en feuilles de style individuelles qui couvrent chacune une partie particulière de l'ensemble. Par exemple, vous pouvez avoir une feuille de style qui définit. la typographie et une autre qui gère la réinitialisation en masse. La beauté de l'approche est la possibilité d'inclure de manière sélective uniquement les styles dont vous avez besoin. Vous pouvez vous retrouver avec six ou sept feuilles de style différentes dans votre framework, mais si un projet particulier n'en a pas. Nous n'en avons pas besoin d'un ou deux, ils n'ont pas besoin d'être inclus. Le framework que nous avons créé dans notre bureau comporte cinq feuilles de style :.

reset.css : gère la réinitialisation en masse.

type.css : gère la typographie.

grid.css : gère la grille de mise en page.

widgets.css : gère les widgets tels que les onglets, les menus déroulants et les boutons « Lire la suite ».

base.css — inclut toutes les autres feuilles de style, de sorte que nous n'avons besoin que d'appeler base.css à partir de nos documents (X)HTML pour utiliser l'intégralité du framework.

Le plan est construit de la même manière :

Diviser pour régner :

En termes d'organisation fonctionnelle, buleprint disperse des fonctions telles que la mise en page, la typographie, le widget, la réinitialisation et l'impression dans différents fichiers CSS. Cela permet aux utilisateurs d'importer uniquement les fonctions qu'ils souhaitent utiliser, au lieu d'importer tous les fichiers, et améliore les performances de chargement des pages. Actuellement, la section des composants ne fournit que le traitement des boutons et n'a pas encore atteint l'approche MECE de McKinsey (« mutuellement indépendante et complètement exhaustive »).

Interface unifiée :

Bien que les fonctions soient dispersées dans plusieurs fichiers CSS, lors de l'importation, seul le même fichier screen.css doit être inclus. Les détails spécifiques de l'importation sont traités dans screen.css, ce qui unifie l'interface externe.

Description du fichier CSS inclus dans le plan :

écran.css

Il s'agit du fichier principal du framework. Il importe d'autres fichiers CSS du répertoire "lib" et doit être inclus sur chaque page.

Semblable à la fonction base.css de Jeff Croft, il vous suffit d'inclure ce fichier et il peut être importé

imprimer.css

Ce fichier définit certaines règles d'impression par défaut, de sorte que les versions imprimées soient incluses sur chaque page.

Utilisé pour gérer l’impression et peut être classé comme widget.

lib/grid.css

Ce fichier configure la grille (c'est vrai). Il contient de nombreuses classes que vous appliquez aux div pour configurer toute sorte de grille basée sur des colonnes.

Utilisé pour gérer la mise en page (colonnes)

lib/typographie.css
Ce fichier définit une typographie par défaut. Il contient également quelques méthodes permettant de réaliser des tâches vraiment sophistiquées avec votre texte.

Utilisé pour gérer la mise en page des éléments de la page.

lib/reset.css

Ce fichier réinitialise les valeurs CSS que les navigateurs ont tendance à définir pour vous.

Utilisé pour réinitialiser la page et spécifier les valeurs par défaut pour les éléments de la page qui ne spécifient pas d'attributs CSS.

lib/boutons.css
Fournit d'excellents boutons CSS uniquement.

Utilisé pour gérer les boutons, qui peuvent être classés comme widgets

lib/compressé.css

Une version compressée des fichiers principaux. Utilisez-la sur chaque site en direct.

Voir screen.css pour les instructions

Fournissez des fichiers CSS compressés (y compris Grid.css, typography.css, Reset.css, Buttons.css).

2. Recherche sur l'utilisation de chaque module

2.1. Recherche sur grid.css

Gestion de la compatibilité du centrage entre navigateurs

De manière générale, pour gérer les différences entre Firefox et IE en matière de centrage, les méthodes suivantes sont utilisées :

body{text-align : center;}div#container{margin-left : auto;margin-right : auto;largeur : 50em;text-align : left;}

Récupéré de : http://www.maxdesign.com.au/presentation/center/

Comment gérer le plan :

body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* Un conteneur doit regrouper toutes vos colonnes */ .container { text-align: left; : 0 auto; /* Disposition des centres */ width: 1150px; /* Largeur totale */ }Comment implémenter le plan pour les colonnes (Colonnes) :

blueprint définit .column, .span-x et .last, qui sont combinés pour réaliser la fonction de colonne.

Parmi eux : .column définit l'attribut float de la colonne ; .span-x définit la largeur de la colonne ; .last définit la marge droite à 0px,

2.2. Recherche sur reset.css

Le code original de reset.css devrait provenir d'Eric Meyer Eric Meyer possède deux journaux sur la réinitialisation, qui sont utilisés pour résoudre le problème des différentes valeurs par défaut dans les navigateurs. La documentation d'Eric Meyer est excellente :

Réinitialiser le raisonnement : http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Réinitialiser rechargé : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Pourquoi réinitialiser
La raison fondamentale est que tous les navigateurs ont des paramètres de présentation par défaut, mais aucun navigateur n'a les mêmes paramètres par défaut (d'accord, il n'y a pas deux familles de navigateurs : la plupart des navigateurs basés sur Gecko ont les mêmes paramètres par défaut.)
Par exemple, certains navigateurs indentent les listes non ordonnées et ordonnées avec des marges de gauche, tandis que d'autres utilisent un remplissage à gauche. Au cours des années passées, nous avons résolu ces incohérences au cas par cas ;

Pourquoi utiliser le style de réinitialisation au lieu du sélecteur universel

Le sélecteur dit universel utilise * pour représenter tous les éléments du document, par exemple

* { margin : 0;} Quelques ressources sur le thème du style de réinitialisation :

Bibliothèque de réinitialisation YUI : http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

Les articles suivants sont en fait des articles traitant du framework CSS ou de conseils, mais ils mentionnent tous le sujet de la réinitialisation.

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3. Recherche sur typographie.css

typography.css est utilisé pour déterminer le format de mise en page par défaut (ligne de base) des éléments de la page :

Définition du type sur le Web sur une grille de référence :

http://alistapart.com/articles/settingtypeontheweb

2.4. Recherche sur boutons.css

Redécouvrir l'élément Button aborde les différents avantages de l'utilisation de l'élément bouton pour remplacer l'élément d'entrée. L'élément bouton fournit des fonctions plus riches.

http://particletree.com/features/rediscovering-the-button-element

2.4. Recherche Print.css

Eric Meyer a un article sur l'implémentation de la fonction d'impression en CSS, qui peut être utilisé comme référence pour comprendre print.css.

Conception CSS : en cours d'impression

Imprimer différemment

2.5, compressé.css

compressé.css est un package qui compresse plusieurs fichiers de plan. Il compresse également le fichier CSS, supprimant les espaces inutiles, les nouvelles lignes, les commentaires et autres textes.

Cette méthode est utilisée lors du déploiement sur des systèmes de production pour éviter d'importer plusieurs fichiers CSS sur la page, et elle est également utile pour améliorer les performances de la page.

Selon les instructions de lib/screen.css, le service de compression CSS fourni par teenage doit être utilisé :

http://teenage.cz/acidofil/tools/cssformat.php

De plus, des services similaires qui assurent l'optimisation et la compression des CSS et du Javascript incluent :

http://csstidy.sourceforge.net/ (open source)

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ (basé sur csstidy)

3. Exemples d'utilisation

4. Documents de référence

http://code.google.com/p/blueprintcss/wiki/Tutorial

5. Projets connexes

générateur de plans : http://kematzy.com/blueprint-generator/

Tripoli : http://monc.se/tripoli/

Article recommandé : http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/